Add the dependency:
npm i react-native-bottom-bar
"react-native-bottom-bar": "WrathChaos/react-native-bottom-bar#expo"
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"
<BottomBar
style={style}
shapeColor={shapeColor}
mainIcon={mainIcon}
mainIconColor={mainIconColor}
mainIconGradient={mainIconGradient}
mainIconComponent={mainIconComponent}
miniButtonsColor={miniButtonsColor}
firstIconComponent={firstIconComponent}
secondIconComponent={secondIconComponent}
thirdIconComponent={thirdIconComponent}
fourthIconComponent={fourthIconComponent}
/>
- 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.
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 |
Thank you RN Typography Team for the ShowcaseScreen :) It has a great design.
FreakyCoder, kurayogun@gmail.com
React Native Bottom Bar Library is available under the MIT license. See the LICENSE file for more info.