2

I am building my first React Native app on my own. While I was trying to set up navigation in my RN app, I ran into several module errors regarding importing RN libraries. I managed to solve them. However, now I am faced with a very bizarre red screen error that I (to be frank), have no idea where to even begin debugging.

The error looks like this.

I have no idea what this means, and I inspected the files mentioned on the error screen, but I couldn't make sense of it. They seem to be very low-level files that I shouldn't tinker with.

I've npm i <library-here> as well as react-native link <library-here> and that did not resolve the problem. I have destroyed and re-installed npm and that also did not work. I also restarted my frontend server but it appears to be something inherent to my project setup.

I have a feeling this is related to my package.jsons, as I had to change my react-navigation versions in both my src (my React Native folder that holds frontend files) to 2.14.0. I also changed the package.json in my project root so react-navigation was using the most recent, stable version: ^4.0.10.

Here is my src/package.json:

{
  "name": "src",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "expo-image-picker": "^8.0.0",
    "react": "^16.4.1",
    "react-native": "0.61.5",
    "react-native-screens": "^2.0.0-alpha.19",
    "react-navigation": "2.14.0",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/runtime": "^7.7.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.2",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Here is my package.json in my project root that I changed the react-navigation:

{
  "dependencies": {
    "react-native-gesture-handler": "^1.5.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^2.0.0-alpha.19",
    "react-navigation": "^4.0.10"
  }
}

In case it is needed, this is my AppNavigator.js, which I call in my App.js:

import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation";
import { Platform } from "react-native";
// Importing my screens here.
import LoginCreateAccountScreen from "../screens/LoginCreateAccountScreen";
import CreateAccountScreen from "../screens/CreateAccountScreen";
import LoginScreen from "../screens/LoginScreen";
import SplashScreen from "../screens/SplashScreen";

const MainNavigator = createStackNavigator({
  SplashScreen: {screen: SplashScreen},
  LoginCreateAccountScreen: {screen: LoginCreateAccountScreen},
  LoginScreen: {screen: LoginScreen},
  CreateAccountScreen: {screen: CreateAccountScreen},
});

export default createAppContainer(
    createSwitchNavigator(
        {
            // You could add another route here for authentication.
            // Read more at https://reactnavigation.org/docs/en/auth-flow.html
            SplashScreen: SplashScreen,
            LoginCreateAccountScreen: LoginCreateAccountScreen,
            LoginScreen: LoginScreen,
            CreateAccountScreen: CreateAccountScreen
        },
        {
            initialRouteName: 'SplashScreen' // Entry
        }
    )
);

My App.js:

import React, { Component } from 'react';
import AppNavigator from './navigation/AppNavigator';

export default class App extends Component {
    render() {
        return <AppNavigator />;
    }
}

Any and all help is appreciated. Thank you!

Jessica
  • 1,083
  • 2
  • 12
  • 27

1 Answers1

0

It can cause because the react version doesn't match the react-native version.

Try to update it to react@16.0.0-alpha.12 like this:

npm install react@16.0.0-alpha.12

Or change react@16.0.0-alpha.6 in your package.json to react@16.0.0-alpha.12 and run npm install.

Robert Hovhannisyan
  • 2,938
  • 6
  • 21
  • 43
  • 1
    Unfortunately, that did not resolve my problem. It successfully upgraded my `react` to `^16.0.0-alpha.12` I get a new error screen: https://gyazo.com/a152581167008bce9c53c93949c140e8 – Jessica Dec 14 '19 at 19:42
  • @McFloofenbork sorry can you try to delete node_modules folder and run npm install again? It can be a conflict in the new and old versions of react. – Robert Hovhannisyan Dec 14 '19 at 19:45
  • 1
    I just tried that, and it did not resolve the issue, either. I've upgraded my `react to 16.4.1`, and am back to square 1: https://gyazo.com/e187ef4fab9b3fc34e20abedec8c12a3 – Jessica Dec 14 '19 at 19:55
  • Yes, a new error. I was getting a very bizarre https://stackoverflow.com/questions/54302725/react-createcontext-is-not-a-function-but-i-am-not-using-it error after I followed your instructions. I tried upgrading per the responses on that post and got a new error. – Jessica Dec 14 '19 at 19:57
  • Try the solution from this answer https://stackoverflow.com/questions/53388478/getting-undefined-is-not-a-function-evaluating-0-reactnavigation-stacknaviga – Robert Hovhannisyan Dec 14 '19 at 19:59
  • Maybe you already have solve the problem, because this new error doesn't look similar to your first error and you didn't see this problem because of your first error. – Robert Hovhannisyan Dec 14 '19 at 20:02
  • 1
    Actually, I've been alternating back and forth between this "new" error and other new errors multiple times. Anyway, thank you for your help. – Jessica Dec 14 '19 at 20:05
  • 1
    React Native is very tricky because of very rapid developing and updating it gets too complicated and causes a lot of package related errors. I'm glad I helped you. Good luck with that)) – Robert Hovhannisyan Dec 14 '19 at 20:08