Navigation TabBar footer component for IOS and Android with slide animation which contains tab icon and title.
yarn add react-native-tab-bar-footer
import TabBar from 'react-native-tab-bar-footer'
...
const tabs = [
{
icon: star,
activeIcon: starActive,
title: 'Favorites'
},
{
icon: play,
activeIcon: playActive,
title: 'Play'
},
{
icon: user,
activeIcon: userActive,
title: 'Profile'
},
]
render() {
return <TabBar onTabChange={(index) => alert(index)} tabs={tabs} />
}
Prop | Default | Type | Description |
---|---|---|---|
tabs | [] | Array<Tab> |
Tab objects |
initialIndex | 0 | number |
Initial active tab |
onTabChange | undefined | func |
onClick tab |
slideSpeed | 25 | number |
tabBar animation speed |
slideBounciness | 10 | number |
tabBar bounciness |
tabSize | 30 | number |
tab size |
barColor | 'white' | color |
tabBar color |
height | 60 | number |
tabBar height |
titleStyle | - | style |
title custom style |
iconStyle | - | style |
icon custom style |
animationDuration | 200 | number |
animation duration |
rippleProps | rippleCentered |
object |
Ripple component props |
Tab object structure:
type Tab = {
icon: string|number,
activeIcon: string|number,
title: string
}
Feel free to open an issue