Unable to hide nested tabNavigator's tabBar in react-navigation - react-navigation

Question

I have a nested tabNavigator inside of another tabNavigator, and I'm trying to get the inner tabNavigator's tabBar to be hidden. (The one below that shows "Map" and "list"). I'd like to keep the main tabNavigator which reads "Map Favorites Add a Site More".
The code which is rendering it this way is below:
const MainNavigator = StackNavigator({
login: {
screen: LoginScreen
},
main: {
screen: TabNavigator({
search: {
screen: TabNavigator({
map: {
screen: MapScreen
},
list: {
screen: ListScreen
}
})
},
favorites: {screen: FavoritesScreen},
addSite: {screen: AddSiteScreen},
more: {screen: MoreScreen}
})
},
filter: {
screen: FilterScreen,
navigationOptions: {
tabBarVisible: false
}
}
}, {
lazy: true
});
I've tried adding
navigationOptions: {
tabBarVisible: false
}
to the search item as shown below:
search: {
screen: TabNavigator({
map: {
screen: MapScreen
},
list: {
screen: ListScreen
}
},
navigationOptions: {
tabBarVisible: false
})
}
but it ends up hiding the outermost TabNavigator (the one which reads "Map Favorites Add a Site More") instead of the inner one as I'd expect. (Image below)
Finally, out of ideas and thinking maybe it needs to be nested in as far as possible, I've also tried adding the
navigationOptions: {
tabBarVisible: false
}
to the innermost map and list items as such:
search: {
screen: TabNavigator({
map: {
screen: MapScreen,
navigationOptions: {
tabBarVisible: false
}
},
list: {
screen: ListScreen,
navigationOptions: {
tabBarVisible: false
}
}
})
}
but the result of this is hiding both of the TabNavigators and there are none at all. Am I missing something simple on how to achieve this?
Thanks

Answer 1

You are correct in adding the navigationOptions with a property of tabBarVisible: false. However, you want to add it as a property to the tabNavigator, not to the screen itself like so:
search: {
screen: TabNavigator({
map: {
screen: MapScreen,
navigationOptions: {
tabBarVisible: false
}
},
list: {
screen: ListScreen
}
}, navigationOptions: {
tabBarVisible: false
});
}
One thing I want to point out is that lazy: true was deprecated in react-navigation version 23, so unless you are on version 22 or below that won't do anything.

Answer 2

I never ended up finding a good answer to this question, and it seems like it might be a limitation of the library.
As a workaround (which works just as well), I decided instead of having three distinct screens: SearchScreen, MapScreen, and ListScreen, I just went down to only having one screen SearchScreen, and when that screen renders, it calls a component to render inside of it.
The navigation portion is now much flatter and looks like this:
main: {
screen: TabNavigator({
search: {screen: SearchScreen},
favorites: {screen: FavoritesScreen},
addSite: {screen: AddSiteScreen},
more: {screen: MoreScreen}
})
}
Then inside of the SearchScreen, I just render the components (instead of treating them as their own distinct screens)
renderSearchScreen = () => {
const {viewStyle, lastKnownRegion, mapLoaded, sites} = this.props;
if (viewStyle === map.SearchOptions.MAP) {
return (
<SearchMap
lastKnownRegion={lastKnownRegion}
mapLoaded={mapLoaded}
updateRegion={this.props.updateRegion}
sites={sites}
/>
);
} else {
return (
<SearchList
sites={sites}
/>
);
}
};
After these changes, it's worked fine with no issues. I suppose it's also cleaner, and more logical from an architecture standpoint that Map and List be components that are nested and rendered instead of them also being distinct screens.
Hopefully this can help anyone else who runs into a similar issue with nested TabNavigators!