CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Eric
Eric

Reputation: 2128

TabNavigator within TabNavigator

Using react-native and react-navigation, how can I make one of my Tabs an additional TabNavigator, but in a way that it covers up the existing tabs?

Following is the general outline of a navigator configuration I'd like. However, The "AddNavigator" shows up as tabs on top of my existing tabs. But I'd like them to cover up those tabs.

export const AddNavigator = TabNavigator({
  AddPhoto: { screen: AddPhoto },
  AddText: { screen: AddText },
}, { mode: 'modal', headerMode: 'none' });

export const Tabs = TabNavigator({
  TabHome: { screen: TabHome },
  TabAdd: { screen: AddNavigator },
  TabProfile: { screen: TabProfile }
});

export const Root = StackNavigator({
  SplashScreen: { screen: SplashScreen },
  LoginScreen: { screen: LoginScreen },
  SignupScreen: { screen: SignupScreen },

  Tabs: { screen: Tabs },

}, { mode: 'modal', headerMode: 'none' });

As a reference, consider the Instagram app. When you click the tab in the middle (to add a photo), you get an additional tab navigator asking to choose "Gallery, Photo, or Video" Screenshot

Upvotes: 1

Views: 143

Answers (1)

Val
Val

Reputation: 22807

To simulate your reference of instagram, you can do this:

export const Tabs = TabNavigator({
    TabHome: { screen: TabHome },
    TabAdd: {
        screen: AddNavigator,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    TabProfile: { screen: TabProfile }
});

enter image description here

Upvotes: 1

Related Questions