Installation
Add the dependency:
Pure React Native :
npm i react-native-bottom-barExpo 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.