$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 android/app/build.gradle:
`
implementation project(':react-native-navigation-bar-color')
`


`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 (
style={{
flex: 1,
justifyContent: 'space-around',
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'cyan',
}}>


title="Set color red"
onPress={() => {
setNavigationColor('red');
}}
/>
title="Set color blue"
onPress={() => {
setNavigationColor('blue');
}}
/>
title="Set color ligth"
onPress={() => {
changeNavigationBarColor('#ffffff', true);
}}
/>


Hello Word!

);
}
`