Upgrade React-navigation from V4.x.x to V5.x.x

Question

Current behavior

In my team we would like to upgrade react navigation to V5. Since our codebase is very large we have to do an incremental refactor (Upgrading everything in one shot is impossible).

For this reason we would like to use the helper @react-navigation/compat with the latest version ^5.3.20. So far this is the different piece of code we have updated:

Main app navigation: At start we were using createSwitchNavigator. At startup we check if user is logged in:

• If yes: redirect to MainNavigation navigator.
• if no: redirect to Authentification navigator.

<NavigationContainer>
    <Main.Navigator>
        <Main.Screen
          name={SceneKeys.Startup}
          component={Startup}
          options={{ header: () => null }}
        ></Main.Screen>

        { !authenticated ? (
          <Main.Screen
            name={SceneKeys.Authentication}
            component={AuthenticationNavigation}
            options={{ header: () => null }}
          ></Main.Screen>
        ) : (
          <Main.Screen
            name={SceneKeys.App}
            component={MainNavigation}
            options={{ header: () => null }}
          ></Main.Screen>
        )}
      </Main.Navigator>
   </NavigationContainer>

This part work well, if user is not logged in we are correctly redirected to AuthenticationNavigation. The problem is in our main navigation.

const MainNavigation = createCompatNavigatorFactory(createStackNavigator)(
  {
    // Main stack contain many navigator (switch, drawer, etc...)
    MainStack: { screen: TabBarNavigator, navigationOptions: { header: null } },
    // ...other routes
  }

When we redirect on this navigator we have some errors coming from withNavigation (in compat mode) and navigationOptions.

withNavigation: The error say that we cannot use withNavigation since it's a hook and we can only call this in the body of a function. However we use the compat' mode and on the doc it says that is exported as a HOC.

export default withNavigation(
  connect(mapStateToProps, mapDispatchToProps)(OurComponent),
);

Header: Header props fail even with the compat' mode with navigationOptions and createCompatNavigatorFactory

const MessagingNavigator = createCompatNavigatorFactory(createStackNavigator)(
  {
    [SceneKeys.messaging]: {
      screen: Messaging,
      navigationOptions: ({ navigation }) => ({
        header: (
          <MessagingNavBar mode={'conversationsList'} navigation={navigation} />
        ),
        drawerLockMode: navigation.state.params
          ? navigation.state.params.drawerLockMode
          : undefined,
      }),
    },

If I delete navigationOptions property and I refactor withNavigation by using useNavigation() hook it works well and go to the correct screen otherwise it doesn't work.

At the moment we cannot afford to refactor everything from the ground up and we would like to do that incrementally. With the informations above, did we miss something ?

Expected behavior

• Is withNavigation should work as an HOC's with component and redux-connect since it's exported from compat' plugin ?
• Why navigationOptions not working with the previous headers implementation in compatibility mode?