add navigation to react native app - react-native

Question

I an trying my hands on react native apps.
I have created an app which as of now has a 3 screen.
Landing Screen, Home Screen & Settings Screen. What I want is that user lands on Landing Screen and there two tabs (Home & Settings) are displayed.
What I have achieved is that user lands on Home Screens and both tabs are displayed but I am unable to make Landing Screen as default page having tabs.
Sample application is available # snack.expo.io
Any help will be appreciated.
App.js
import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation'; // 1.0.0-beta.27
import { Icon } from 'react-native-elements'; // 0.19.0
import "#expo/vector-icons"; // 6.3.1
class LandingScreen extends React.Component {
static navigationOptions = {
title: "Landing Screen",
tabBarLabel: "Landing",
tabBarIcon: ({ tintColor }) => <Icon name="menu" size={35} color={tintColor} />,
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Landing!</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
title: "Home Screen",
tabBarLabel: "Home",
tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: "Settings Screen",
tabBarLabel: "Settings",
tabBarIcon: ({ tintColor }) => <Icon name="loyalty" size={35} color={tintColor} />,
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const MainTabNav = TabNavigator(
{
Home: {
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
},
},
{
tabBarOptions:
{
showIcon: true
}
}
);
const MainStackNav = StackNavigator(
{
Function: {
screen: MainTabNav,
},
Landing: {
screen: LandingScreen,
},
}
);
export default MainStackNav;

Answer 1

I can recommend you this medium article that explain how to setup a very common authentication flow for a react-native app.
It implements two different StackNavigator.
One for the guest, one when you're logged in.
Then you'll find a TabNavigator in which you can also nest others stacknavigator.