React Navigation stack navigator doesn't work

Question

I used stackNavigator 2 in one of my projects as follows. import { StackNavigator } from "react-navigation";

import {
   LoginScreen,
   TechStackScreen
} from '../screens';

// Public routes
export const PublicRoutes = StackNavigator({
   login: { screen: LoginScreen}
});

// Secured routes
export const SecuredRoutes = StackNavigator({
   techStack: { screen: TechStackScreen}
});

But when I tried to use it with version 3+ this doesn't work. Can anyone give me sample code of how to use stacknavigation 3+ like this?

Answer 1

You need to use createAppContainer on your root navigator. This was a breaking change introduced in v3

Also StackNavigator has been replaced by createStackNavigator

Here is a simple example of the usage.

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);