navigation Prop is missing for this navigator 3 - ios

Question

The navigation Prop is missing for this navigator. In react-navigation 3 you must set up your navigation more directly. I took a look at the documentation regarding this but I'm still having trouble figuring out how I will implement this into my code. What is it that I am doing wrong and how would I fix it. Please provide some assistance.
This is my RootStack.js
import React from 'react';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import SignInScreen from './App/screens/SignInScreen';
import Account from './App/screens/Account';
import Inventory from './App/screens/Inventory';
import Settings from './App/screens/Settings';
import SignUp from './App/screens/SignUp';
import ForgotScreen from './App/screens/ForgotScreen';
import Tournament from './App/screens/Tournament';
import TournamentRsvp from './App/screens/TournamentRsvp';
import Shop from './App/screens/Shop';
import Game from './App/screens/Game';
const routes = {
SignInScreen: {
screen: SignInScreen
},
Account: {
screen: Account
},
Tournament: {
screen: Tournament
},
TournamentRsvp: {
screen: TournamentRsvp
},
Shop: {
screen: Shop
},
Game: {
screen: Game
},
SignUp: {
screen: SignUp
},
ForgotScreen: {
screen: ForgotScreen
},
Settings: {
screen: Settings
},
Inventory: {
screen: Inventory
}
};
class AuthLoadingScreen extends React.Component {
constructor() {
super();
}
}
const AppStack = createStackNavigator(routes, {
headerMode: 'none',
navigationOptions: {
headerVisible: false
},
initialRouteName: 'SignInScreen'
});
const AuthStack = createStackNavigator(
{
SignInScreen: {
screen: SignInScreen
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false
}
}
);
export default createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
);
This is my App.js below
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import * as firebase from 'firebase';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { firebaseConfig } from './config.js';
import RootStack from './RootStack';
firebase.initializeApp(firebaseConfig);
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<RootStack />
</View>
);
}
}

Answer 1

Try to wrap in createAppContainer.
import { createAppContainer, createStackNavigator } from 'react-navigation';
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
));