React Native Navbar Style is a react-native library for styling the bottom navigation bar on Android devices.
$ npm install react-native-navbar-style --save
$ react-native link react-native-navbar-style
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.tksp.navbarstyle.RNNavbarStylePackage;
to the imports at the top of the file - Add
new RNNavbarStylePackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-navbar-style' project(':react-native-navbar-style').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navbar-style/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-navbar-style')
Changing the NavigationBar color is only supported on Android Lollipop(API 21) and above. Changing the NavigationBar theme (light or dark) is supported only on Android Oreo(API 26) and above.
Importing
import NavbarStyle from 'react-native-navbar-style';
Changing color - setNavBarColor(color)
NavbarStyle.setNavbarColor('#16a085');
Changing Theme - setLightNavbar(isLight)
//Makes the navigation bar icons dark.
//This is suitable for light navbar colors.
await NavbarStyle.setLightNavbar(true);
//Normal Navbar(Light Icons)
await NavbarStyle.setLightNavbar(false);
NavbarStyle.setNavbarColor('#8e44ad');
await NavbarStyle.setLightNavbar(false);
NavbarStyle.setNavbarColor('#ecf0f1');
await NavbarStyle.setLightNavbar(true);
NavbarStyle.setNavbarColor('#16a085');
await NavbarStyle.setLightNavbar(true);