forked from vergnet/application-amicale
113 lines
2.4 KiB
TypeScript
113 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { TouchableRipple, useTheme } from 'react-native-paper';
|
|
import { StyleSheet, View } from 'react-native';
|
|
import * as Animatable from 'react-native-animatable';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import GENERAL_STYLES from '../../constants/Styles';
|
|
|
|
interface Props {
|
|
focused: boolean;
|
|
label: string | undefined;
|
|
icon: string;
|
|
focusedIcon: string;
|
|
onPress: () => void;
|
|
}
|
|
|
|
Animatable.initializeRegistryWithDefinitions({
|
|
focusIn: {
|
|
0: {
|
|
// @ts-ignore
|
|
scale: 1,
|
|
translateY: 0,
|
|
},
|
|
0.4: {
|
|
// @ts-ignore
|
|
scale: 1.3,
|
|
translateY: 6,
|
|
},
|
|
0.6: {
|
|
// @ts-ignore
|
|
scale: 1.1,
|
|
translateY: 6,
|
|
},
|
|
0.8: {
|
|
// @ts-ignore
|
|
scale: 1.25,
|
|
translateY: 6,
|
|
},
|
|
1: {
|
|
// @ts-ignore
|
|
scale: 1.2,
|
|
translateY: 6,
|
|
},
|
|
},
|
|
focusOut: {
|
|
0: {
|
|
// @ts-ignore
|
|
scale: 1.2,
|
|
translateY: 6,
|
|
},
|
|
1: {
|
|
// @ts-ignore
|
|
scale: 1,
|
|
translateY: 0,
|
|
},
|
|
},
|
|
});
|
|
|
|
function TabSideIcon(props: Props) {
|
|
const theme = useTheme();
|
|
const color = props.focused ? theme.colors.primary : theme.colors.disabled;
|
|
let icon = props.focused ? props.focusedIcon : props.icon;
|
|
return (
|
|
<TouchableRipple
|
|
onPress={props.onPress}
|
|
borderless
|
|
rippleColor={theme.colors.primary}
|
|
style={{
|
|
...styles.ripple,
|
|
borderTopEndRadius: theme.roundness,
|
|
borderTopStartRadius: theme.roundness,
|
|
}}
|
|
>
|
|
<View>
|
|
<Animatable.View
|
|
duration={props.focused ? 500 : 200}
|
|
easing="ease-out"
|
|
animation={props.focused ? 'focusIn' : 'focusOut'}
|
|
useNativeDriver
|
|
>
|
|
<MaterialCommunityIcons
|
|
name={icon}
|
|
color={color}
|
|
size={26}
|
|
style={GENERAL_STYLES.centerHorizontal}
|
|
/>
|
|
</Animatable.View>
|
|
<Animatable.Text
|
|
animation={props.focused ? 'fadeOutDown' : 'fadeIn'}
|
|
useNativeDriver
|
|
style={{
|
|
color: color,
|
|
...styles.text,
|
|
}}
|
|
>
|
|
{props.label}
|
|
</Animatable.Text>
|
|
</View>
|
|
</TouchableRipple>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
ripple: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
text: {
|
|
...GENERAL_STYLES.centerHorizontal,
|
|
fontSize: 10,
|
|
},
|
|
});
|
|
|
|
export default TabSideIcon;
|