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

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

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?

Solution

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}
      />
    );
  }