CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Adnan Salahuddin
Adnan Salahuddin

Reputation: 81

React create stack navigator

I am using react native and expo. I am getting error message after run expo and it says:

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/upgrading-from-4.x for migration guide.

App.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './components/Home.js'
import Movie from './components/Movie.js'

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

const AppNavigator = createStackNavigator({
  'Home': Home,
  'Movie': Movie,
})

Package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.4.2",
    "@react-navigation/stack": "^5.3.9",
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.2.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.1.0",
    "@babel/core": "^7.8.6"
  },
  "private": true
}

Could you please help to resolve this issue? I am waiting for your response.

Thanks in advance

Upvotes: 2

Views: 918

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You are creating the navigator in the old way, the code for V5 which you are using should be like below.

You will have to import NavigationContainer as well.

import { NavigationContainer } from '@react-navigation/native';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Movie" component={Movie} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

More reference can be found here https://reactnavigation.org/docs/stack-navigator/

Upvotes: 1

Related Questions