react-native-android-navigation-bar
v1.0.2
React Native component to change bottom bar/navigation bar color on Android
react-nativereact-native-componentreact-componentreactnativenavigation-barnavigation-bar-colornavigation-themebottom-barbottom-bar-color
0/weekUpdated 3 years agoMITUnpacked: 71.4 KB
Published by Roland Edi -
npm install react-native-android-navigation-barReact Native Navigation Bar Color Change
React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar on Android.
$3
Table of Contents
- Installation
- Example
- API
- License
Support
Installation
react-native >= 0.60.0
$3
$ yarn add react-native-navigation-bar-color
or
$ npm install react-native-navigation-bar-color --save
That's is all!
$3
$ yarn add react-native-navigation-bar-color
or
$ npm install react-native-navigation-bar-color --save
$3
1. 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 the getPackages() method
2. 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')
3. Insert the following lines inside the dependencies block in :`
implementation project(':react-native-navigation-bar-color')
Example
Android Implementation
`javascript
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 (
flex: 1,
justifyContent: 'space-around',
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'cyan',
}}>
onPress={() => {
setNavigationColor('red');
}}
/>
onPress={() => {
setNavigationColor('blue');
}}
/>
onPress={() => {
changeNavigationBarColor('#ffffff', true);
}}
/>
);
}
`
API
$3
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.
- Returns a Promise
`javascript
example = async () => {
try{
const response = await changeNavigationBarColor('#80b3ff');
console.log(response)// {success: true}
}catch(e){
console.log(e)// {success: false}
}
};
`
OR
`javascript`
example = async () => {
try{
const response = await changeNavigationBarColor('#80b3ff', true);
console.log(response)// {success: true}
}catch(e){
console.log(e)// {success: false}
}
};
$3
Hide Navigation Bar
`javascript`
import { hideNavigationBar } from 'react-native-navigation-bar-color';
...
hide = () => {
hideNavigationBar();
};
$3
Show Navigation Bar
`javascript``
import { showNavigationBar } from 'react-native-navigation-bar-color';
...
show = () => {
showNavigationBar();
};
License
MIT
