CODEWITHSUNDEEP
javascriptreact-nativegradlereact-reduxrxjs
Alejandro Gonzalez
Alejandro Gonzalez

Reputation: 1371

ReferenceError: Can't find variable: React -- bundle android

Hi i am having problems when i try to put createStackNavigator, but if i remove it, it is ok.

My code is

import Home from '../home/home.component';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import React from 'react';

const NavStack = createStackNavigator(
  {
    ScreenLogin: {
      screen: Home,
      navigationOptions: {
        header: null,
      },
    },
  },
  {
    defaultNavigationOptions: {
      //header: null,
    },
  },
);

const AppNavigator = createAppContainer(NavStack);

export default AppNavigator;

The home

import React from 'react';
import {Text, View} from 'react-native';

const Home = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default Home;

The stack

E/ReactNativeJS: ReferenceError: Can't find variable: React

This error is located at:
    in h
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C

E/unknown:ReactNative: ReferenceError: Can't find variable: React

This error is located at:
    in h
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C, stack:
value@392:868
al@77:54989
ja@77:79095
Ba@77:78997
Qa@77:78762
Ia@77:75924
Ia@-1
<unknown>@77:26326
unstable_runWithPriority@142:3806
ht@77:26273
pt@77:26208
Pa@77:73297
pi@77:88605
render@77:95350
exports@339:626
run@336:694
runApplication@336:1753
value@41:3469
<unknown>@41:662
value@41:2459
value@41:634
value@-1

E/ReactNativeJS: ReferenceError: Can't find variable: React

This error is located at:
    in h
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C

FATAL EXCEPTION: mqt_native_modules Process: com.co.prueba, PID: 21016 com.facebook.react.common.JavascriptException: ReferenceError: Can't find variable: React

This error is located at:
    in h
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C, stack:
value@392:868
al@77:54989
ja@77:79095
Ba@77:78997
Qa@77:78762
Ia@77:75924
Ia@-1
<unknown>@77:26326
unstable_runWithPriority@142:3806
ht@77:26273
pt@77:26208
Pa@77:73297
pi@77:88605
render@77:95350
exports@339:626
run@336:694
runApplication@336:1753
value@41:3469
<unknown>@41:662
value@41:2459
value@41:634
value@-1

    at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
    at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
    at android.os.Looper.loop(Looper.java:223)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
    at java.lang.Thread.run(Thread.java:923)

The package json

{
  "name": "Test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android --port=8089",
    "ios": "react-native run-ios",
    "start": "react-native start --port=8089"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-dotenv": "^2.5.5",
    "react-native-fetch-polyfill": "^1.1.3",
    "react-native-fs": "^2.18.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-indicators": "^0.17.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.4",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "7.14.6",
    "@babel/runtime": "7.14.6",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Then if i only leave the home component, it is ok in the native application, but the createStackNavigator causes the crash.

I am moving the React import to the top of the file, now i ma having the next error if i start with react navigation

import React from 'react';
import AppNavigator from './components/navigator/navigator.component';

export default class AppTest extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {}

  render() {
    return <AppNavigator />;
  }
}

The error

E/ReactNativeJS: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in E
    in R
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C

E/unknown:ReactNative: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in E
    in R
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C, stack:
exports@26:286
exports@161:1002
get@74:883
wl@77:59730
Oa@77:79273
ja@77:79156
Ba@77:78997
Qa@77:78762
Ia@77:75924
Ia@-1
<unknown>@77:26326
unstable_runWithPriority@142:3806
ht@77:26273
pt@77:26208
Pa@77:73297
pi@77:88605
render@77:95350
exports@339:626
run@336:694
runApplication@336:1753
value@41:3469
<unknown>@41:662
value@41:2459
value@41:634
value@-1

E/ReactNativeJS: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in E
    in R
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C

--------- beginning of crash

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules Process: com.co.test, PID: 24369 com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in E
    in R
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in C, stack:
exports@26:286
exports@161:1002
get@74:883
wl@77:59730
Oa@77:79273
ja@77:79156
Ba@77:78997
Qa@77:78762
Ia@77:75924
Ia@-1
<unknown>@77:26326
unstable_runWithPriority@142:3806
ht@77:26273
pt@77:26208
Pa@77:73297
pi@77:88605
render@77:95350
exports@339:626
run@336:694
runApplication@336:1753
value@41:3469
<unknown>@41:662
value@41:2459
value@41:634
value@-1

    at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
    at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
    at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
    at android.os.Looper.loop(Looper.java:223)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
    at java.lang.Thread.run(Thread.java:923)

Upvotes: 1

Views: 2904

Answers (1)

Alejandro Gonzalez
Alejandro Gonzalez

Reputation: 1371

Finally i found the solution. If someone has the problem, you should make the next

The first

Add the modules in the native application.

include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
include ':react-native-safe-area-context'
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')

Also you need to include the next libraries

implementation project(':react-native-screens')
implementation project(':react-native-safe-area-context')

The second

You should add the ContextPackage in the react activity

 import com.swmansion.rnscreens.RNScreensPackage
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage
   .addPackage(RNScreensPackage())
        .addPackage(SafeAreaContextPackage())

The third

You should modify the gradle

    maven {
        // Local Maven repo containing AARs with JSC library built for Android
        url "$rootDir/../node_modules/jsc-android/dist"
    } 

implementation "org.webkit:android-jsc:+"
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

android {

packagingOptions {
    pickFirst '**/libjsc.so'
    pickFirst '**/libc++_shared.so'
}

Upvotes: 1

Related Questions