How to wrap each Tab.Screen in the same component

Question

when using react-navigation's BottomTabNavigator, how can I wrap each screen with a component? For example, say I have some tabs like so:

<NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
</NavigationContainer>

I want to wrap those two screens with the same component, BUT I need the same props that tabBar is getting because I want to render something different in the wrapped component based on the active route. I could manually add the component in each screen's render, but I'd like to keep it in just one place and have it dynamically figure out what to render.

Just for reference, in react-navigation v4 I could do it like this:

// CustomTabView component

const { routes, index } = navigation.state;
const route = routes[index];
const descriptor = descriptors[route.key];
const ActiveScreen = descriptor.getComponent();
const currentKey = descriptor.key;

<View style={Styles.container}>
    <ShellHeader
        icon={route.params.actionIcon}
        currentRoute={route}
        currentTab={currentKey}
    />
    <ActiveScreen navigation={descriptor.navigation} />
    <CustomTabBar navigation={navigation} />
</View>

const AppContainer = createAppContainer(createNavigator(CustomTabView, CustomTabRouter, {}));

and CustomTabRouter would look something like:

const CustomTabRouter = TabRouter(
    {
        Home: {
            screen: HomeScreen,
            params: {
                key: 'history',
                actionIcon: {
                    navigation: () => NavigationService.navigateToHomeScreen()
                }
            }
        },
        Settings: {
            screen: SettingsScreen,
            params: {
                key: 'contacts',
                actionIcon: {
                    navigation: () => NavigationService.navigateToSettingsScreen()
                }
            }
        }
    {
        initialRouteName: 'Home'
    }
);

But that does not work in v6 as there is no createAppContainer anymore

How to wrap each Tab.Screen in the same component

0 Answers0