react-native-immersive

Add Toggle for Android Immersive FullScreen Layout

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-immersive
13132.0.05 years ago8 years agoMinified + gzip package size for react-native-immersive in KB

Popular Searches

Readme

react-native-immersive
!i:npml:npm !i:npm-dml:npm - Unified Compile Version - Packages missing from JCenter Add Toggle for Android Immersive FullScreen Layout Note:
  • v2.0.0 and above will build with gradle@>=3
  • v1.0.0 and above should be used with react-native@>=0.47
  • v0.0.5 should be used with react-native@<=0.46

Installation Process

Download from npm: npm i react-native-immersive Run react-native link to automatically link the library.

manual link process

Edit android/settings.gradle: ```diff
  • include ':react-native-immersive'
  • project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../nodemodules/react-native-immersive/android')
``` Edit android/app/build.gradle: (for versions before v2.0.0, use compile instead of implementation for gradle@<=2) ```diff dependencies { implementation fileTree(dir: "libs", include: ".jar") implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" implementation "com.facebook.react:react-native:+" // From nodemodules
  • implementation project(':react-native-immersive')
} ``` Edit android/app/src/main/java/.../MainApplication.java: ```diff
  • import com.rnimmersive.RNImmersivePackage;
... @Override protected List getPackages() { 
return Arrays.<ReactPackage>asList(
new MainReactPackage()
  • , new RNImmersivePackage()
);
} ```

Basic Usage

```js import { Immersive } from 'react-native-immersive' // methods (Android only, will throw Error on iOS in DEV mode) Immersive.on() Immersive.setImmersive(true) Immersive.off() Immersive.setImmersive(false) ```

Restore Immersive State

The Immersive State do not last forever (SYSTEMUIFLAGIMMERSIVESTICKY is not sticky enough). The Immersive State will get reset when:
  • coming back to active AppState
  • after Keyboard opening
  • after Alert opening
  • after Modal opening
To restore the Immersive State, add an additional listener. ```js // listener for Immersive State recover const restoreImmersive = () => { DEV && console.warn('Immersive State Changed!') Immersive.on() } Immersive.addImmersiveListener(restoreImmersive) Immersive.removeImmersiveListener(restoreImmersive) ``` The Native Module itself will cover some basic Immersive State change (but not something like Modal + Alert). To get all Immersive State change, edit android/app/src/main/java/.../MainActivity.java: ```diff
  • import com.rnimmersive.RNImmersiveModule;
... public class MainActivity extends ReactActivity { ...
  • @Override
  • public void onWindowFocusChanged(boolean hasFocus) {
  • super.onWindowFocusChanged(hasFocus);
  • if (hasFocus && RNImmersiveModule.getInstance() != null) {
  • RNImmersiveModule.getInstance().emitImmersiveStateChangeEvent();
  • }
  • }
} ```

Sample Component

Change the code of index.js for testing: example/index.sample.js

Common Problem

Unified Compile Version

solution from SudoPlz react-native-keychain#68l:issue68
When compile ReactNative android, different package may set different compileSdkVersion and buildToolsVersion. To force all the submodules to use the specified compileSdkVersion and buildToolsVersion, add the following code to android/build.gradle: ``` subprojects { 
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion 27
buildToolsVersion "27.0.3"
}
}
}
} ```

Packages missing from JCenter

solution from kerwin1 react-native-vector-icons#605l:issue605
Around 2018/12/10, JCenter received a request from Google, to remove several binaries from their repository. But some repos were removed by mistake, causing error like: Could not resolve com.android.tools.build:gradle:2.3.+.. As google removed gradle v2.2.* from JCenter, so many plugins not work. To patch repositories for specific submodules, add the following code to android/build.gradle: ``` buildscript { ... } allprojects { ... } subprojects { 
if (project.name.contains('react-native-immersive')) {
buildscript {
repositories {
jcenter()
maven { url "https://dl.bintray.com/android/android-tools/"  }
}
}
}
} ```