Fixed hooks issue for useNavigation + added swipeable

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

@@ -5,7 +5,12 @@ import { createDrawerNavigator } from "@react-navigation/drawer";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
+import {
+  StatusBar as rnStatusBar,
+  StyleSheet,
+  View,
+  Button,
+} from "react-native";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -24,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
 import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
 import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
 import ScreenSplash from "../screen-splash/screen-splash.component";
+import { Ionicons } from "@expo/vector-icons";
 
 const JobStack = createStackNavigator();
 const MessagingStack = createStackNavigator();
@@ -42,20 +48,40 @@ const mapDispatchToProps = (dispatch) => ({
   signOutStart: () => dispatch(signOutStart()),
 });
 
-const JobStackNavigator = () => (
-  <JobStack.Navigator>
+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}
     />
-    <JobStack.Screen name="JobDetail" component={ScreenJobDetail} />
+    <JobStack.Screen
+      name="JobDetail"
+      component={ScreenJobDetail}
+      options={({ route }) => ({
+        title:
+          (route.params && route.params.title) ||
+          i18n.t("joblist.labels.detail"),
+      })}
+    />
   </JobStack.Navigator>
 );
 
-const MessagingStackNavigator = () => (
+const MessagingStackNavigator = ({ navigation }) => (
   <MessagingStack.Navigator>
     <MessagingStack.Screen
       name="MessagingList"
@@ -69,7 +95,23 @@ const MessagingStackNavigator = () => (
 );
 
 const BottomTabsNavigator = () => (
-  <BottomTabs.Navigator>
+  <BottomTabs.Navigator
+    screenOptions={({ route }) => ({
+      tabBarIcon: ({ focused, color, size }) => {
+        let iconName;
+        if (route.name === "JobTab") {
+          iconName = "ios-list";
+        } else if (route.name === "MessagingTab") {
+          iconName = "ios-chatboxes";
+        }
+        return <Ionicons name={iconName} size={size} color={color} />;
+      },
+    })}
+    tabBarOptions={{
+      activeTintColor: "dodgerblue",
+      inactiveTintColor: "slategrey",
+    }}
+  >
     <BottomTabs.Screen
       name="JobTab"
       options={{ title: i18n.t("joblist.titles.jobtab") }}
@@ -83,12 +125,14 @@ const BottomTabsNavigator = () => (
   </BottomTabs.Navigator>
 );
 
-const DrawerNavigator = () => (
+const DrawerNavigator = ({ navigation }) => (
   <Drawer.Navigator>
     <Drawer.Screen name="Home" component={BottomTabsNavigator} />
     <Drawer.Screen
       name="Settings"
-      options={{ title: i18n.t("settings.titles.settings") }}
+      options={{
+        title: i18n.t("settings.titles.settings"),
+      }}
       component={ScreenSettingsComponent}
     />
   </Drawer.Navigator>