Is a StackNavigator inside TabNavigator possible?

Question

I have created a custom tab navigator using createMaterialTopTabNavigator but inside one of the tabs I would like to create a StackNavigator. Is this possible?

I have found lots of examples of Tabs nested inside a Stack or Drawer but not an example of a Stack inside a Tab!

In essence I want to have a few buttons on one of the Tab Screens that navigate to some other screens but I don't want to navigate out of the Tab. (the initial Tab is always visible/selected)- just that you can click on a button and go to another screen and then back.

TabNavigator: 
 - Settings Screen (Tab 1)
       -About Us (Button when clicked opens up the About Us Screen)
       -Account Settings (Button when clicked opens up the About Us Screen)
       -Contact Us (Button when clicked opens up the About Us Screen)
 - Search Screen (Tab 2)
 - Profile Screen (Tab 3)

Any suggestions on if they is possible would be greatly appreciated! :)

Answer 1

Yes you can do that

You can nest StackNavigator inside TabNavigator by doing something similar to this -

import { TabNavigator, StackNavigator } from 'react-navigation'

export const TabNavigator = TabNavigator({
    SettingsScreenStack: { screen: SettingsScreenStack },
    SearchScreen: { screen: SearchScreen },
    ProfileScreen: { screen: ProfileScreen },
  }, {
    order: ['SettingsScreenStack', 'SearchScreen', 'ProfileScreen'],
    initialRouteName: 'SettingsScreenStack',
});

export const SettingsScreenStack = StackNavigator({
    AboutUsScreen: { screen: AboutUsScreen },
    AccountSettingsScreen: { screen: AccountSettingsScreen },
    ContactUsScreen: { screen: ContactUsScreen },
  }, {
    initialRoute: 'AboutUsScreen',
})

...

Hope it helped.