How to use createStackNavigator in React Native?

Question

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 :)

Answer 1

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 command :

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" component={Loading} />
    <Screen name="Login" component={Login} />
  </Navigator>
);

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

export default AuthenticationNavigator;