How to set-up structure for react-navigation v6? - react-native

Question

I am trying to upgrade a large app from v4 to v6 and I'm having issues even getting the first screen to render. I get the error: Couldn't find a navigation object. Is your component inside a screen in a navigator?. I feel like it's something wrong with the set-up but I can't quite figure it out. I followed through the upgrading docs from v4 to v5 to start out, but the examples do not have the same structure as the app I am working with.
Here's App.js:
import navigationRef from '../Navigation/NavigationService';
export const App = () => {
return (
<Provider store={store}>
<NavigationContainer ref={navigationRef}>
<RootContainer />
</NavigationContainer>
</Provider>
);
};
Here's NavigationService.ts:
export const topLevelNavigation = React.createRef<NavigationContainerRef>();
Here's RootContainer.tsx:
class RootContainer extends Component {
backHandlerSubscription: NativeEventSubscription;
componentDidMount = async (): Promise<void> => {
this.backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPress);
};
componentWillUnmount = async (): Promise<void> => {
this.backHandlerSubscription.remove();
};
onAndroidBackPress = (): null => {
NavigationService.navigateBack();
return null;
};
render(): ReactNode {
return (
<>
<View style={Styles.rootContainer}>
<AppNavigator /> //error occurs here!!
<AppStateManager />
</View>
</>
);
}
}
const mapDispatchToProps = () => ({});
export default connect(null, mapDispatchToProps)(RootContainer);
Here's the stack navigator:
const RootStack = createStackNavigator();
const RootContainerStackNavigator = () => {
return (
<RootStack.Navigator initialRouteName="StartupSplashScreen" screenOptions={{ gestureEnabled: false }}>
<RootStack.Screen name="StartupSplashScreen" component={StartupSplashScreen} />
<RootStack.Screen name="LoginScreen" component={LoginScreen} />
</RootStack.Navigator>
);
};
Here is the AppNavigator class:
type AppNavigatorProps = {
navigation?: any;
route?: RouteProp<any, any>;
};
class AppNavigator extends Component<AppNavigatorProps> {
// non-navigation related stuff here
render(): ReactNode {
const { navigation } = this.props;
return (
<>
<SafeAreaView style={topSafeAreaStyle} />
<SafeAreaView style={bottomSafeAreaStyle}>
<StatusBar backgroundColor={barColor} barStyle={barStyle}
<ErrorBoundary
navigation={navigation}
<RootContainerStackNavigator />
</ErrorBoundary>
</SafeAreaView>
</>
);
}
}
export default function (props) {
const navigation = useNavigation();
return <AppNavigator {...props} navigation={navigation} />;
}