react-native-tab-view - hide a specific tabbar tab (not the scene)

Question

I was wondering if the following is possible...

I have an instance of react-native-tab-view There are 3 scenes under this but I only ever want to show 2 of them as selectable on the tab bar itself. The third scene is effectively there but hidden until automatically shown (for a few seconds) if an event happens.

So, I want the following for the UI:

Tab Bar: Scene A | Scene B
Tab View: Scene A | Scene B | Scene C

Is this possible?

score 0 · Answer 1 · answered Jul 06 '20 at 12:24

0

You can override the renderTabBar method and create your own

answered Jul 06 '20 at 12:24

Bogdan Dobai

116
2

Not quite what I needed but I'll post my working solution below... – scgough Jul 06 '20 at 13:06

score 0 · Accepted Answer · answered Jul 06 '20 at 13:10

My solution was to alter the renderTabBar method of my implementation to only show the tabs with a title. In addition, if I want to temporarily show the 'hidden' tab this also works as I can dynamically update it's title when I need it to show.

renderTabBar(props: *) {
    const { index, routes } = props.navigationState;
    const currRoute = routes[index];
    const navigationState = {
      index: currRoute.title==='' ? routes.length : index,
      routes: routes.filter(route => route.title!=='')
    };
    const jumpToIndex = i => props.jumpToIndex(routes.indexOf(navigationState.routes[i]));

    return (
      <TabBar
        ...
        navigationState={navigationState} 
        jumpToIndex={jumpToIndex}
      />
    );
  }

score 0 · Answer 3 · answered May 14 '22 at 01:59

My solution was to change the props.navigationState.routes before returning the TabBar. It will hide tabs without title while navigation is still possible.

 return (
        <TabView
            navigationState={{
                index,
                routes
            }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width, height: layout.height }}
            tabBarPosition={'bottom'}
            renderTabBar={(props) => {
                props.navigationState.routes = routes.filter(
                    (route) => route.title
                ) 
                return (
                    <TabBar
                        {...props}
                        style={}
                        renderLabel={({ route, focused }) => (
                                <Text style={} accessibilityLabel={} >
                                    {route.title}
                                </Text>
                            )
                        
                        labelStyle={}
                    />
                )
            }}
        />
    )

react-native-tab-view - hide a specific tabbar tab (not the scene)

3 Answers3