Added Drawer navigator & version numbers.

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

@@ -1,11 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 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 i18n from "i18next";
 import moment from "moment";
 import React, { useEffect } from "react";
-import { Button } from "react-native-paper";
+import { View } from "react-native";
+import { Button, Text } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
@@ -26,7 +28,8 @@ import ScreenSettingsComponent from "../screen-settings/screen-settings.componen
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
 
-const JobStack = createStackNavigator();
+const JobsTab = createDrawerNavigator();
+const ActiveJobStack = createStackNavigator();
 const MoreStack = createStackNavigator();
 const BottomTabs = createBottomTabNavigator();
 const MediaBrowserStack = createStackNavigator();
@@ -45,19 +48,33 @@ const mapDispatchToProps = (dispatch) => ({
   setCameraJob: (job) => dispatch(setCameraJob(job)),
 });
 
-const JobStackNavigator = connect(
+const JobsTabNavigator = () => (
+  <JobsTab.Navigator initialRouteName="Home">
+    <JobsTab.Screen name="Home" component={ActiveJobStackNavigator} />
+    <JobsTab.Screen
+      name="Home2"
+      component={() => (
+        <View>
+          <Text>2</Text>
+        </View>
+      )}
+    />
+  </JobsTab.Navigator>
+);
+
+const ActiveJobStackNavigator = connect(
   mapStateToProps,
   mapDispatchToProps
 )(({ setCameraJobId, setCameraJob }) => (
-  <JobStack.Navigator initialRouteName="JobList">
-    <JobStack.Screen
+  <ActiveJobStack.Navigator initialRouteName="JobList">
+    <ActiveJobStack.Screen
       name="JobList"
       options={() => ({
         title: i18n.t("joblist.labels.activejobs"),
       })}
       component={ScreenJobList}
     />
-    <JobStack.Screen
+    <ActiveJobStack.Screen
       name="JobDetail"
       component={ScreenJobDetail}
       options={({ navigation, route }) => ({
@@ -79,7 +96,7 @@ const JobStackNavigator = connect(
         ),
       })}
     />
-  </JobStack.Navigator>
+  </ActiveJobStack.Navigator>
 ));
 
 const MediaBrowserStackNavigator = () => (
@@ -107,15 +124,6 @@ const MoreStackNavigator = () => (
 const BottomTabsNavigator = () => (
   <BottomTabs.Navigator
     screenOptions={({ route }) => ({
-      // tabBarActiveTintColor: "dodgerblue",
-      // tabBarInactiveTintColor: "slategrey",
-      // tabBarStyle: [
-      //   {
-      //     display: "flex",
-      //   },
-      //   null,
-      // ],
-
       // eslint-disable-next-line react/display-name
       tabBarIcon: ({ color, size }) => {
         let iconName;
@@ -137,10 +145,9 @@ const BottomTabsNavigator = () => (
       name="JobTab"
       options={{
         title: i18n.t("joblist.titles.jobtab"),
-
         headerShown: false,
       }}
-      component={JobStackNavigator}
+      component={JobsTabNavigator}
     />
     <BottomTabs.Screen
       name="MediaBrowserTab"