My current code

App.js

import React from 'react';
import AuthenticationNavigator from 'app/src/navigations/AuthenticationNavigator';

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

AuthenticationNavigator.js

import { createSwitchNavigator, createAppContainer } from 'react-navigation';
onst AuthenticationNavigator = createAppContainer(
  createSwitchNavigator(
    {
        Loading: { screen: LoadingScreen },
        Login: { screen: LoginScreen },
    },
    {
        initialRouteName: 'Loading',
    },
  ),
);
export default AuthenticationNavigator;

I changed AuthenticationNavigator.js to

import { createStackNavigator } from '@react-navigation/stack';
const AuthenticationNavigator = createStackNavigator(
  {
      Loading: { screen: LoadingScreen },
      Login: { screen: LoginScreen },
  },
  {
      initialRouteName: 'Loading',
  },
);

export default AuthenticationNavigator;

I wanna use createStackNavigator instead of using createSwitchNavigator.

I'm facing

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

package.json

{
  "name": "app",
  },
  "dependencies": {
    "@react-navigation/stack": "^5.2.18",
    "react-navigation-stack": "^2.1.1",
  },
  "devDependencies": {
  },
  "private": true
}

There are 2 different react-navigation-stack. Does this bring the error?

I would appreciate it if you could give me any advices :)

My current code

App.js

import React from 'react';
import AuthenticationNavigator from 'app/src/navigations/AuthenticationNavigator';

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

AuthenticationNavigator.js

import { createSwitchNavigator, createAppContainer } from 'react-navigation';
onst AuthenticationNavigator = createAppContainer(
  createSwitchNavigator(
    {
        Loading: { screen: LoadingScreen },
        Login: { screen: LoginScreen },
    },
    {
        initialRouteName: 'Loading',
    },
  ),
);
export default AuthenticationNavigator;

I changed AuthenticationNavigator.js to

import { createStackNavigator } from '@react-navigation/stack';
const AuthenticationNavigator = createStackNavigator(
  {
      Loading: { screen: LoadingScreen },
      Login: { screen: LoginScreen },
  },
  {
      initialRouteName: 'Loading',
  },
);

export default AuthenticationNavigator;

I wanna use createStackNavigator instead of using createSwitchNavigator.

I'm facing

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

package.json

{
  "name": "app",
  },
  "dependencies": {
    "@react-navigation/stack": "^5.2.18",
    "react-navigation-stack": "^2.1.1",
  },
  "devDependencies": {
  },
  "private": true
}

There are 2 different react-navigation-stack. Does this bring the error?

I would appreciate it if you could give me any advices :)

• javascript
• reactjs
• react-native

• Currently you have mixed up reactnavigation version 4 and version 5. Can you please specify which version you want to use ? – Kishan Bharda Commented May 4, 2020 at 5:45
• Ok. I will add answer. – Kishan Bharda Commented May 4, 2020 at 5:46

3 Answers 3

You have mixed up reactnavigation version 4 and version 5.

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

is a part of reactnavigation version 4. And

import { createStackNavigator } from '@react-navigation/stack';

is a part of reactnavigation version 5. So If you want to use v5 then first, install reactnavigation using :

npm install @react-navigation/native

then, install rest of dependencies by following this guide. Now, install stackNavigator using mand :

npm install @react-navigation/stack

More detail is here.

Now, you can create navigation as below :

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Loading from './containers/Loading';
import Login from './containers/Login';

const {Navigator, Screen} = createStackNavigator();

const AuthStack = () => (
  <Navigator headerMode="none">
    <Screen name="Loading" ponent={Loading} />
    <Screen name="Login" ponent={Login} />
  </Navigator>
);

const AppNavigator = () => (
  <NavigationContainer>
    <AuthStack />
  </NavigationContainer>
);

export default AuthenticationNavigator;

you shouldn't have an argument for creating stack navigator. For example:

const AuthenticationStack = createStackNavigator();

const AuthenticationStackNavigator = () => {
    return(
        <AuthenticationStack.Navigator>
            <AuthenticationStack.Screen name="login" ponent = {Login}/>
            <AuthenticationStack.Screen name="register" ponent = {Register} />
        </AuthenticationStack.Navigator>
    )
}

You are creating the navigators wrong way, in react navigation V5 you create navigators differently from V4, please go through the stack navigator documentation for more details