Toggle react-navigation tab bar

Hi, I’m trying to toggle the bottom navigation bar. I’m able to hide it by adding tabBarVisible = false; in the navigation options when creating the stack.
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,

FeedStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;

return {

I need to be able to toggle when i’m inside a screen.
ive tried
static navigationOptions = ({ navigation }) => {
let navigationOptions = {};
navigationOptions.tabBarVisible = false;
return navigationOptions;

this.props.navigation.setParams({ tabBarVisible: false});

however, both of those don’t seem to do anything.
I’m trying to pass a param in the navigationOptions from the screen to the stack navigator, but I can’t figure out how.

Another option I can’t seem to figure out is how to change access the route in navigation.state in the screen. This snippet below is from the FeedStack.navigationOptions
Object {
“index”: 0,
“isTransitioning”: false,
“key”: “MainStack”,
“params”: undefined,
“routeName”: “MainStack”,
“routes”: Array [
Object {
“key”: “id-1563301262066-0”,
“params”: Object {
“hideHeader”: true,
“tabBarVisible”: true,
“routeName”: “Home”,
whereas logging the same in the screen, just shows “FeedHome”

I’ve been searching online for 3 days, and I can’t seem to find a solution.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.