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.

Answer 2

Yes you can nest StackNavigator inside TabNavigator

Visit:- Stack Navigator for each Tab

    import * as React from 'react';
    import { Button, Text, View } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

    function DetailsScreen() {
      return (
       /* content */
      );
    }

    function HomeScreen({ navigation }) {
      return (
       /* content */
      );
    }

    function SettingsScreen({ navigation }) {
      return (
       /* content */
      );
    }

    const HomeStack = createStackNavigator();

    function HomeStackScreen() {
      return (
        <HomeStack.Navigator>
          <HomeStack.Screen name="Home" component={HomeScreen} />
          <HomeStack.Screen name="Details" component={DetailsScreen} />
        </HomeStack.Navigator>
      );
    }

    const SettingsStack = createStackNavigator();

    function SettingsStackScreen() {
      return (
        <SettingsStack.Navigator>
          <SettingsStack.Screen name="Settings" component={SettingsScreen} />
          <SettingsStack.Screen name="Details" component={DetailsScreen} />
        </SettingsStack.Navigator>
      );
    }

    const Tab = createBottomTabNavigator();

    export default function App() {
      return (
        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Settings" component={SettingsStackScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }