How to make reusable component for tabbar in react native - react-native

Question

I have a custom tabbar component and I want to add a button with animation and I want to make reusable but I can't figured out. For example I want to use it for 1,2,3... etc icons. I don't want to decide it in the component itself.The code is like below.
export const TabAddButton = () => {
const windowWidth = useWindowDimensions().width;
const buttonSize = useRef(new Animated.Value(1)).current;
const mode = useRef(new Animated.Value(0)).current;
const handlePress = () => {
Animated.sequence([
Animated.timing(buttonSize, {
toValue: 0.95,
duration: 5,
useNativeDriver: true,
}),
Animated.timing(mode, {
toValue: mode["_value"] === 0 ? 1 : 0,
duration: 150,
useNativeDriver: false,
}),
]).start();
};
const lockX = mode.interpolate({
inputRange: [0, 1],
outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 - 60],
});
const lockY = mode.interpolate({
inputRange: [0, 1],
outputRange: [-20, -75],
});
const noteX = mode.interpolate({
inputRange: [0, 1],
outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 + 60],
});
return (
<Box {...StyleSheet.absoluteFillObject} alignItems="center">
<Animated.View
style={[styles.secondaryView,{ left: lockX,top: lockY,}]}>
<TouchableOpacity style={styles.secondaryButton}>
<Feather name="lock" size={24} color="#FFF" />
</TouchableOpacity>
</Animated.View>
<Animated.View style={[styles.secondaryView,{ left: lockX,top: noteY,}]}>
<TouchableOpacity style={styles.secondaryButton}>
<Foundation name="clipboard-notes" size={24} color="#FFF" />
</TouchableOpacity>
</Animated.View>
<View style={[styles.button]}>
<Animated.View style={[transform: [{ scale: buttonSize }]]}>
<TouchableOpacity activeOpacity={1} onPress={handlePress} style={styles.primaryButton}
>
<Animated.View>
<FontAwesome5 name="plus" size={24} color="#FFF" />
</Animated.View>
</TouchableOpacity>
</Animated.View>
</View>
</Box>
);
};

Answer 1

I'd suggest something like this
childButtons = [
{
isPrimary: false,
iconName: 'lock',
iconType: 'Feather',
onPress: () => {},
},
{
isPrimary: false,
iconName: 'clipboard-notes',
iconType: 'Foundation',
onPress: () => {},
},
/** ... */
];
const AppTabSecondaryButton = ({ containerStyle, onPress, IconType, iconName }) => (
<Animated.View style={[styles.secondaryView, containerStyle]}>
<TouchableOpacity onPress={onPress} style={styles.secondaryButton}>
<IconType name={iconName} size={24} color="#FFF" />
</TouchableOpacity>
</Animated.View>
);
const AppTabPrimaryButton = ({ containerStyle, onPress, IconType, iconName }) => {
<View style={[styles.button]}>
<Animated.View style={containerStyle}>
<TouchableOpacity activeOpacity={1} onPress={onPress} style={styles.primaryButton}
>
<Animated.View>
<IconType name={iconName} size={24} color="#FFF" />
</Animated.View>
</TouchableOpacity>
</Animated.View>
</View>
};
export const TabAddButton = ({ childButtons }) => {
/** Other stuff */
const lockX = mode.interpolate({
inputRange: [0, 1],
outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 - 60],
});
const lockY = mode.interpolate({
inputRange: [0, 1],
outputRange: [-20, -75],
});
const noteX = mode.interpolate({
inputRange: [0, 1],
outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 + 60],
});
const btnContainerStyles = [
[styles.secondaryView, { left: lockX, top: lockY, }],
[styles.secondaryView, { left: lockX, top: noteY }],
/** ... */
];
return (
<Box {...StyleSheet.absoluteFillObject} alignItems="center">
{childButtons.map(({ iconName, iconType, onPress, isPrimary }, index) => (
isPrimary ? (<AppTabPrimaryButton /** supply props */ />) :
(<AppTabSecondaryButton /** supply props */ />)
))}
</Box>
);
};