Status bar for React Native Android

A react native android module to control the android statusbar.

Setup

There are five steps in the setup process

1. install module
2. update android/settings.gradle
3. update android/app/build.gradle
4. Register module in MainActivity.java or MainApplication.java (depending on your RN version)
5. Rebuild and restart package manager

• install module

 npm i --save react-native-android-statusbar

• android/settings.gradle

...
include ':react-native-android-statusbar'
project(':react-native-android-statusbar').projectDir =newFile(settingsDir, '../node_modules/react-native-android-statusbar')

• android/app/build.gradle

...
dependencies {
...
compile project(':react-native-android-statusbar')
}

• register module on React Native >= 0.30 (in MainApplication.java)

importcom.facebook.react.ReactActivity;
importcom.facebook.react.ReactPackage;
importcom.facebook.react.shell.MainReactPackage;
importjava.util.Arrays;
importjava.util.List;
importme.neo.react.StatusBarPackage; // <--- importpublicclassMainApplicationextendsApplicationimplementsReactApplication {
[...]
privatefinalReactNativeHostmReactNativeHost = newReactNativeHost(this) {
@OverrideprotectedbooleangetUseDeveloperSupport() {
returnBuildConfig.DEBUG;
}
@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newMainReactPackage(),
newStatusBarPackage() // <------- add package
);
}
}
}

• register module on React Native >= 0.19 and RN < 0.30 (in MainActivity.java)

importcom.facebook.react.ReactActivity;
importcom.facebook.react.ReactPackage;
importcom.facebook.react.shell.MainReactPackage;
importjava.util.Arrays;
importjava.util.List;
importme.neo.react.StatusBarPackage; // <--- importpublicclassMainActivityextendsReactActivity {
/** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */@OverrideprotectedStringgetMainComponentName() {
return"TonyAppReact";
}
/** * Returns whether dev mode should be enabled. * This enables e.g. the dev menu. */@OverrideprotectedbooleangetUseDeveloperSupport() {
returnBuildConfig.DEBUG;
}
/** * A list of packages used by the app. If the app uses additional views * or modules besides the default ones, add more packages here. */@OverrideprotectedList<ReactPackage> getPackages() {
returnArrays.<ReactPackage>asList(
newMainReactPackage(),
newStatusBarPackage(this) // <------- add package, the 'this' is super important
);
}
}

• register module on React Native < 0.19 (in MainActivity.java)

importme.neo.react.StatusBarPackage; // <--- importpublicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
......
privatestaticActivitymActivity = null;
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = newReactRootView(this);
mActivity = this;
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
.addPackage(newStatusBarPackage(this)) // <------- add package, the 'this' is super important
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
setContentView(mReactRootView);
}
......
}

• Run react-native run-android from your project root directory

Usage

varStatusBarAndroid=require('react-native-android-statusbar');/* The following functions do not reflect on versions before 16 */StatusBarAndroid.hideStatusBar()StatusBarAndroid.showStatusBar()/* The following functions do not reflect on versions before 21 */StatusBarAndroid.setRGB(intred,intgreen,intblue);StatusBarAndroid.setARGB(intalpha,intred,intgreen,intblue);StatusBarAndroid.setHexColor('#AB1223');/*Supported formats are: #RRGGBB #AARRGGBB or :'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta', 'yellow','lightgray', 'darkgray', 'grey', 'lightgrey', 'darkgrey', 'aqua','fuchsia', 'lime', 'maroon', 'navy', 'olive', 'purple', 'silver', 'teal'.*/