toris-dev / ReactNative_Curved_Navigation_Bar

Curved Navigation Bar for React Native

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