React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar on Android.
$ npm install react-native-navigation-bar-color --save
$ react-native link react-native-navigation-bar-color
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.thebylito.navigationbarcolor.NavigationBarColorPackage;to the imports at the top of the file - Add
new NavigationBarColorPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/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') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-navigation-bar-color')
Android Implementation
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import changeNavigationBarColor, {
HideNavigationBar,
ShowNavigationBar,
} from 'react-native-navigation-bar-color';
export default class Mynewapp extends Component {
setNavigationColor = (color) => {
changeNavigationBarColor(color);
};
hideNavigation() {
HideNavigationBar();
};
showNavigation() {
ShowNavigationBar();
};
render() {
return (
<View
style={{
flex: 1,
justifyContent: 'space-around',
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
}}
>
<Button
title="Set color red"
onPress={() => {
this.setNavigationColor('red');
}}
/>
<Button
title="Set color blue"
onPress={() => {
this.setNavigationColor('blue');
}}
/>
<Button
title="Set color ligth"
onPress={() => {
changeNavigationBarColor('#ffffff', true);
}}
/>
<Button
title="Hide bar"
onPress={this.hideNavigation}
/>
<Button
title="Show bar"
onPress={this.showNavigation}
/>
<Text>Hello Word!</Text>
</View>
);
}
}Change color of Navigation/Bottom bar. color can be a HEX color, or name. ex: green, blue, #80b3ff, #ffffff....
Light is true? icons will be dark.
- Returns a
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}
}
};Hide Navigation Bar
import { HideNavigationBar } from 'react-native-navigation-bar-color';
...
hide = () => {
HideNavigationBar();
};Show Navigation Bar
import { ShowNavigationBar } from 'react-native-navigation-bar-color';
...
show = () => {
ShowNavigationBar();
};MIT
