React Navigation stack navigator doesn't work - react-native

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

Answer 2

You should import and use createStackNavigator, here is the docs https://reactnavigation.org/docs/en/stack-navigator.html
Just need a small change on your code
// Public routes
export const PublicRoutes = createStackNavigator({
login: { screen: LoginScreen}
});
// Secured routes
export const SecuredRoutes = createStackNavigator({
techStack: { screen: TechStackScreen}
});

Answer 3

Well, if you are using StackNavigator, like this:
// Inside "App.js"
render() {
return (
<NavigationContainer >
<Stack.Navigator >
<Stack.Screen name='Details'
component={ Details } />
</Stack.Navigator >
</NavigationContainer >
)
}
You can use the navigation via accessing properties available with each component:
// Inside "Details" Component
export default class Details extends React.Component {
render() {
const { navigate } = this.props.navigation
return (
<Button title='Goto Component' onPress={ () => navigate( 'SomeOtherComponent' ) }/>
)
}
}