0
votes

I'm trying to mirage my app from react-navigation from v2 to v3. But right after I put my navigator into createAppContainer, its only return "Cannot read property 'router' of undefined" in createNavigationContainer.

When I console.log Component input, it shows undefined.

I also tried to put a simple screen to createStackcontainer if some screens have any fail import. but the problem still on.

here's the code

const AppContainer = createAppContainer(AppNavigator);
class myScreen extends Component(){
  render(){
    return(
      <View>
        <Text>This is my screen</Text>
      </View>
    )
  }

}

const AppNavigator = createStackNavigator(
  {
    Screen : myScreen
  },
  {
    initialRouteName: 'Screen'
  }
  );

here's package.json dependencies:

"dependencies": {
    "@react-native-community/async-storage": "^1.3.3",
    "axios": "^0.18.0",
    "circular-json": "^0.5.9",
    "firebase": "^5.8.6",
    "install": "^0.12.1",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "npm": "^6.9.0",
    "opentok-react-native": "^0.10.1",
    "prop-types": "^15.6.2",
    "react": "^16.8.6",
    "react-native": "^0.59.9",
    "react-native-action-button": "^2.8.5",
    "react-native-calendars": "^1.30.0",
    "react-native-camera": "git+https://[email protected]/react-native-community/react-native-camera.git",
    "react-native-charts-wrapper": "^0.5.5",
    "react-native-cli": "^2.0.1",
    "react-native-elements": "^1.1.0",
    "react-native-fcm": "^16.2.4",
    "react-native-firebase": "^5.2.3",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-gifted-chat": "^0.7.2",
    "react-native-html-to-pdf": "^0.6.0",
    "react-native-i18n": "^2.0.15",
    "react-native-image-picker": "^0.27.2",
    "react-native-image-zoom-viewer": "^2.2.25",
    "react-native-invoke-app": "^1.0.4",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.5.4",
    "react-native-mail": "^3.0.7",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modalbox": "^1.7.1",
    "react-native-navigation": "^2.22.3",
    "react-native-pdf": "^5.0.12",
    "react-native-popup-dialog": "^0.16.6",
    "react-native-push-notification": "^3.1.3",
    "react-native-reanimated": "^1.0.1",
    "react-native-sha256": "^1.3.6",
    "react-native-share": "git+https://[email protected]/react-native-community/react-native-share.git",
    "react-native-sound": "^0.10.9",
    "react-native-star-rating": "^1.1.0",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "^3.11.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.2",
    "rn-fetch-blob": "^0.10.15",
    "upgrade": "^1.1.0",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "^5",
    "jest": "23.4.2",
    "react-test-renderer": "16.4.1"
  },

can anyone help?

2

2 Answers

0
votes

Are you importing the right classes ?

import React from 'react';
import { createSwitchNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
0
votes
const AppNavigator = createStackNavigator({
   myScreen : myScreen

});

you can pass like this instead of

const AppNavigator = createStackNavigator(
  {
    Screen : myScreen
  },