react-native-immersive

WebJar for react-native-immersive

License

License

MIT
Categories

Categories

React User Interface Web Frameworks Native Development Tools
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-native-immersive
Last Version

Last Version

2.0.0
Release Date

Release Date

Type

Type

jar
Description

Description

react-native-immersive
WebJar for react-native-immersive
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/mockingbot/react-native-immersive

Download react-native-immersive

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-native-immersive/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-native-immersive</artifactId>
    <version>2.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-native-immersive/
implementation 'org.webjars.npm:react-native-immersive:2.0.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-native-immersive/
implementation ("org.webjars.npm:react-native-immersive:2.0.0")
'org.webjars.npm:react-native-immersive:jar:2.0.0'
<dependency org="org.webjars.npm" name="react-native-immersive" rev="2.0.0">
  <artifact name="react-native-immersive" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-native-immersive', version='2.0.0')
)
libraryDependencies += "org.webjars.npm" % "react-native-immersive" % "2.0.0"
[org.webjars.npm/react-native-immersive "2.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

react-native-immersive

i:npm i:npm-dm

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/"  }
            }
        }
    }
}
org.webjars.npm

MockingBot

Versions

Version
2.0.0