React Native component to change bottom bar/navigation bar color on Android
React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar on Android.
$ yarn add react-native-navigation-bar-color
or
$ npm install react-native-navigation-bar-color --save
$ yarn add react-native-navigation-bar-color
or
$ npm install react-native-navigation-bar-color --save
android/app/src/main/java/[...]/MainApplication.java
import com.thebylito.navigationbarcolor.NavigationBarColorPackage;
to the imports at the top of the filenew NavigationBarColorPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:include ':react-native-navigation-bar-color'
project(':react-native-navigation-bar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation-bar-color/android')
android/app/build.gradle
:implementation project(':react-native-navigation-bar-color')
import React from 'react';
import {View, Text, Button} from 'react-native';
import changeNavigationBarColor, {
hideNavigationBar,
showNavigationBar,
} from 'react-native-navigation-bar-color';
export default function App() {
const setNavigationColor = color => {
changeNavigationBarColor(color);
};
const hideNavigation = () => {
hideNavigationBar();
};
const showNavigation = () => {
showNavigationBar();
};
const testSetTranslucent = () => {
changeNavigationBarColor('translucent', false);
};
const testSetTransparent = () => {
changeNavigationBarColor('transparent', true);
};
return (
<view style="{{" flex: justifycontent: aligncontent: alignitems: backgroundcolor:>
<button title="Set transparent" onpress="{testSetTransparent}"></button>
<button title="Set translucent" onpress="{testSetTranslucent}"></button>
<button title="Set color red" onpress="{()"> {
setNavigationColor('red');
}}
/>
<button title="Set color blue" onpress="{()"> {
setNavigationColor('blue');
}}
/>
<button title="Set color ligth" onpress="{()"> {
changeNavigationBarColor('#ffffff', true);
}}
/>
<button title="Hide bar" onpress="{hideNavigation}"></button>
<button title="Show bar" onpress="{showNavigation}"></button>
<text>Hello Word!</text>
</button></button></button></view>
);
}
changeNavigationBarColor(color, Boolean(light icon color), Boolean(animated - default is true)): (Android)
Change color of Navigation/Bottom bar. color can be a "translucent" | "transparent" | HEX color, or name.
ex: green, blue, #80b3ff, #ffffff....
Light is true? icons will be dark.
Promise
example = async () => { try{ const response = await changeNavigationBarColor('#80b3ff'); console.log(response)// {success: true} }catch(e){ console.log(e)// {success: false} }};
example = async () => { try{ const response = await changeNavigationBarColor('#80b3ff', true); console.log(response)// {success: true} }catch(e){ console.log(e)// {success: false} }};
hideNavigationBar(): (Android)
Hide Navigation Bar
import { hideNavigationBar } from 'react-native-navigation-bar-color'; ... hide = () => { hideNavigationBar(); };
showNavigationBar(): (Android)
Show Navigation Bar
import { showNavigationBar } from 'react-native-navigation-bar-color'; ... show = () => { showNavigationBar(); };
MIT