
Security Fundamentals
Turtles, Clams, and Cyber Threat Actors: Shell Usage
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.
react-native-navigation-bar-color
Advanced tools
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: 1,
justifyContent: 'space-around',
alignContent: 'center',
alignItems: 'center',
backgroundColor: 'cyan',
}}>
<Button title="Set transparent" onPress={testSetTransparent} />
<Button title="Set translucent" onPress={testSetTranslucent} />
<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 title="Show bar" onPress={showNavigation} />
<Text>Hello Word!</Text>
</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
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security Fundamentals
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.
Security News
At VulnCon 2025, NIST scrapped its NVD consortium plans, admitted it can't keep up with CVEs, and outlined automation efforts amid a mounting backlog.
Product
We redesigned our GitHub PR comments to deliver clear, actionable security insights without adding noise to your workflow.