├── .github └── workflows │ └── npmpublish.yml ├── .gitignore ├── LICENSE ├── README.md ├── android ├── build.gradle ├── gradlew ├── gradlew.bat └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── thebylito │ └── navigationbarcolor │ ├── NavigationBarColorModule.java │ └── NavigationBarColorPackage.java ├── index.d.ts ├── index.js ├── package.json ├── screenshots ├── screenShot1.jpg ├── screenShot2.jpg └── screenShot3.jpg └── src └── index.js /.github/workflows/npmpublish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v1 13 | - uses: actions/setup-node@v1 14 | with: 15 | node-version: 12 16 | 17 | publish-npm: 18 | needs: build 19 | runs-on: ubuntu-latest 20 | steps: 21 | - uses: actions/checkout@v1 22 | - uses: actions/setup-node@v1 23 | with: 24 | node-version: 12 25 | registry-url: https://registry.npmjs.org/ 26 | - run: npm publish 27 | env: 28 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 29 | 30 | # publish-gpr: 31 | # needs: build 32 | # runs-on: ubuntu-latest 33 | # steps: 34 | # - uses: actions/checkout@v1 35 | # - uses: actions/setup-node@v1 36 | # with: 37 | # node-version: 12 38 | # registry-url: https://npm.pkg.github.com/ 39 | # scope: '@thebylito' 40 | # - run: npm publish 41 | # env: 42 | # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | android/.gradle/* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 thebylito 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Navigation Bar Color Change 2 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fthebylito%2Freact-native-navigation-bar-color.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fthebylito%2Freact-native-navigation-bar-color?ref=badge_shield) 3 | 4 | 5 | React Native Navigation Bar Color Change is a [React Native](http://facebook.github.io/react-native/) library for change color of navigation/Bottom bar on Android. 6 | 7 | ### Android Only 8 | 9 |
10 | 11 | 12 | 13 | 14 |
15 | 16 | ## Table of Contents 17 | 18 | - [Installation](#installation) 19 | - [Example](#example) 20 | - [API](#api) 21 | - [License](#license) 22 | 23 | ## Support 24 | 25 | 26 | ## Installation 27 | 28 |
29 | react-native >= 0.60.0 30 | 31 | ### 1 - Install the package: 32 | 33 | `$ yarn add react-native-navigation-bar-color` 34 | 35 | or 36 | 37 | `$ npm install react-native-navigation-bar-color --save` 38 | 39 | ## That's is all! 40 | 41 |
42 | 43 |
44 | 45 | react-native <= 0.59.0 46 | 47 | ### 1 - Install the package: 48 | 49 | `$ yarn add react-native-navigation-bar-color` 50 | 51 | or 52 | 53 | `$ npm install react-native-navigation-bar-color --save` 54 | 55 | ### 2 - Configure package: 56 | 57 | 1. Open up `android/app/src/main/java/[...]/MainApplication.java` 58 | - Add `import com.thebylito.navigationbarcolor.NavigationBarColorPackage;` to the imports at the top of the file 59 | - Add `new NavigationBarColorPackage()` to the list returned by the `getPackages()` method 60 | 2. Append the following lines to `android/settings.gradle`: 61 | ``` 62 | include ':react-native-navigation-bar-color' 63 | project(':react-native-navigation-bar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation-bar-color/android') 64 | ``` 65 | 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 66 | ``` 67 | implementation project(':react-native-navigation-bar-color') 68 | ``` 69 |
70 | 71 | ## Example 72 | 73 |
74 | **Android Implementation** 75 | 76 | ```javascript 77 | import React from 'react'; 78 | import {View, Text, Button} from 'react-native'; 79 | import changeNavigationBarColor, { 80 | hideNavigationBar, 81 | showNavigationBar, 82 | } from 'react-native-navigation-bar-color'; 83 | 84 | export default function App() { 85 | const setNavigationColor = color => { 86 | changeNavigationBarColor(color); 87 | }; 88 | const hideNavigation = () => { 89 | hideNavigationBar(); 90 | }; 91 | 92 | const showNavigation = () => { 93 | showNavigationBar(); 94 | }; 95 | 96 | const testSetTranslucent = () => { 97 | changeNavigationBarColor('translucent', false); 98 | }; 99 | 100 | const testSetTransparent = () => { 101 | changeNavigationBarColor('transparent', true); 102 | }; 103 | 104 | return ( 105 | 113 |
141 | 142 | ## API 143 | 144 | ### `changeNavigationBarColor(color, Boolean(light icon color), Boolean(animated - default is true))`: (Android) 145 | Change color of Navigation/Bottom bar. 146 | color can be a "translucent" | "transparent" | HEX color, or name. 147 | 148 | ex: green, blue, #80b3ff, #ffffff.... 149 | 150 | Light is true? icons will be dark. 151 | 152 | - Returns a `Promise` 153 | 154 | ```javascript 155 | example = async () => { 156 | try{ 157 | const response = await changeNavigationBarColor('#80b3ff'); 158 | console.log(response)// {success: true} 159 | }catch(e){ 160 | console.log(e)// {success: false} 161 | } 162 | 163 | }; 164 | ``` 165 | 166 | ## OR 167 | 168 | ```javascript 169 | example = async () => { 170 | try{ 171 | const response = await changeNavigationBarColor('#80b3ff', true); 172 | console.log(response)// {success: true} 173 | }catch(e){ 174 | console.log(e)// {success: false} 175 | } 176 | 177 | }; 178 | ``` 179 | 180 | ### `hideNavigationBar()`: (Android) 181 | Hide Navigation Bar 182 | 183 | ```javascript 184 | import { hideNavigationBar } from 'react-native-navigation-bar-color'; 185 | ... 186 | hide = () => { 187 | hideNavigationBar(); 188 | }; 189 | ``` 190 | 191 | ### `showNavigationBar()`: (Android) 192 | Show Navigation Bar 193 | 194 | ```javascript 195 | import { showNavigationBar } from 'react-native-navigation-bar-color'; 196 | ... 197 | show = () => { 198 | showNavigationBar(); 199 | }; 200 | ``` 201 | 202 | ## License 203 | 204 | MIT 205 | 206 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fthebylito%2Freact-native-navigation-bar-color.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fthebylito%2Freact-native-navigation-bar-color?ref=badge_large) 207 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | jcenter() 4 | } 5 | 6 | dependencies { 7 | classpath 'com.android.tools.build:gradle:1.3.1' 8 | } 9 | } 10 | 11 | apply plugin: 'com.android.library' 12 | 13 | def DEFAULT_COMPILE_SDK_VERSION = 28 14 | def DEFAULT_BUILD_TOOLS_VERSION = "28.0.3" 15 | def DEFAULT_MIN_SDK_VERSION = 16 16 | def DEFAULT_TARGET_SDK_VERSION = 26 17 | 18 | android { 19 | compileSdkVersion rootProject.ext.has('compileSdkVersion') ? rootProject.ext.compileSdkVersion : DEFAULT_COMPILE_SDK_VERSION 20 | buildToolsVersion rootProject.ext.has('buildToolsVersion') ? rootProject.ext.buildToolsVersion : DEFAULT_BUILD_TOOLS_VERSION 21 | 22 | defaultConfig { 23 | minSdkVersion rootProject.ext.has('minSdkVersion') ? rootProject.ext.minSdkVersion : DEFAULT_MIN_SDK_VERSION 24 | targetSdkVersion rootProject.ext.has('targetSdkVersion') ? rootProject.ext.targetSdkVersion : DEFAULT_TARGET_SDK_VERSION 25 | versionCode 1 26 | versionName "1.0" 27 | } 28 | lintOptions { 29 | abortOnError false 30 | } 31 | } 32 | 33 | repositories { 34 | mavenCentral() 35 | mavenLocal() 36 | } 37 | 38 | dependencies { 39 | api 'com.facebook.react:react-native:+' 40 | } 41 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | Please set the JAVA_HOME variable in your environment to match the 76 | location of your Java installation." 77 | fi 78 | else 79 | JAVACMD="java" 80 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | 85 | # Increase the maximum file descriptors if we can. 86 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 87 | MAX_FD_LIMIT=`ulimit -H -n` 88 | if [ $? -eq 0 ] ; then 89 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 90 | MAX_FD="$MAX_FD_LIMIT" 91 | fi 92 | ulimit -n $MAX_FD 93 | if [ $? -ne 0 ] ; then 94 | warn "Could not set maximum file descriptor limit: $MAX_FD" 95 | fi 96 | else 97 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 98 | fi 99 | fi 100 | 101 | # For Darwin, add options to specify how the application appears in the dock 102 | if $darwin; then 103 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 104 | fi 105 | 106 | # For Cygwin, switch paths to Windows format before running java 107 | if $cygwin ; then 108 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 109 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 110 | JAVACMD=`cygpath --unix "$JAVACMD"` 111 | 112 | # We build the pattern for arguments to be converted via cygpath 113 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 114 | SEP="" 115 | for dir in $ROOTDIRSRAW ; do 116 | ROOTDIRS="$ROOTDIRS$SEP$dir" 117 | SEP="|" 118 | done 119 | OURCYGPATTERN="(^($ROOTDIRS))" 120 | # Add a user-defined pattern to the cygpath arguments 121 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 122 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 123 | fi 124 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 125 | i=0 126 | for arg in "$@" ; do 127 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 128 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 129 | 130 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 131 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 132 | else 133 | eval `echo args$i`="\"$arg\"" 134 | fi 135 | i=$((i+1)) 136 | done 137 | case $i in 138 | (0) set -- ;; 139 | (1) set -- "$args0" ;; 140 | (2) set -- "$args0" "$args1" ;; 141 | (3) set -- "$args0" "$args1" "$args2" ;; 142 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 143 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 144 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 145 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 146 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 147 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 148 | esac 149 | fi 150 | 151 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 152 | function splitJvmOpts() { 153 | JVM_OPTS=("$@") 154 | } 155 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 156 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 157 | 158 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorModule.java: -------------------------------------------------------------------------------- 1 | // Created by react-native-create-bridge 2 | 3 | package com.thebylito.navigationbarcolor; 4 | 5 | import android.animation.ArgbEvaluator; 6 | import android.animation.ValueAnimator; 7 | import android.annotation.TargetApi; 8 | import android.graphics.Color; 9 | import android.os.Build; 10 | import android.app.Activity; 11 | import android.view.View; 12 | import android.view.Window; 13 | import android.view.WindowManager; 14 | import androidx.annotation.UiThread; 15 | import com.facebook.react.bridge.Arguments; 16 | import com.facebook.react.bridge.Promise; 17 | import com.facebook.react.bridge.ReactApplicationContext; 18 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 19 | import com.facebook.react.bridge.ReactMethod; 20 | import com.facebook.react.bridge.UiThreadUtil; 21 | import com.facebook.react.bridge.WritableMap; 22 | import java.util.HashMap; 23 | import java.util.Map; 24 | import com.facebook.react.uimanager.IllegalViewOperationException; 25 | import static com.facebook.react.bridge.UiThreadUtil.runOnUiThread; 26 | 27 | public class NavigationBarColorModule extends ReactContextBaseJavaModule { 28 | public static final String REACT_CLASS = "NavigationBarColor"; 29 | private static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY"; 30 | private static final String ERROR_NO_ACTIVITY_MESSAGE = "Tried to change the navigation bar while not attached to an Activity"; 31 | private static final String ERROR_API_LEVEL = "API_LEVEl"; 32 | private static final String ERROR_API_LEVEL_MESSAGE = "Only Android Oreo and above is supported"; 33 | private static ReactApplicationContext reactContext = null; 34 | private static final int UI_FLAG_HIDE_NAV_BAR = View.SYSTEM_UI_FLAG_LAYOUT_STABLE 35 | | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 36 | | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar 37 | | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY; 38 | 39 | public NavigationBarColorModule(ReactApplicationContext context) { 40 | // Pass in the context to the constructor and save it so you can emit events 41 | // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module 42 | super(context); 43 | reactContext = context; 44 | } 45 | 46 | public void setNavigationBarTheme(Activity activity, Boolean light) { 47 | if (activity != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { 48 | Window window = activity.getWindow(); 49 | int flags = window.getDecorView().getSystemUiVisibility(); 50 | if (light) { 51 | flags |= View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; 52 | } else { 53 | flags &= ~View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR; 54 | } 55 | window.getDecorView().setSystemUiVisibility(flags); 56 | } 57 | } 58 | 59 | 60 | @Override 61 | public String getName() { 62 | // Tell React the name of the module 63 | // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module 64 | return REACT_CLASS; 65 | } 66 | 67 | @Override 68 | public Map getConstants() { 69 | // Export any constants to be used in your native module 70 | // https://facebook.github.io/react-native/docs/native-modules-android.html#the-toast-module 71 | final Map constants = new HashMap<>(); 72 | constants.put("EXAMPLE_CONSTANT", "example"); 73 | 74 | return constants; 75 | } 76 | 77 | @ReactMethod 78 | public void changeNavigationBarColor(final String color, final Boolean light, final Boolean animated, final Promise promise) { 79 | final WritableMap map = Arguments.createMap(); 80 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 81 | if (getCurrentActivity() != null) { 82 | try { 83 | final Window window = getCurrentActivity().getWindow(); 84 | runOnUiThread(new Runnable() { 85 | @Override 86 | public void run() { 87 | if (color.equals("transparent") || color.equals("translucent")) { 88 | window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); 89 | window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 90 | if (color.equals("transparent")) { 91 | window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); 92 | } else { 93 | window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 94 | } 95 | setNavigationBarTheme(getCurrentActivity(), light); 96 | map.putBoolean("success", true); 97 | promise.resolve(map); 98 | return; 99 | } else { 100 | window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS); 101 | window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 102 | } 103 | if (animated) { 104 | Integer colorFrom = window.getNavigationBarColor(); 105 | Integer colorTo = Color.parseColor(String.valueOf(color)); 106 | //window.setNavigationBarColor(colorTo); 107 | ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo); 108 | colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 109 | @Override 110 | public void onAnimationUpdate(ValueAnimator animator) { 111 | window.setNavigationBarColor((Integer) animator.getAnimatedValue()); 112 | } 113 | }); 114 | colorAnimation.start(); 115 | } else { 116 | window.setNavigationBarColor(Color.parseColor(String.valueOf(color))); 117 | } 118 | setNavigationBarTheme(getCurrentActivity(), light); 119 | WritableMap map = Arguments.createMap(); 120 | map.putBoolean("success", true); 121 | promise.resolve(map); 122 | } 123 | }); 124 | } catch (IllegalViewOperationException e) { 125 | map.putBoolean("success", false); 126 | promise.reject("error", e); 127 | } 128 | 129 | } else { 130 | promise.reject(ERROR_NO_ACTIVITY, new Throwable(ERROR_NO_ACTIVITY_MESSAGE)); 131 | 132 | } 133 | } else { 134 | promise.reject(ERROR_API_LEVEL, new Throwable(ERROR_API_LEVEL_MESSAGE)); 135 | } 136 | } 137 | 138 | @ReactMethod 139 | public void hideNavigationBar(Promise promise) { 140 | try { 141 | runOnUiThread(new Runnable() { 142 | @Override 143 | public void run() { 144 | if (getCurrentActivity() != null) { 145 | View decorView = getCurrentActivity().getWindow().getDecorView(); 146 | decorView.setSystemUiVisibility(UI_FLAG_HIDE_NAV_BAR); 147 | } 148 | } 149 | }); 150 | } catch (IllegalViewOperationException e) { 151 | WritableMap map = Arguments.createMap(); 152 | map.putBoolean("success", false); 153 | promise.reject("error", e); 154 | } 155 | } 156 | 157 | @ReactMethod 158 | public void showNavigationBar(Promise promise) { 159 | try { 160 | runOnUiThread(new Runnable() { 161 | @Override 162 | public void run() { 163 | if (getCurrentActivity() != null) { 164 | View decorView = getCurrentActivity().getWindow().getDecorView(); 165 | int uiOptions = View.SYSTEM_UI_FLAG_VISIBLE; 166 | decorView.setSystemUiVisibility(uiOptions); 167 | } 168 | } 169 | }); 170 | } catch (IllegalViewOperationException e) { 171 | WritableMap map = Arguments.createMap(); 172 | map.putBoolean("success", false); 173 | promise.reject("error", e); 174 | } 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /android/src/main/java/com/thebylito/navigationbarcolor/NavigationBarColorPackage.java: -------------------------------------------------------------------------------- 1 | // Created by react-native-create-bridge 2 | 3 | package com.thebylito.navigationbarcolor; 4 | 5 | import com.facebook.react.ReactPackage; 6 | import com.facebook.react.bridge.JavaScriptModule; 7 | import com.facebook.react.bridge.NativeModule; 8 | import com.facebook.react.bridge.ReactApplicationContext; 9 | import com.facebook.react.uimanager.ViewManager; 10 | 11 | import java.util.Arrays; 12 | import java.util.Collections; 13 | import java.util.List; 14 | 15 | public class NavigationBarColorPackage implements ReactPackage { 16 | @Override 17 | public List createNativeModules(ReactApplicationContext reactContext) { 18 | // Register your native module 19 | // https://facebook.github.io/react-native/docs/native-modules-android.html#register-the-module 20 | return Arrays.asList( 21 | new NavigationBarColorModule(reactContext) 22 | ); 23 | } 24 | 25 | 26 | public List createViewManagers(ReactApplicationContext reactContext) { 27 | return Collections.emptyList(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "react-native-navigation-bar-color" { 2 | function changeNavigationBarColor(color: string, light?: boolean, animated?: boolean): void; 3 | function hideNavigationBar(): boolean; 4 | function showNavigationBar(): boolean; 5 | 6 | export default changeNavigationBarColor; 7 | export { hideNavigationBar, showNavigationBar }; 8 | } 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { 2 | changeNavigationBarColor, 3 | hideNavigationBar, 4 | showNavigationBar, 5 | } from './src'; 6 | 7 | export default changeNavigationBarColor; 8 | export {hideNavigationBar, showNavigationBar}; 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-navigation-bar-color", 3 | "version": "2.0.2", 4 | "description": "React Native component to change bottom bar/navigation bar color on Android", 5 | "main": "index.js", 6 | "keywords": [ 7 | "react-native", 8 | "react-native-component", 9 | "react-component", 10 | "react", 11 | "native", 12 | "navigation-bar", 13 | "navigation-bar-color", 14 | "navigation-theme", 15 | "bottom-bar", 16 | "bottom-bar-color" 17 | ], 18 | "repository": "https://github.com/thebylito/react-native-navigation-bar-color.git", 19 | "author": "Welington da Silva - (https://github.com/thebylito)", 20 | "license": "MIT", 21 | "scripts": { 22 | "test": "echo \"Error: no test specified\" && exit 1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /screenshots/screenShot1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thebylito/react-native-navigation-bar-color/4cc27b88ff43cf6bbcf7f9af7cf97df264e8bf9d/screenshots/screenShot1.jpg -------------------------------------------------------------------------------- /screenshots/screenShot2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thebylito/react-native-navigation-bar-color/4cc27b88ff43cf6bbcf7f9af7cf97df264e8bf9d/screenshots/screenShot2.jpg -------------------------------------------------------------------------------- /screenshots/screenShot3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thebylito/react-native-navigation-bar-color/4cc27b88ff43cf6bbcf7f9af7cf97df264e8bf9d/screenshots/screenShot3.jpg -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {NativeModules, Platform} from 'react-native'; 2 | 3 | const {NavigationBarColor} = NativeModules; 4 | 5 | const changeNavigationBarColor = ( 6 | color = String, 7 | light = false, 8 | animated = true, 9 | ) => { 10 | if (Platform.OS === 'android') { 11 | const LightNav = light ? true : false; 12 | NavigationBarColor.changeNavigationBarColor(color, LightNav, animated); 13 | } 14 | }; 15 | const hideNavigationBar = () => { 16 | if (Platform.OS === 'android') { 17 | return NavigationBarColor.hideNavigationBar(); 18 | } else { 19 | return false; 20 | } 21 | }; 22 | const showNavigationBar = () => { 23 | if (Platform.OS === 'android') { 24 | NavigationBarColor.showNavigationBar(); 25 | } else { 26 | return false; 27 | } 28 | }; 29 | 30 | export {changeNavigationBarColor, hideNavigationBar, showNavigationBar}; 31 | --------------------------------------------------------------------------------