Skip to content

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

Notifications You must be signed in to change notification settings

arelstone/react-native-animated-tabbar

Repository files navigation

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

npm npm (scoped) GitHub issues GitHub pull requests

@arelstone/react-native-animated-tabbar

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.

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published