@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.