Question on Auth Flow and React Navigation (React Native) - react-native

Question

I’m trying to setup the Auth flow with my app, but I can’t seem to figure it out exactly. Here’s how I’d like the flow to be, but please let me know if you have any repositories that might help for this:
Tabs:
Home
Search
Screens:
AuthLoading
Login
Home
Search
Search
Auth Flow:
App launches, checks for userToken
If userToken, redirect to Home
Screen (With Bottom Tab Bar)
If no userToken, redirect to Login Screen (Login Screen has Facebook OAuth from Expo)
User logins with Facebook and checks firebase If success, redirect to Home Screen (With Bottom Tab Bar) 4. If fail, redirect to Login Screen
router.js
import React from 'react';
import { Platform, StatusBar } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import { FontAwesome } from 'react-native-vector-icons';
import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
export const UnauthenticatedStack = createStackNavigator({
AuthLoading: {
screen: AuthLoadingScreen,
navigationOptions: {
title: 'AuthLoading',
tabBarVisible: false,
header: null,
headerLeft: null,
headerRight: null,
},
},
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login',
tabBarVisible: false,
header: null,
headerLeft: null,
},
},
});
export const AuthenticatedStack = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="home" size={24} color={tintColor} />
),
},
},
Search: {
screen: SearchScreen,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="search" size={24} color={tintColor} />
),
},
},
},
);
export default createSwitchNavigator({
Home: AuthenticatedStack,
Login: UnauthenticatedStack,
},
{
initialRouteName: 'Home'
,
});
App.js
// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';
import firebase from 'firebase';
import { FirebaseAPIKey, authDomain, databaseURL, projectId, messagingSenderId } from './config/config';
import { UnauthenticatedStack, AuthenticatedStack } from './navigation/router';
// Firebase Config
export const firebaseConfig = {
apiKey: FirebaseAPIKey,
authDomain: `${authDomain}`,
databaseURL: `${databaseURL}`,
projectId: `${projectId}`,
// storageBucket: "",
messagingSenderId: `${messagingSenderId}`,
};
console.log(firebaseConfig)
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// React Native: Application
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<UnauthenticatedStack />
</View>
);
}
};
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CA3433',
},
});
AuthLoading.js
import React from 'react';
import { ActivityIndicator, AsyncStorage, StatusBar, StyleSheet, View, Text } from 'react-native';
export default class AuthLoadingScreen extends React.Component {
constructor(props) {
super(props);
this.checkUserToken();
}
async checkUserToken() {
const userToken = await AsyncStorage.getItem('userToken');
// If User Token
if (userToken) {
AsyncStorage.setItem(userToken);
this.props.navigation.navigate('Home');
}
else {
this.props.navigation.navigate('Login');
}
}
// Render any loading content that you like here
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>Checking Authentication</Text>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#CA3433',
justifyContent: 'center',
alignItems: 'center',
},
text: {
justifyContent: 'center',
color: '#fff',
fontSize: 18,
fontWeight: '500',
},
});
Home.js
// Imports: Dependencies
import React from 'react';
import { View, StyleSheet } from 'react-native';
// Imports: Components
import List from '../components/List';
// React Native Screen: Home
export default () => (
<View style={styles.container}>
<List />
</View>
);
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
});
Search.js
// Imports: Dependencies
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
// Imports: Components
// React Native Screen: Search
export default class Search extends Component {
// Render
render() {
return (
<View styles={styles.container}>
<Text>Search</Text>
</View>
)
}
}
// Styles
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

In App.js, do not export firebase config part.
App class should be like that:
export default class App extends React.Component {
componentWillMount() {
const firebaseConfig = {
apiKey: FirebaseAPIKey,
authDomain: `${authDomain}`,
databaseURL: `${databaseURL}`,
projectId: `${projectId}`,
// storageBucket: "",
messagingSenderId: `${messagingSenderId}`,
}
firebase.initializeApp(config);
}
render() {
return (
<View style={styles.container}>
<UnauthenticatedStack />
</View>
)
}
};

Answer 2

Move AuthLoadingScreen to createSwitchNavigator:
const rootNavigator = createSwitchNavigator({
Home: AuthenticatedStack,
Login: UnauthenticatedStack,
AuthLoading: AuthLoadingScreen,
},
{
initialRouteName: 'AuthLoading',
});
export const AppNavigation = createAppContainer(rootNavigator)
App.js
// React Native: Application
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<AppNavigation />
</View>
);
}
};