I have simple createBottomTabNavigator and one of it's tabs is createStackNavigator and inside this stack I have one screen which I want it to over lap the tab bar. I tried use tabBarVisible: false on this screen but no luck there.

Code:

const BookingsStack = createStackNavigator({
  Commutes: {
    screen: Commutes,
    navigationOptions: {
      title: "Commutes",
      header: null,
    }
  },
  Tickets: {
    screen: Tickets,
    navigationOptions: {
      title: "Tickets",
      header: null,
      tabBarVisible: false
    }
  }
});

export const MainNav = createBottomTabNavigator({
  Current: {
    screen: Current,
    navigationOptions: {
      title: "Current",
      tabBarIcon: ({ tintColor }) => (
        <IconIO name="ios-bus" size={scale(20)} color={tintColor} />
      )
    }
  },
  BookingsStack: {
    screen: BookingsStack,
    navigationOptions: {
      title: "Commutes",
      tabBarIcon: ({ tintColor }) => (
        <IconSL name="layers" size={scale(20)} color={tintColor} />
      )
    }
  }
}

I have simple createBottomTabNavigator and one of it's tabs is createStackNavigator and inside this stack I have one screen which I want it to over lap the tab bar. I tried use tabBarVisible: false on this screen but no luck there.

Code:

const BookingsStack = createStackNavigator({
  Commutes: {
    screen: Commutes,
    navigationOptions: {
      title: "Commutes",
      header: null,
    }
  },
  Tickets: {
    screen: Tickets,
    navigationOptions: {
      title: "Tickets",
      header: null,
      tabBarVisible: false
    }
  }
});

export const MainNav = createBottomTabNavigator({
  Current: {
    screen: Current,
    navigationOptions: {
      title: "Current",
      tabBarIcon: ({ tintColor }) => (
        <IconIO name="ios-bus" size={scale(20)} color={tintColor} />
      )
    }
  },
  BookingsStack: {
    screen: BookingsStack,
    navigationOptions: {
      title: "Commutes",
      tabBarIcon: ({ tintColor }) => (
        <IconSL name="layers" size={scale(20)} color={tintColor} />
      )
    }
  }
}

• javascript
• reactjs
• react-native
• react-navigation

Share Improve this question Follow asked Nov 21, 2018 at 8:16 obiwankenoobiobiwankenoobi 1,58255 gold badges2323 silver badges3737 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As given in the navigation document:

If we want to hide the tab bar when we navigate from the feed home to a details screen without shuffling navigators, we cannot set the tabBarVisible: false configuration in navigationOptions on DetailsScreen, because those options will only apply to the FeedStack. Instead, we can do the following:

 const FeedStack = createStackNavigator({   FeedHome: FeedScreen,  
     Details: DetailsScreen, });

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

       return {
         tabBarVisible,
   }; };

I found a solution in the react-navigation docs - the implementation look like this:

const ChildMainNav = createBottomTabNavigator({
  Current: {
    screen: Current,
    navigationOptions: {
      title: "Current",
      tabBarIcon: ({ tintColor }) => (
        <IconIO name="ios-bus" size={scale(20)} color={tintColor} />
      )
    }
  },
  Commutes: {
    screen: Commutes,
    navigationOptions: {
      title: "Commutes",
      tabBarIcon: ({ tintColor }) => (
        <IconSL name="layers" size={scale(20)} color={tintColor} />
      )
    }
  }
}

export const MainNav = createStackNavigator({
  ChildMainNav: {
    screen: ChildMainNav,
    navigationOptions: {
      header: null
    }
  },

  // overlap screens
  Tickets: {
    screen: Tickets,
    navigationOptions: {
      title: "Tickets",
      header: null,
      tabBarVisible: false
    }
  }
});

The idea is to add the Tab navigator into Stack navigator and add in this stack any other screens you want to have different navigationOptions to overlap the ones in your Tab.

Link to docs under:

A tab navigator contains a stack and you want to hide the tab bar on specific screens