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?

Answer 1

You can override the renderTabBar method and create your own

Answer 2

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={}
                    />
                )
            }}
        />
    )