Fix up main screen navigation.

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,
-  },
-});