Refactor drawer navigation

App.js

@@ -1,33 +1,24 @@
 import React from "react";
-import { StyleSheet } from "react-native";
 import { Provider as PaperProvider } from "react-native-paper";
 import AppContainer from "./navigation/AppNavigator";
+import { theme } from "./constants/Theme";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
 
+// TODO: Check out how to pass a theme to PaperProvider:
+// https://github.com/callstack/react-native-paper-login-template/blob/master/App.tsx
+// <Provider theme={theme}>
 
 export default class App extends React.Component {
   render() {
     return (
-      <PaperProvider>
+      <PaperProvider
+        settings={{
+          icon: props => <FontAwesome5 name={props.icon} {...props} />
+        }}
+        theme={theme}
+      >
         <AppContainer />
       </PaperProvider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  fab: {
-    position: "absolute",
-    margin: 16,
-    right: 0,
-    bottom: 0
-  },
-  safeAreaViewContainer: {
-    flex: 1
-  },
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-});

components/DrawerButton.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { FAB } from "react-native-paper";
+
+const DrawerButton = props => (
+  <FAB
+    {...props}
+    style={styles.fab}
+    small
+    icon="ellipsis-h"
+  />
+);
+
+const styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    margin: 16,
+    left: 10,
+    top: 30
+  }
+});
+
+export default DrawerButton;

constants/Theme.js

@@ -0,0 +1,11 @@
+import { DefaultTheme } from "react-native-paper";
+
+export const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: "#600EE6",
+    secondary: "#414757",
+    error: "#f13a59"
+  }
+};

navigation/AppNavigator.js

@@ -1,52 +1,9 @@
 import React from 'react';
 import {
-  SafeAreaView,
   createAppContainer,
-  createDrawerNavigator,
 } from "react-navigation";
-import { ScrollView } from 'react-native';
-import { Drawer } from "react-native-paper";
 
-import HomeScreen from "../screens/HomeScreen";
-import RoutesScreen from "../screens/RoutesScreen";
-import SignInScreen from "../screens/SignInScreen";
-import SettingsScreen from '../screens/SettingsScreen';
+import MenuDrawerNavigator from './MenuDrawerNavigator.js';
 
-const Menu = createDrawerNavigator(
-  {
-    Home: { screen: HomeScreen },
-    Settings: { screen: SettingsScreen },
-    SignIn: { screen: SignInScreen },
-    Routes: { screen: RoutesScreen }
-  },
-  {
-    contentComponent: props => (
-      <ScrollView>
-        <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
-          <Drawer.Item
-            label="Map"
-            active="true"
-            onPress={() => props.navigation.navigate("Home")}
-          />
-          <Drawer.Item
-            label="Settings"
-            active="true"
-            onPress={() => props.navigation.navigate("Settings")}
-          />
-          <Drawer.Item
-            label="SignIn"
-            active="true"
-            onPress={() => props.navigation.navigate("SignIn")}
-          />
-          <Drawer.Item
-            label="Routes"
-            active="true"
-            onPress={() => props.navigation.navigate("Routes")}
-          />
-        </SafeAreaView>
-      </ScrollView>
-    )
-  }
-);
 
-export default createAppContainer(Menu);
+export default createAppContainer(MenuDrawerNavigator);

navigation/AuthNavigator.js

@@ -0,0 +1,25 @@
+import { createAppContainer, createSwitchNavigator } from "react-navigation";
+import { createStackNavigator } from "react-navigation-stack";
+
+import HomeScreen from "../screens/HomeScreen"
+import SignInScreen from "../screens/SignInScreen"
+import AuthLoadingScreen from "../screens/AuthLoadingScreen"
+
+// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
+// goes here.
+
+const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
+const AuthStack = createStackNavigator({ SignIn: SignInScreen });
+
+export default createAppContainer(
+  createSwitchNavigator(
+    {
+      AuthLoading: AuthLoadingScreen,
+      App: AppStack,
+      Auth: AuthStack
+    },
+    {
+      initialRouteName: "AuthLoading"
+    }
+  )
+);

navigation/MenuDrawerNavigator.js

@@ -0,0 +1,52 @@
+import React from "react";
+
+import {
+  SafeAreaView,
+  createDrawerNavigator
+} from "react-navigation";
+import { ScrollView } from "react-native";
+import { Drawer } from "react-native-paper";
+
+import HomeScreen from "../screens/HomeScreen";
+import RoutesScreen from "../screens/RoutesScreen";
+import SignInScreen from "../screens/SignInScreen";
+import SettingsScreen from "../screens/SettingsScreen";
+
+
+const MenuDrawerNavigator = createDrawerNavigator(
+  {
+    Home: { screen: HomeScreen },
+    Settings: { screen: SettingsScreen },
+    SignIn: { screen: SignInScreen },
+    Routes: { screen: RoutesScreen }
+  },
+  {
+    contentComponent: props => (
+      <ScrollView>
+        <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
+          <Drawer.Item
+            label="Map"
+            active="true"
+            onPress={() => props.navigation.navigate("Home")}
+          />
+          <Drawer.Item
+            label="Settings"
+            active="true"
+            onPress={() => props.navigation.navigate("Settings")}
+          />
+          <Drawer.Item
+            label="Sign In"
+            active="true"
+            onPress={() => props.navigation.navigate("SignIn")}
+          />
+          <Drawer.Item
+            label="Routes"
+            active="true"
+            onPress={() => props.navigation.navigate("Routes")}
+          />
+        </SafeAreaView>
+      </ScrollView>
+    )
+  }
+);
+export default MenuDrawerNavigator;

screens/AuthLoadingScreen.js

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  AsyncStorage,
+  StatusBar,
+  StyleSheet,
+  View
+} from "react-native";
+
+class AuthLoadingScreen extends React.Component {
+  componentDidMount() {
+    this._bootstrapAsync();
+  }
+
+  // Fetch the token from storage then navigate to our appropriate place
+  _bootstrapAsync = async () => {
+    const userToken = await AsyncStorage.getItem("userToken");
+
+    // This will switch to the App screen or Auth screen and this loading
+    // screen will be unmounted and thrown away.
+    this.props.navigation.navigate(userToken ? "App" : "Auth");
+  };
+
+  // Render any loading content that you like here
+  render() {
+    return (
+      <View>
+        <ActivityIndicator />
+        <StatusBar barStyle="default" />
+      </View>
+    );
+  }
+}
+
+export default AuthLoadingScreen;