rn-curved-navigation-bar
v1.1.0
Published
curved navigation bar for react native
Downloads
112
Maintainers
Readme
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
import CurvedNavBar from 'rn-curved-navigation-bar'
<CurvedNavBar icons={['air-horn','alarm','android-auto','auto-fix','bell-ring']}
navColor={'#482ff7'}
cb={(id)=>{this.setState({page:id})}} //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