├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── android ├── build.gradle └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── rnimmersive │ ├── RNImmersiveModule.java │ └── RNImmersivePackage.java ├── example └── index.sample.js ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # node.js 6 | # 7 | node_modules/ 8 | 9 | # WebStorm 10 | .idea 11 | 12 | /*.tgz 13 | *.log 14 | *.tgz 15 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # node.js 6 | # 7 | node_modules/ 8 | 9 | /example 10 | /.* 11 | *.log 12 | *.tgz 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 MockingBot 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-immersive 2 | 3 | [![i:npm]][l:npm] 4 | [![i:npm-dm]][l:npm] 5 | 6 | * [Installation Process](#installation-process) 7 | * [Basic Usage](#basic-usage) 8 | * [Restore Immersive State](#restore-immersive-state) 9 | * [Sample Component](#sample-component) 10 | * [Common Problem](#common-problem) 11 | - [Unified Compile Version](#unified-compile-version) 12 | - [Packages missing from JCenter](#packages-missing-from-jcenter) 13 | 14 | Add Toggle for Android Immersive FullScreen Layout 15 | 16 | 17 | Note: 18 | - this package is Android only, and Immersive Full-Screen Mode is first introduced since [Android 4.4 (API Level 19)][l:immersive] 19 | - check [release][l:release] for ChangeLog 20 | - `v2.0.0` and above will build with `gradle@>=3` 21 | - `v1.0.0` and above should be used with `react-native@>=0.47` 22 | - `v0.0.5` should be used with `react-native@<=0.46` 23 | 24 | 25 | ## Installation Process 26 | 27 | Download from npm: `npm i react-native-immersive` 28 | 29 | Run `react-native link` to automatically link the library. 30 | 31 | #### manual link process 32 | 33 | Edit `android/settings.gradle`: 34 | 35 | ```diff 36 | + include ':react-native-immersive' 37 | + project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android') 38 | ``` 39 | 40 | Edit `android/app/build.gradle`: (for versions before `v2.0.0`, use `compile` instead of `implementation` for `gradle@<=2`) 41 | 42 | ```diff 43 | dependencies { 44 | implementation fileTree(dir: "libs", include: ["*.jar"]) 45 | implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" 46 | implementation "com.facebook.react:react-native:+" // From node_modules 47 | + implementation project(':react-native-immersive') 48 | } 49 | ``` 50 | 51 | Edit `android/app/src/main/java/.../MainApplication.java`: 52 | 53 | ```diff 54 | + import com.rnimmersive.RNImmersivePackage; 55 | 56 | ... 57 | 58 | @Override 59 | protected List getPackages() { 60 | return Arrays.asList( 61 | new MainReactPackage() 62 | + , new RNImmersivePackage() 63 | ); 64 | } 65 | ``` 66 | 67 | 68 | ## Basic Usage 69 | 70 | ```js 71 | import { Immersive } from 'react-native-immersive' 72 | 73 | // methods (Android only, will throw Error on iOS in __DEV__ mode) 74 | Immersive.on() 75 | Immersive.setImmersive(true) 76 | 77 | Immersive.off() 78 | Immersive.setImmersive(false) 79 | ``` 80 | 81 | 82 | ## Restore Immersive State 83 | 84 | The Immersive State do not last forever (SYSTEM_UI_FLAG_IMMERSIVE_STICKY is not sticky enough). 85 | The Immersive State will get reset when: 86 | 87 | - coming back to active AppState 88 | - after Keyboard opening 89 | - after Alert opening 90 | - after Modal opening 91 | 92 | To restore the Immersive State, add an additional listener. 93 | 94 | ```js 95 | // listener for Immersive State recover 96 | const restoreImmersive = () => { 97 | __DEV__ && console.warn('Immersive State Changed!') 98 | Immersive.on() 99 | } 100 | Immersive.addImmersiveListener(restoreImmersive) 101 | Immersive.removeImmersiveListener(restoreImmersive) 102 | ``` 103 | 104 | The Native Module itself will cover some basic Immersive State change (but not something like Modal + Alert). 105 | To get all Immersive State change, edit `android/app/src/main/java/.../MainActivity.java`: 106 | 107 | ```diff 108 | + import com.rnimmersive.RNImmersiveModule; 109 | ... 110 | 111 | public class MainActivity extends ReactActivity { 112 | ... 113 | + @Override 114 | + public void onWindowFocusChanged(boolean hasFocus) { 115 | + super.onWindowFocusChanged(hasFocus); 116 | + 117 | + if (hasFocus && RNImmersiveModule.getInstance() != null) { 118 | + RNImmersiveModule.getInstance().emitImmersiveStateChangeEvent(); 119 | + } 120 | + } 121 | } 122 | ``` 123 | 124 | 125 | ## Sample Component 126 | 127 | Change the code of `index.js` for testing: 128 | [example/index.sample.js](example/index.sample.js) 129 | 130 | 131 | ## Common Problem 132 | 133 | #### Unified Compile Version 134 | ###### solution from SudoPlz [react-native-keychain#68][l:issue68] 135 | 136 | When compile ReactNative android, 137 | different package may set different compileSdkVersion and buildToolsVersion. 138 | 139 | To force all the submodules to use the specified compileSdkVersion and buildToolsVersion, 140 | add the following code to `android/build.gradle`: 141 | 142 | ``` 143 | subprojects { 144 | afterEvaluate {project -> 145 | if (project.hasProperty("android")) { 146 | android { 147 | compileSdkVersion 27 148 | buildToolsVersion "27.0.3" 149 | } 150 | } 151 | } 152 | } 153 | ``` 154 | 155 | #### Packages missing from JCenter 156 | ###### solution from kerwin1 [react-native-vector-icons#605][l:issue605] 157 | 158 | Around 2018/12/10, 159 | JCenter received a request from Google, to remove several binaries from their repository. 160 | But some repos were removed by mistake, 161 | causing error like: `Could not resolve com.android.tools.build:gradle:2.3.+.`. 162 | 163 | As google removed `gradle v2.2.*` from `JCenter`, so many plugins not work. 164 | To patch repositories for specific submodules, 165 | add the following code to `android/build.gradle`: 166 | 167 | ``` 168 | buildscript { ... } 169 | allprojects { ... } 170 | subprojects { 171 | if (project.name.contains('react-native-immersive')) { 172 | buildscript { 173 | repositories { 174 | jcenter() 175 | maven { url "https://dl.bintray.com/android/android-tools/" } 176 | } 177 | } 178 | } 179 | } 180 | ``` 181 | 182 | 183 | [i:npm]: https://img.shields.io/npm/v/react-native-immersive.svg 184 | [i:npm-dm]: https://img.shields.io/npm/dm/react-native-immersive.svg 185 | [l:npm]: https://npm.im/react-native-immersive 186 | [l:immersive]: https://developer.android.com/training/system-ui/immersive.html 187 | [l:release]: https://github.com/mockingbot/react-native-immersive/releases 188 | [l:issue68]: https://github.com/oblador/react-native-keychain/issues/68#issuecomment-304836725 189 | [l:issue605]: https://github.com/oblador/react-native-vector-icons/issues/605#issuecomment-446195008 190 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | jcenter() 4 | google() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:3.1.4' 9 | } 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | // code borrowed from: https://github.com/oblador/react-native-vector-icons/pull/792 15 | 16 | def safeExtGet(prop, fallback) { 17 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 18 | } 19 | 20 | android { 21 | compileSdkVersion safeExtGet('compileSdkVersion', 27) 22 | buildToolsVersion safeExtGet('buildToolsVersion', '27.0.3') 23 | 24 | defaultConfig { 25 | minSdkVersion safeExtGet('minSdkVersion', 16) 26 | targetSdkVersion safeExtGet('targetSdkVersion', 27) 27 | versionCode 1 28 | versionName "1.0" 29 | } 30 | lintOptions { 31 | abortOnError false 32 | } 33 | } 34 | 35 | repositories { 36 | mavenCentral() 37 | } 38 | 39 | dependencies { 40 | implementation "com.facebook.react:react-native:${safeExtGet('reactNativeVersion', '+')}" 41 | } 42 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /android/src/main/java/com/rnimmersive/RNImmersiveModule.java: -------------------------------------------------------------------------------- 1 | package com.rnimmersive; 2 | 3 | import android.annotation.TargetApi; 4 | import android.app.Activity; 5 | import android.os.Build; 6 | import android.view.View; 7 | 8 | import com.facebook.react.bridge.Arguments; 9 | import com.facebook.react.bridge.Promise; 10 | import com.facebook.react.bridge.ReactApplicationContext; 11 | import com.facebook.react.bridge.ReactContext; 12 | import com.facebook.react.bridge.ReactContextBaseJavaModule; 13 | import com.facebook.react.bridge.ReactMethod; 14 | import com.facebook.react.bridge.UiThreadUtil; 15 | import com.facebook.react.bridge.WritableMap; 16 | 17 | import com.facebook.react.modules.core.DeviceEventManagerModule; 18 | 19 | /** 20 | * {@link NativeModule} that allows changing the appearance of the menu bar. 21 | */ 22 | public class RNImmersiveModule extends ReactContextBaseJavaModule { 23 | private static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY"; 24 | private static final String ERROR_NO_ACTIVITY_MESSAGE = "Tried to set immersive while not attached to an Activity"; 25 | private static final int UI_FLAG_IMMERSIVE = View.SYSTEM_UI_FLAG_LAYOUT_STABLE 26 | | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 27 | | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN 28 | | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar 29 | | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar 30 | | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY; 31 | 32 | private static RNImmersiveModule SINGLETON = null; 33 | 34 | private ReactContext _reactContext = null; 35 | private boolean _isImmersiveOn = false; 36 | 37 | public static RNImmersiveModule getInstance () { 38 | return SINGLETON; 39 | } 40 | 41 | public RNImmersiveModule(ReactApplicationContext reactContext) { 42 | super(reactContext); 43 | 44 | _reactContext = reactContext; 45 | SINGLETON = this; 46 | } 47 | 48 | @Override 49 | public void onCatalystInstanceDestroy() { 50 | _reactContext = null; 51 | SINGLETON = null; 52 | } 53 | 54 | @Override 55 | public String getName() { 56 | return "RNImmersive"; 57 | } 58 | 59 | @ReactMethod 60 | public void setImmersive(final boolean isOn, final Promise res) { 61 | _setImmersive(isOn, res); 62 | } 63 | @ReactMethod 64 | public void getImmersive(final Promise res) { 65 | _getImmersive(res); 66 | } 67 | @ReactMethod 68 | public void addImmersiveListener() { 69 | _addImmersiveListener(); 70 | } 71 | 72 | public void emitImmersiveStateChangeEvent() { 73 | if (_reactContext != null && _reactContext.hasActiveCatalystInstance()) { 74 | _reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("@@IMMERSIVE_STATE_CHANGED", null); 75 | } 76 | } 77 | 78 | private void _setImmersive(final boolean isOn, final Promise res) { 79 | final Activity activity = getCurrentActivity(); 80 | if (activity == null) { 81 | res.reject(ERROR_NO_ACTIVITY, ERROR_NO_ACTIVITY_MESSAGE); 82 | return; 83 | } 84 | 85 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 86 | UiThreadUtil.runOnUiThread(new Runnable() { 87 | @TargetApi(Build.VERSION_CODES.KITKAT) 88 | @Override 89 | public void run() { 90 | _isImmersiveOn = isOn; 91 | activity.getWindow().getDecorView().setSystemUiVisibility(isOn ? UI_FLAG_IMMERSIVE : View.SYSTEM_UI_FLAG_VISIBLE); 92 | res.resolve(null); 93 | } 94 | }); 95 | } 96 | } 97 | 98 | private void _getImmersive(final Promise res) { 99 | final Activity activity = getCurrentActivity(); 100 | if (activity == null) { 101 | res.reject(ERROR_NO_ACTIVITY, ERROR_NO_ACTIVITY_MESSAGE); 102 | return; 103 | } 104 | 105 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 106 | UiThreadUtil.runOnUiThread(new Runnable() { 107 | @TargetApi(Build.VERSION_CODES.KITKAT) 108 | @Override 109 | public void run() { 110 | int visibility = activity.getWindow().getDecorView().getSystemUiVisibility(); 111 | boolean isImmersiveOn = 0 != (visibility & UI_FLAG_IMMERSIVE); 112 | 113 | WritableMap map = Arguments.createMap(); 114 | map.putBoolean("isImmersiveOn", isImmersiveOn); 115 | 116 | res.resolve(map); 117 | } 118 | }); 119 | } 120 | } 121 | 122 | private void _addImmersiveListener() { 123 | final Activity activity = getCurrentActivity(); 124 | if (activity == null) return; 125 | 126 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { 127 | UiThreadUtil.runOnUiThread(new Runnable() { 128 | @TargetApi(Build.VERSION_CODES.KITKAT) 129 | @Override 130 | public void run() { 131 | activity.getWindow().getDecorView().setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() { 132 | @Override 133 | public void onSystemUiVisibilityChange(int visibility) { 134 | boolean isImmersiveOn = 0 != (visibility & UI_FLAG_IMMERSIVE); 135 | 136 | if (isImmersiveOn != _isImmersiveOn) { 137 | emitImmersiveStateChangeEvent(); 138 | } 139 | } 140 | }); 141 | } 142 | }); 143 | } 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /android/src/main/java/com/rnimmersive/RNImmersivePackage.java: -------------------------------------------------------------------------------- 1 | package com.rnimmersive; 2 | 3 | import java.util.*; 4 | 5 | import com.facebook.react.ReactPackage; 6 | import com.facebook.react.bridge.NativeModule; 7 | import com.facebook.react.bridge.JavaScriptModule; 8 | import com.facebook.react.bridge.ReactApplicationContext; 9 | import com.facebook.react.uimanager.ViewManager; 10 | 11 | public class RNImmersivePackage implements ReactPackage { 12 | 13 | @Override 14 | public List createNativeModules(ReactApplicationContext reactContext) { 15 | List modules = new ArrayList<>(); 16 | modules.add(new RNImmersiveModule(reactContext)); 17 | return modules; 18 | } 19 | 20 | public List> createJSModules() { 21 | return Collections.emptyList(); 22 | } 23 | 24 | @Override 25 | public List createViewManagers(ReactApplicationContext reactContext) { 26 | return Arrays.asList(); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /example/index.sample.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { AppRegistry, StyleSheet, Text, View, Button, TextInput, Alert, Modal } from 'react-native' 3 | import { Immersive } from 'react-native-immersive' 4 | 5 | class testReactNative extends Component { 6 | constructor (props) { 7 | super(props) 8 | 9 | this.setImmersiveOn = () => { 10 | Immersive.on() 11 | this.setState({ isImmersive: true }) 12 | } 13 | this.setImmersiveOff = () => { 14 | Immersive.off() 15 | this.setState({ isImmersive: false }) 16 | } 17 | 18 | this.getImmersiveState = () => Immersive.getImmersive().then((immersiveState) => { 19 | __DEV__ && console.warn('[getImmersiveState]', immersiveState) 20 | this.setState({ immersiveState }) 21 | }) 22 | 23 | this.setRestoreImmersiveOn = () => this.setState({ isRestoreImmersive: true }) 24 | this.setRestoreImmersiveOff = () => this.setState({ isRestoreImmersive: false }) 25 | 26 | this.restoreImmersive = () => { 27 | __DEV__ && console.warn('[restoreImmersive]', this.state.isRestoreImmersive) 28 | this.state.isRestoreImmersive && Immersive.setImmersive(this.state.isImmersive) 29 | } 30 | 31 | this.showModal = () => this.setState({ isModal: true }) 32 | this.hideModal = () => this.setState({ isModal: false }) 33 | 34 | this.onTextChange = (text) => this.setState({ text }) 35 | 36 | this.showAlert = () => Alert.alert('Alert Title', 'Alert Messsag') 37 | 38 | this.state = { 39 | isImmersive: false, 40 | isRestoreImmersive: true, 41 | immersiveState: null, 42 | isModal: false, 43 | text: 'test' 44 | } 45 | } 46 | 47 | componentDidMount () { Immersive.addImmersiveListener(this.restoreImmersive) } 48 | 49 | componentWillUnmount () { Immersive.removeImmersiveListener(this.restoreImmersive) } 50 | 51 | renderTest () { 52 | const { isImmersive, isRestoreImmersive, isModal, immersiveState, text } = this.state 53 | return 54 |