TabsNavigator inside StackNavigator

Question

I'm using React-Navigation and I have a StackNavigator, this is the app.js with the Stack + Tabs Navigator:

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       title: "Home",
     }),
  },
});

const TabsNav = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({navigation})=>({
      title: "Home",
    }),
  },
  Friends: {
    screen: FriendsScreen,
    navigationOptions: ({navigation})=>({
      title: "My Friends",
    }),
  },
});
export default Stylelist;

I want to have 2 tabs inside HomeScreen, one is Home itself and the other is FriendsScreen, How can I do that? I tried looking in reactnavigation.org but couldn't understand how to do it.

Thanks in advance!

Answer 1

You can use TabNavigator as screen for StackNavigator in order to nest.

const Stylelist = StackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  Register: {
    screen: RegisterScreen,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  Home: {
    screen: TabNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({
          title: 'Home',
        }),
      },
      Friends: {
        screen: FriendsScreen,
        navigationOptions: ({ navigation }) => ({
          title: 'My Friends',
        }),
      },
    }),
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
    }),
  },
});

export default Stylelist;