Gathering detailed insights and metrics for @gennadysx/react-native-navigation-bar-color
Gathering detailed insights and metrics for @gennadysx/react-native-navigation-bar-color
Installations
npm install @gennadysx/react-native-navigation-bar-colorDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.18.1
NPM Version
8.19.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
3.1.0
Package Id
@gennadysx/react-native-navigation-bar-color@3.1.0
Unpacked Size
71.51 kB
Size
26.96 kB
File Count
19
NPM Version
8.19.2
Node Version
16.18.1
Published on
Jan 23, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
No dependencies detected.
React 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.
Android Only
Table of Contents
Support
Installation
react-native >= 0.60.0
1 - Install the package:
$ yarn add @gennadysx/react-native-navigation-bar-color
or
$ npm install @gennadysx/react-native-navigation-bar-color --save
That's is all!
react-native <= 0.59.0
1 - Install the package:
$ yarn add @gennadysx/react-native-navigation-bar-color
or
$ npm install @gennadysx/react-native-navigation-bar-color --save
2 - Configure package:
- 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:implementation project(':react-native-navigation-bar-color')
Example
**Android Implementation**
1import React from 'react'; 2import {View, Text, Button} from 'react-native'; 3import changeNavigationBarColor, { 4 hideNavigationBar, 5 showNavigationBar, 6} from '@gennadysx/react-native-navigation-bar-color'; 7 8export default function App() { 9 const setNavigationColor = color => { 10 changeNavigationBarColor(color); 11 }; 12 const hideNavigation = () => { 13 hideNavigationBar(); 14 }; 15 16 const showNavigation = () => { 17 showNavigationBar(); 18 }; 19 20 const testSetTranslucent = () => { 21 changeNavigationBarColor('translucent', false); 22 }; 23 24 const testSetTransparent = () => { 25 changeNavigationBarColor('transparent', true); 26 }; 27 28 return ( 29 <View 30 style={{ 31 flex: 1, 32 justifyContent: 'space-around', 33 alignContent: 'center', 34 alignItems: 'center', 35 backgroundColor: 'cyan', 36 }}> 37 <Button title="Set transparent" onPress={testSetTransparent} /> 38 <Button title="Set translucent" onPress={testSetTranslucent} /> 39 <Button 40 title="Set color red" 41 onPress={() => { 42 setNavigationColor('red'); 43 }} 44 /> 45 <Button 46 title="Set color blue" 47 onPress={() => { 48 setNavigationColor('blue'); 49 }} 50 /> 51 <Button 52 title="Set color ligth" 53 onPress={() => { 54 changeNavigationBarColor('#ffffff', true); 55 }} 56 /> 57 <Button title="Hide bar" onPress={hideNavigation} /> 58 <Button title="Show bar" onPress={showNavigation} /> 59 <Text>Hello Word!</Text> 60 </View> 61 ); 62}
API
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.
- Returns a
Promise
1 example = async () => { 2 try{ 3 const response = await changeNavigationBarColor('#80b3ff'); 4 console.log(response)// {success: true} 5 }catch(e){ 6 console.log(e)// {success: false} 7 } 8 9 };
OR
1 example = async () => { 2 try{ 3 const response = await changeNavigationBarColor('#80b3ff', true); 4 console.log(response)// {success: true} 5 }catch(e){ 6 console.log(e)// {success: false} 7 } 8 9 };
hideNavigationBar(): (Android)
Hide Navigation Bar
1 import { hideNavigationBar } from '@gennadysx/react-native-navigation-bar-color'; 2 ... 3 hide = () => { 4 hideNavigationBar(); 5 };
showNavigationBar(): (Android)
Show Navigation Bar
1 import { showNavigationBar } from '@gennadysx/react-native-navigation-bar-color'; 2 ... 3 show = () => { 4 showNavigationBar(); 5 };
License
MIT
No vulnerabilities found.
No security vulnerabilities found.