Using a HOC with a react-navigation Navigator

Question

My application makes use of the react-navigation library for routing, but now I have a requirement where I want to show a modal window over only the routes belonging to the TabNavigator. I thought this would work if I created a Higher Order Component and used this to wrap the TabNavigator but this doesn't seem to work.

So what would be the correct way to add functionality to a react-navigation Navigator?

TabRoutes.js

This works fine without the provider, but the routes are unreachable as soon as I add the provider to the TabNavigator.

import myProvider from './providers/myProvider';

const TabRoutes = createBottomTabNavigator({
  Main: {screen: HomeStack},
  Moments: {screen: MomentStack},
  Settings: {screen: SettingsRoutes}
},{
  initialRouteName: 'Main'
});

export default myProvider(TabRoutes);

Routes.js

The TabNavigator is part of a SwitchNavigator, but only the routes of the tabs should be able to display the modal.

import TabRoutes from './routes/TabRoutes';

const AppRoutes = createSwitchNavigator({
  Loading: LoadingScreen,
  Auth: AuthStack,
  App: TabRoutes,
}, {
  initialRouteName: 'Loading'
});

myProvider.js

const myProvider = (wrappedComponent) => {

  class extends React.Component {
    render (
      <View>
        <WrappedComponent {...this.props}>
        <MyModal visible={...}>
          ... // rest of modal
        </MyModal>
      </View>
    );
  }
}

export default myProvider;

Answer 1

Untested, but I would try this next:

TabRoutes.js

import myProvider from './providers/myProvider';

const TabRoutes = createBottomTabNavigator({
    Main: {screen: myProvider(HomeStack)},
    Moments: {screen: myProvider(MomentStack)},
    Settings: {screen: myProvider(SettingsRoutes)}
},{
    initialRouteName: 'Main'
});

export default TabRoutes;

...as surely it's the screen components which you want wrapping, rather than the entire of TabRoutes?