Fix up main screen navigation.

App.js

@@ -4,12 +4,7 @@ import AppLoading from "expo-app-loading";
 import * as FileSystem from "expo-file-system";
 import * as Font from "expo-font";
 import React from "react";
-import {
-  SafeAreaView,
-  StatusBar as rnStatusBar,
-  StyleSheet,
-} from "react-native";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import * as Sentry from "sentry-expo";
@@ -60,9 +55,7 @@ export default class App extends React.Component {
       <Provider store={store}>
         <PersistGate persistor={persistor}>
           <ApolloProvider client={client}>
-            <SafeAreaView style={{ flex: 1, backgroundColor: "dodgerblue" }}>
-              <ScreenMainComponent />
-            </SafeAreaView>
+            <ScreenMainComponent />
           </ApolloProvider>
         </PersistGate>
       </Provider>

components/screen-camera/screen-camera.jsx

@@ -1,9 +1,8 @@
-import { Ionicons } from "@expo/vector-icons";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import * as FileSystem from "expo-file-system";
 import React, { useEffect, useRef, useState } from "react";
-import { SafeAreaView, Text, TouchableOpacity, View } from "react-native";
+import { SafeAreaView, Text, View } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -131,9 +130,7 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
   const { flashMode, cameraType, capturing } = state;
 
   return (
-    <SafeAreaView
-      style={{ display: "flex", flex: 1, backgroundColor: "tomato" }}
-    >
+    <SafeAreaView style={{ display: "flex", flex: 1 }}>
       <Camera
         style={{ flex: 1, display: "flex" }}
         type={state.cameraType}
@@ -146,22 +143,6 @@ export function ScreenCamera({ cameraJobId, cameraJob, addPhoto }) {
           }}
         >
           <CameraSelectJob />
-          <TouchableOpacity
-            onPress={() => {
-              navigation.push("MediaCache");
-            }}
-            style={{
-              alignSelf: "flex-start",
-              alignItems: "center",
-              fontSize: 20,
-              fontWeight: "bold",
-            }}
-          >
-            <Ionicons
-              name="ios-photos"
-              style={{ color: "#fff", fontSize: 40 }}
-            />
-          </TouchableOpacity>
 
           <CameraControls
             capturing={capturing}

components/screen-main/screen-main.component.jsx

@@ -3,11 +3,9 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import Dinero from "dinero.js";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -33,6 +31,7 @@ const JobStack = createStackNavigator();
 const CameraStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
 const MediaCacheStack = createStackNavigator();
+const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
 
@@ -48,26 +47,12 @@ const mapDispatchToProps = (dispatch) => ({
   signOutStart: () => dispatch(signOutStart()),
 });
 
-Dinero.globalLocale = "en-CA";
-
-const LeftDrawerButton = (props, navigation) => (
-  <Ionicons
-    {...props}
-    name="ios-menu"
-    size={24}
-    color="dodgerblue"
-    style={{ marginLeft: 20 }}
-    onPress={() => navigation.toggleDrawer()}
-  />
-);
-
 const JobStackNavigator = ({ navigation }) => (
   <JobStack.Navigator initialRouteName="JobList">
     <JobStack.Screen
       name="JobList"
       options={({ route }) => ({
         title: `${i18n.t("joblist.labels.activejobs")}`,
-        headerLeft: (props) => LeftDrawerButton(props, navigation),
       })}
       component={ScreenJobList}
     />
@@ -90,23 +75,17 @@ const CameraStackNavigator = ({ navigation }) => (
       options={{ headerShown: false }}
       component={ScreenCamera}
     />
-    {/* <CameraStack.Screen
-      name="CameraJobSearch"
-      component={ScreenCameraJobSearch}
-    /> */}
-
-    <CameraStack.Screen name="MediaCache" component={ScreenMediaCache} />
   </CameraStack.Navigator>
 );
 
 const MediaCacheStackNavigator = ({ navigation }) => (
-  <CameraStack.Navigator initialRouteName="TabMediaCache">
-    <CameraStack.Screen
+  <MediaCacheStack.Navigator initialRouteName="TabMediaCache">
+    <MediaCacheStack.Screen
       name="MediaCache"
       options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
       component={ScreenMediaCache}
     />
-  </CameraStack.Navigator>
+  </MediaCacheStack.Navigator>
 );
 
 const MessagingStackNavigator = ({ navigation }) => (
@@ -121,6 +100,17 @@ const MessagingStackNavigator = ({ navigation }) => (
     />
   </MessagingStack.Navigator>
 );
+const MoreStackNavigator = ({ navigation }) => (
+  <MoreStack.Navigator>
+    <MoreStack.Screen
+      name="Settings"
+      options={{
+        title: i18n.t("settings.titles.settings"),
+      }}
+      component={ScreenSettingsComponent}
+    />
+  </MoreStack.Navigator>
+);
 
 const BottomTabsNavigator = () => (
   <BottomTabs.Navigator
@@ -162,27 +152,17 @@ const BottomTabsNavigator = () => (
       options={{ title: i18n.t("mediacache.titles.mediacachetab") }}
       component={MediaCacheStackNavigator}
     />
-    {
-      // <BottomTabs.Screen
-      //   name="MessagingTab"
-      //   options={{ title: i18n.t("messaging.titles.messagingtab") }}
-      //   component={MessagingStackNavigator}
-      // />
-    }
-  </BottomTabs.Navigator>
-);
-
-const DrawerNavigator = ({ navigation }) => (
-  <Drawer.Navigator>
-    <Drawer.Screen name="Home" component={BottomTabsNavigator} />
-    <Drawer.Screen
-      name="Settings"
-      options={{
-        title: i18n.t("settings.titles.settings"),
-      }}
-      component={ScreenSettingsComponent}
+    <BottomTabs.Screen
+      name="MessagingTab"
+      options={{ title: i18n.t("messaging.titles.messagingtab") }}
+      component={MessagingStackNavigator}
     />
-  </Drawer.Navigator>
+    <BottomTabs.Screen
+      name="MoreTab"
+      options={{ title: i18n.t("more.titles.moretab") }}
+      component={MoreStackNavigator}
+    />
+  </BottomTabs.Navigator>
 );
 
 export function ScreenMainComponent({
@@ -202,7 +182,7 @@ export function ScreenMainComponent({
         <ScreenSplash />
       ) : currentUser.authorized ? (
         bodyshop ? (
-          <DrawerNavigator />
+          <BottomTabsNavigator />
         ) : (
           <ScreenSplash />
         )
@@ -216,13 +196,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(ScreenMainComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingTop: Platform.OS === "android" ? rnStatusBar.currentHeight : 0,
-  },
-});