@arelstone/react-native-animated-tabbar

@arelstone/react-native-animated-tabbar

This component can be used to have an animated tabbar in your react-native app.

This package leverages on react-native-svg and d3-shapes.

Install

npm i @arelstone/react-native-animated-tabbar
// or
yarn add @arelstone/react-native-animated-tabbar

For ios remember to run pod install in the ./ios-directory to apply react-native-svg.

Props

Prop	Type	Description
tabs	{ icon: ReactElement; activeIcon: ReactElement; onPress: () => void; label?: string;}	An array of tabs that will be displayed
backgroundColor	string (optional)	Set the backgroundColor of the tabbar and the circle. Default: white
circleAnimationDurationMs	number (optional)	Change the duration of the circle animation. Defualt: 100
circleContainerStyle	StyleProp (optional)	Apply some styling the the container that holds the circles
circleSize	number (optional)	The size of the circle. Default 40
circleStyle	StyleProp (optional)	Apply some styling for the circles
height	number (optional)	Set the height of the tabbar. Default 64
textStyle	StyleProp (optional)	Apply styling to the label of each tab.

Credits

This component wouldn't have been able to do without the videos from William Candillon who was the inspiration for this component. I will reccoment all of his videos.