TabsNavigator inside StackNavigator - react-native

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;