Installation

Add the dependency:

Pure React Native :

npm i react-native-bottom-bar

Expo Version :

"react-native-bottom-bar": "WrathChaos/react-native-bottom-bar#expo"

Peer Dependencies :

You must install these dependencies!

"@freakycoder/react-native-helpers": ">= 1.0.0",
"react-native-androw": ">= 0.0.31",
"react-native-vector-icons": ">= 6.0.0",
"react-native-linear-gradient": ">= 2.4.x",
"react-native-dynamic-vector-icons": ">= x.x.x"

Usage

<BottomBar
  style={style}
  shapeColor={shapeColor}
  mainIcon={mainIcon}
  mainIconColor={mainIconColor}
  mainIconGradient={mainIconGradient}
  mainIconComponent={mainIconComponent}
  miniButtonsColor={miniButtonsColor}
  firstIconComponent={firstIconComponent}
  secondIconComponent={secondIconComponent}
  thirdIconComponent={thirdIconComponent}
  fourthIconComponent={fourthIconComponent}
/>

Example Application

• I just shared the example project on Expo, simply run on your device to check what it is: via Expo OR check the code, and yes! :) all of the images, screenshots are directly taken from the this example. Of course, you can simply clone the project and run the example on your own environment.

Configuration - Props

BottomBar:

| Property | Type | Default | Description | | ------------------- | :-------: | :----------------------------------------: | --------------------------------------------------- | | style | style | container | use this to change the main BottomBar's style | | shapeStyle | style | bottom:89 | use this to change the main BottomBar's Shape style | | shapeColor | color | #FBFBFD | use this to change the unique shape's color | | mainIcon | component | icon | changes the main big button's icon type | | mainIconColor | color | #FFFFFF | changes the main big button's icon color | | mainIconGradient | array | blue gradient | changes the main big button's gradient color | | mainIconComponent | component | MainIconButton(Gradient Icon based button) | Make your own button on the main one | | miniButtonsColor | color | null | changes the mini buttons color with a single prop | | firstIconComponent | component | MiniButton(simple icon button) | renders your own component as a first button | | secondIconComponent | component | MiniButton(simple icon button) | renders your own component as a second button | | thirdIconComponent | component | MiniButton(simple icon button) | renders your own component as a third button | | fourthIconComponent | component | MiniButton(simple icon button) | renders your own component as a fourth button | | disableFirstIcon | boolean | false | disable the first icon button | | disableSecondIcon | boolean | false | disable the second icon button | | disableThirdIcon | boolean | false | disable the third icon button | | disableFourthIcon | boolean | false | disable the fourth icon button |

Credits

Thank you RN Typography Team for the ShowcaseScreen :) It has a great design.

Author

FreakyCoder, [email protected]

License

React Native Bottom Bar Library is available under the MIT license. See the LICENSE file for more info.