ReactNative Curved Navigation Bar
Animated Curved Navigation Bar for React Native
Getting Started
1 | You need to install React native Vector Icons
npm i react-native-vector-icons
Goto https://github.com/oblador/react-native-vector-icons to solve linking problems(if occurs).
2 | Install Rn curved navigation bar
npm i rn-curved-navigation-bar
or
yarn add rn-curved-navigation-bar
Props
Prop | Type | default | description |
---|---|---|---|
icons | array | - | 5 icons name in array |
selected | number | 1 | initial tab icon selected |
iconColor | string | black | nav bar icons color |
selectedIconColor | string | white | selected icon color |
mainOffSetIos | number | - | bottom offset of nav bar in ios |
mainOffSetAndroid | number | - | bottom offset of nav bar in android |
navColor | string | #4687FD | Main navigation bar color |
cb | function | - | returns page selected id that can be mapped |
Example of using cb to change the state
<CurvedNavBar icons='air-horn''alarm''android-auto''auto-fix''bell-ring' navColor='#482ff7'cb={this} //change the parent's state of page />
Todo features
👉🏼To implement change tab from foreign component
👉🏼To fix for less than 5 icons
👉🏼more styles and customize option