React Navigation version 3 falied to load page

Question

I am using React Navigation 3.x and it failed to start the application. The error is below:-

This error is located at:
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:96)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:202)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:62)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

This error is located at:
    in NavigationContainer (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

My code goes here:-

Ap.js

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

    export default createAppContainer(AppNavigator);

Package.json file is here:-

{
  "name": "reactCrud",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.0-alpha.0",
    "react-native": "0.55.0",
    "react-native-gesture-handler": "^1.0.9",
    "react-navigation": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "23.6.0",
    "react-test-renderer": "16.3.0-alpha.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

To install react navigation I used these steps:-

npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

How to solve this kind of error? Thanks in advance.

Hussam Kurd Hussam Kurd · Accepted Answer · 2019-01-19T10:55:02

I have the same problem with React Navigation V3, The problem I was using Babel 7 with @babel/plugin-proposal-class-properties So I just remove all the unwanted Plugins And my (.babelrc, babel.config.js) looks as following:

{
  "presets": [
    "@babel/preset-flow",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-transform-flow-strip-types"],
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]


}

And it works fine. However you just need to install the above babel plugins and config your babel configuration file and hopefully it will resolve your issue

React Navigation version 3 falied to load page

1 Answers