How to make nested StackNavigator inside of TabNavigator with React Navigation

Question

I have React Native app with React Navigation. In my app 3 tabs inside of tabNavigator: CHANNELS, FAVORITES, PROFILE_SCREEN. I need to make a stackNavigator from CHANNELS to another screen. How can i make a stackNavigator for the CHANNELS tab? Which way can i do it? How to make it flow can somebody to help?

import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {
  createStackNavigator,
  createAppContainer,
  createSwitchNavigator,
  createBottomTabNavigator
} from 'react-navigation'
import { ChannelsScreen, AuthScreen, ProfileScreen, FavoritesScreen, AuthLoadingScreen } from './screens'
import { BLUE, PROJECT_FONT } from './constants'

const AuthStack = createStackNavigator({ AUTH_SCREEN: AuthScreen })
const AppStack = createBottomTabNavigator(
  {
    CHANNELS: {
      screen: ChannelsScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-stats" size={30} />,
        tabBarLabel: 'Channels'
      })
    },
    FAVORITES: {
      screen: FavoritesScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-flower" size={30} />,
        tabBarLabel: 'Favorites'
      })
    },
    PROFILE_SCREEN: {
      screen: ProfileScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-body" size={30} />,
        tabBarLabel: 'Profile'
      })
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      lazy: true,
      activeTintColor: BLUE,
      inactiveTintColor: '#586589',
      labelStyle: {
        fontSize: 15,
        fontFamily: PROJECT_FONT,
        fontWeight: 'bold'
      }
    }
  }
)

AppStack.navigationOptions = {
  header: null
}

const AppNavigator = createAppContainer(
  createSwitchNavigator(
    {
      App: AppStack,
      Auth: AuthStack,
      AuthLoading: AuthLoadingScreen
    },
    {
      initialRouteName: 'AuthLoading'
    }
  )
)

export default AppNavigator

Answer 1

For me the solution was to make separate folder for every stack and after export it. If somebody is interested you can check it here: https://github.com/jocoders/reactNativeChannelApp/tree/master/src/screens/ChannelsStack

Answer 2

You're on the right track here. All you need to do is that instead of referencing your tabs to a screen, reference them to a stack navigator.

Refer to this link for more documentation and examples on nested navigations: https://reactnavigation.org/docs/en/tab-based-navigation.html#a-stack-navigator-for-each-tab

Here is how your code would look:

// ...import statements

const AuthStack = createStackNavigator({ AUTH_SCREEN: AuthScreen })

// Declare Stack Navigator for Each Tab
const ChannelsStack = createStackNavigator({ CHANNELS_SCREEN: ChannelsScreen });
const FavoritesStack = createStackNavigator({ FAVORITES_SCREEN: FavoritesScreen });
const ProfileStack = createStackNavigator({ PROFILE_SCREEN: ProfileScreen });



const AppStack = createBottomTabNavigator(
  {
    CHANNELS: {
      screen: ChannelsStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-stats" size={30} />,
        tabBarLabel: 'Channels'
      })
    },
    FAVORITES: {
      screen: FavoritesStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-flower" size={30} />,
        tabBarLabel: 'Favorites'
      })
    },
    PROFILE_SCREEN: {
      screen: ProfileStack,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => <Ionicons style={{ color: tintColor }} name="ios-body" size={30} />,
        tabBarLabel: 'Profile'
      })
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      lazy: true,
      activeTintColor: BLUE,
      inactiveTintColor: '#586589',
      labelStyle: {
        fontSize: 15,
        fontFamily: PROJECT_FONT,
        fontWeight: 'bold'
      }
    }
  }
)

AppStack.navigationOptions = {
  header: null
}

//...rest of code.