How to use Immersive.on() ?
andey opened this issue · comments
Hi I can't seem to get Immersive to work. I get an error "undefined is not an object (evaluating 'RNImmersive.setImmersive')
package.json
{
"name": "wyse",
"version": "0.0.2",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "15.4.1",
"react-dom": "15.4.1",
"react-native": "0.42.0",
"react-native-immersive": "0.0.4",
"whatwg-fetch": "^1.0.0"
},
"jest": {
"preset": "jest-react-native"
},
"devDependencies": {
"babel-jest": "16.0.0",
"babel-preset-react-native": "1.9.0",
"jest": "16.0.2",
"jest-react-native": "16.1.0",
"react-test-renderer": "15.3.2"
}
}
settings.gradle
rootProject.name = 'wyse'
include ':app'
include ':react-native-immersive'
project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
build.gradle
apply plugin: "com.android.application"
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation
* entryFile: "index.android.js",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn${productFlavor}${buildType}'
* // 'bundleIn${buildType}'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"]
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
defaultConfig {
applicationId "com.wyse"
minSdkVersion 16
targetSdkVersion 23
versionCode 9
versionName "1.9"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
signingConfigs {
release {
storeFile file("my-release-key.keystore")
storePassword "springbig"
keyAlias "my-key-alias"
keyPassword "springbig"
}
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
signingConfig signingConfigs.release
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-immersive')
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
MainActivity.java
package com.wyse;
import com.facebook.react.ReactActivity;
import com.rnimmersive.RNImmersivePackage;
import java.util.List;
import java.util.Arrays;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.ReactPackage;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "wyse";
}
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(new MainReactPackage(), new RNImmersivePackage());
}
}
index.android.js
import React, {Component} from 'react';
import {AppRegistry, Navigator} from 'react-native';
import Immersive from 'react-native-immersive';
import Apple from './app/Apple';
import LoadingScreen from './app/LoadingScreen'
import LoginScreen from './app/LoginScreen';
import KeypadScreen from './app/KeypadScreen';
import InterestScreen from './app/InterestScreen';
import RewardScreen from './app/RewardScreen';
import RewardRedeemedScreen from './app/RewardRedeemedScreen';
class wyse extends Component {
render() {
Immersive.setImmersive(true);
return (
<Navigator initialRoute={{screen: 'LoadingScreen'}} renderScene={(route, nav) => {
return this.renderScene(route, nav)
}}/>
)
}
renderScene(route, nav) {
switch (route.screen) {
case "Apple":
return <Apple navigator={nav}/>
case "LoadingScreen":
return <LoadingScreen navigator={nav}/>
case "LoginScreen":
return <LoginScreen navigator={nav}/>
case "KeypadScreen":
return <KeypadScreen navigator={nav} tablet={route.tablet}/>
case 'InterestScreen':
return <InterestScreen navigator={nav} tablet={route.tablet} member={route.member}/>
case 'RewardScreen':
return <RewardScreen navigator={nav} tablet={route.tablet} member={route.member}/>
case "RewardRedeemedScreen":
return <RewardRedeemedScreen navigator={nav} tablet={route.tablet} reward={route.reward}/>
}
}
}
AppRegistry.registerComponent('wyse', () => wyse);
undefined is not an object (evaluating 'RNImmersive.setImmersive')
should be a JavaScript error.
You might want to check if there's files in 'node_modules/react-native-immersive' after npm install
And checking the react-native run-android
building output should have logs like:
:react-native-immersive:preBuild UP-TO-DATE
:react-native-immersive:preReleaseBuild UP-TO-DATE
:react-native-immersive:checkReleaseManifest
:react-native-immersive:preDebugAndroidTestBuild UP-TO-DATE
:react-native-immersive:preDebugBuild UP-TO-DATE
:react-native-immersive:preDebugUnitTestBuild UP-TO-DATE
:react-native-immersive:preReleaseUnitTestBuild UP-TO-DATE
:react-native-immersive:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
...
:react-native-immersive:mergeReleaseJniLibFolders UP-TO-DATE
:react-native-immersive:transformNative_libsWithMergeJniLibsForRelease UP-TO-DATE
:react-native-immersive:transformNative_libsWithSyncJniLibsForRelease UP-TO-DATE
:react-native-immersive:bundleRelease UP-TO-DATE
react-native run-android
Scanning 564 folders for symlinks in /home/andey/Dropbox/Projects/wyse/node_modules (11ms)
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Starting a new Gradle Daemon for this build (subsequent builds will be faster).
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:react-native-immersive:compileLint
:react-native-immersive:copyReleaseLint UP-TO-DATE
:react-native-immersive:preBuild UP-TO-DATE
:react-native-immersive:preReleaseBuild UP-TO-DATE
:react-native-immersive:checkReleaseManifest
:react-native-immersive:preDebugAndroidTestBuild UP-TO-DATE
:react-native-immersive:preDebugBuild UP-TO-DATE
:react-native-immersive:preDebugUnitTestBuild UP-TO-DATE
:react-native-immersive:preReleaseUnitTestBuild UP-TO-DATE
:react-native-immersive:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:react-native-immersive:prepareComAndroidSupportRecyclerviewV72340Library UP-TO-DATE
:react-native-immersive:prepareComAndroidSupportSupportV42340Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
:react-native-immersive:prepareComFacebookReactReactNative0420Library UP-TO-DATE
:react-native-immersive:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:react-native-immersive:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:react-native-immersive:prepareReleaseDependencies
:react-native-immersive:compileReleaseAidl UP-TO-DATE
:react-native-immersive:compileReleaseRenderscript UP-TO-DATE
:react-native-immersive:generateReleaseBuildConfig UP-TO-DATE
:react-native-immersive:generateReleaseAssets UP-TO-DATE
:react-native-immersive:mergeReleaseAssets UP-TO-DATE
:react-native-immersive:generateReleaseResValues UP-TO-DATE
:react-native-immersive:generateReleaseResources UP-TO-DATE
:react-native-immersive:mergeReleaseResources UP-TO-DATE
:react-native-immersive:processReleaseManifest UP-TO-DATE
:react-native-immersive:processReleaseResources UP-TO-DATE
:react-native-immersive:generateReleaseSources UP-TO-DATE
:react-native-immersive:processReleaseJavaRes UP-TO-DATE
:react-native-immersive:compileReleaseJavaWithJavac UP-TO-DATE
:react-native-immersive:extractReleaseAnnotations UP-TO-DATE
:react-native-immersive:mergeReleaseProguardFiles UP-TO-DATE
:react-native-immersive:packageReleaseJar UP-TO-DATE
:react-native-immersive:compileReleaseNdk UP-TO-DATE
:react-native-immersive:packageReleaseJniLibs UP-TO-DATE
:react-native-immersive:packageReleaseLocalJar UP-TO-DATE
:react-native-immersive:packageReleaseRenderscript UP-TO-DATE
:react-native-immersive:packageReleaseResources UP-TO-DATE
:react-native-immersive:bundleRelease UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72340Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42340Library UP-TO-DATE
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0420Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareWyseReactNativeImmersiveUnspecifiedLibrary UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on '7_WSVGA_Tablet_API_22(AVD) - 6.0'
Installed on 1 device.
BUILD SUCCESSFUL
Total time: 13.619 secs
looks like its included?
Seems like the Java code is included.
Have you checked your node_modules
for node_modules/react-native-immersive/index.js
, and the import
code?
It should be a JavaScript error.
Looks OK... Can you try this minimal test code?
index.android.js
import { AppRegistry, View, Text } from 'react-native';
import React, {Component} from 'react';
import {Immersive} from 'react-native-immersive'
Immersive.setImmersive(true)
setTimeout(() => Immersive.setImmersive(true), 2000)
setTimeout(() => Immersive.setImmersive(false), 4000)
setTimeout(() => Immersive.setImmersive(true), 6000)
AppRegistry.registerComponent('[[APP-NAME]]', () => () => {
console.warn('Immersive', Immersive)
console.warn('Immersive', Immersive.setImmersive)
return <View><Text>TEST</Text></View>
})
OK, so this is not at JavaScript Error...
This error means the code in node_modules/react-native-immersive/index.js
can not get RNImmersive
from NativeModules
.
import {NativeModules, Platform} from 'react-native';
const {RNImmersive} = NativeModules;
You should check if the linking process is right. (similar Issue)
Or it might be the simulator, you can try if an Android device (4.4+) works.
I upgraded react, react-dom, react-native to the latest, and I'm using an Android 6.0 Emulator.
"dependencies": {
"react": "16.0.0-alpha.6",
"react-dom": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-immersive": "0.0.4",
"whatwg-fetch": "^1.0.0"
},
I upgraded to 16, because of this thread.
facebook/react-native#13017
Anyways....
The only difference between you're installation instructions and what I did, is that I removed the @Override
from my MainActivity.java. This reason I did this, is because when I add it, I get the following error.
...
...
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
/home/andey/Dropbox/Projects/wyse/android/app/src/main/java/com/wyse/MainActivity.java:21: error: method does not override or implement a method from a supertype
@Override
^
1 error
:app:compileDebugJavaWithJavac FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Not sure if this sparks any ideas?
Yes, the linking instruction is outdated..
The codes should not be added to MainActivity.java
, but to MainApplication.java
instead, like this:
package COM.PACKAGE.NAME;
import android.app.Application;
import android.util.Log;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
import com.rnimmersive.RNImmersivePackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
, new RNImmersivePackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
Good to know it finally worked!
Will update the README file later.