The navigation prop is missing for this navigator - reactjs

Question

Every single example I have seen in Stack Overflow uses the case where the App component is a functional component, but I am using a class-based App component and I am playing catch up with the breaking changes of React Navigation.
This is my code inside App.js file:
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
createBottomTabNavigator,
createStackNavigator
} from "react-navigation";
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
export default class App extends React.Component {
render() {
const MainNavigator = createBottomTabNavigator({
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
});
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});
I was refactoring it along nicely and then it broke with this message that I cannot figure out:
Invariant Violation: The navigation prop is missing for this
navigator. In react-navigation 3 you must set up your app container
directly.
Yes, I looked at React Native docs regarding AppContainer and I saw this line of code
const AppContainer = createAppContainer(AppNavigator);
but I am not sure how to refactor mines or not refactor it too much to get this right.
When I try to add this line of code export default createAppContainer(App); at the bottom of my file and obviously removing export default from in front of class App... and also pulling out createAppContainer from inside my react-navigation, I get an error that says:
TypeError: undefined is not an object

Answer 1

Set you createAppContainer like this
import AuthScreen from "./screens/AuthScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import MapScreen from "./screens/MapScreen";
import DeckScreen from "./screens/DeckScreen";
import SettingsScreen from "./screens/SettingsScreen";
import ReviewScreen from "./screens/ReviewScreen";
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
const MainNavigator = createAppContainer(createBottomTabNavigator({ // set createAppContainer here
welcome: WelcomeScreen,
auth: AuthScreen,
main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
}));
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
justifyContent: "center"
}
});