More tab for ios tabbarbottom.

[rabrenio]

As described here, a tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen. I think this feature is needed, it is the default behavior for ios tabbar.

[JulianKingman]

I believe what you're looking for is attaching an action to a button (such as pressing "more" which opens a DrawerNavigator). This can currently be done with tabBarComponent (as below), but there are several open issues asking for custom actions, so check out those for further info (several referenced here: #1335)

const TavNav = TabNavigator(
  {
    Home: {screen: Home},
    One: {screen: One},
    Two: {screen: Two},
    More: {screen: more},
  },
  {
    tabBarComponent({jumpToIndex, navigation, ...props}) {
      return (
        <TabBarBottom
          {...props}
          navigation={navigation}
          jumpToIndex={(index) => {
            if (index === 3) {
              // or whatever index your menu button is
              navigation.navigate('DrawerOpen');
            } else {
              jumpToIndex(index);
            }
          }}
        />
      );
    },
  },
);

[rabrenio]

@JulianKingman thanks for the response.. Hmmm I don't want a drawer, but I suppose I can create a custom more tab using your solution. It would be great if this would be added as a default feature for this is the default behavior of ios tabbar.

[rabrenio]

@matthamil I have updated the info, thanks.

[kelset]

Pinging OP @rabrenio since this issue has not been active for a while, and it's related to an old version of the lib.

Please let me know if you want this to remain open (does it still happen in the latest version?); if I get no answer in the next 7 days I will close it.

[rabrenio]

Hello @kelset , I still need this ticket open until this feature is added. I would really love this feature, thanks in advance 👍

[brentvatne]

please re-post to https://react-navigation.canny.io/feature-requests if this is important for you. re-organizing issues to focus on bug reports here and feature requests on canny. thanks!