react-native-immersive

react-native-immersive

• Installation Process
• Basic Usage
• Restore Immersive State
• Sample Component
• Common Problem
  • Unified Compile Version
  • Packages missing from JCenter

Add Toggle for Android Immersive FullScreen Layout

Note:

• this package is Android only, and Immersive Full-Screen Mode is first introduced since Android 4.4 (API Level 19)
• check release for ChangeLog
• 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:

+ include ':react-native-immersive'
+ project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')

Edit android/app/build.gradle: (for versions before v2.0.0, use compile instead of implementation for gradle@<=2)

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
  implementation "com.facebook.react:react-native:+"  // From node_modules
+ implementation project(':react-native-immersive')
}

Edit android/app/src/main/java/.../MainApplication.java:

+ import com.rnimmersive.RNImmersivePackage;

...

  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
      new MainReactPackage()
+     , new RNImmersivePackage()
    );
  }

Basic Usage

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 (SYSTEM_UI_FLAG_IMMERSIVE_STICKY 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.

// 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:

+ 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#68

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#605

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/"  }
            }
        }
    }
}