react-native-bottom-bar
Fully customizable BottomBar for React Native.
Last updated 2 months ago by freakycoder .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-bottom-bar 
SYNC missed versions from official npm registry.

React Native Bottom Bar

Fully customizable, unique shaped bottom bar component for React Native.

npm version npm License: MIT

React Native Bottom Bar React Native Bottom Bar

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!

"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.31",
"react-native-vector-icons": ">= 6.0",
"react-native-iphone-x-helper": ">= 1.2",
"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

Credits

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

Author

FreakyCoder, kurayogun@gmail.com

License

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

Current Tags

  • 0.2.1                                ...           latest (2 months ago)

18 Versions

  • 0.2.1                                ...           2 months ago
  • 0.2.0                                ...           3 months ago
  • 0.1.52                                ...           6 months ago
  • 0.1.51                                ...           7 months ago
  • 0.1.5                                ...           7 months ago
  • 0.1.4                                ...           9 months ago
  • 0.1.3                                ...           9 months ago
  • 0.1.2                                ...           10 months ago
  • 0.1.1                                ...           10 months ago
  • 0.1.0                                ...           10 months ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |