feat: add custom drawer and drawer navigation

geeekgod · Oct 6, 2022 · 6197c67 · 6197c67
1 parent e8ba498
commit 6197c67
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 15 deletions.
diff --git a/app/components/CustomDrawer/index.js b/app/components/CustomDrawer/index.js
@@ -0,0 +1,75 @@
+import React, { useContext } from "react";
+import { View, Text, TouchableOpacity, Image } from "react-native";
+import {
+  DrawerContentScrollView,
+  DrawerItemList,
+} from "@react-navigation/drawer";
+import { Ionicons } from "@expo/vector-icons";
+import { AuthContext } from "../../context/AuthContext";
+
+const CustomDrawer = (props) => {
+
+  const { user, logout } = useContext(AuthContext)
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "#244757" }}>
+      <DrawerContentScrollView
+        {...props}
+      >
+        <View style={{ padding: 20 }}>
+          <View style={{ marginBottom: 10, alignItems: "center" }}>
+
+            <Image
+              source={{ uri: user.imageUrl }}
+              style={{
+                width: 100,
+                height: 100,
+                resizeMode: "contain",
+                borderRadius: 50,
+                backgroundColor: "transparent",
+              }}
+            />
+
+          </View>
+          <Text
+            style={{
+              color: "#fff",
+              fontSize: 18,
+              fontFamily: "Poppins-Medium",
+              marginBottom: 5,
+              textAlign: "center"
+            }}
+          >
+            {user.name}
+          </Text>
+        </View>
+        <View style={{ flex: 1, paddingTop: 10 }}>
+          <DrawerItemList {...props} />
+        </View>
+      </DrawerContentScrollView>
+      <View style={{ padding: 20, borderTopWidth: 1, borderTopColor: "#ccc" }}>
+        <TouchableOpacity
+          activeOpacity={0.6}
+          onPress={() => logout()}
+          style={{ paddingVertical: 10 }}
+        >
+          <View style={{ flexDirection: "row", alignItems: "center" }}>
+            <Ionicons name="exit-outline" size={22} color='#fff' />
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: "Poppins-Light",
+                marginLeft: 10,
+                color: "#fff"
+              }}
+            >
+              Log Out
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default CustomDrawer;
diff --git a/app/context/AuthContext/index.js b/app/context/AuthContext/index.js
@@ -114,7 +114,7 @@ const AuthContextProvider = ({ children }) => {
   return (
     <AuthContext.Provider
       onLayout={onLayoutRootView}
-      value={{ user, accessToken, headers, isAuth, storeCredentials, getUser }}
+      value={{ user, accessToken, headers, isAuth, storeCredentials, getUser, logout }}
     >
       {children}
     </AuthContext.Provider>

diff --git a/app/navigation/DrawerNavigator/index.js b/app/navigation/DrawerNavigator/index.js
@@ -0,0 +1,55 @@
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import CustomDrawer from '../../components/CustomDrawer';
+import Home from '../../screens/Home';
+import PostRequest from '../../screens/PostRequest';
+import { Ionicons } from "@expo/vector-icons";
+
+const Drawer = createDrawerNavigator();
+
+const DrawerNavigator = () => {
+  return (
+    <Drawer.Navigator
+      initialRouteName='Home'
+      drawerContent={(props) => <CustomDrawer {...props} />}
+      screenOptions={{
+        drawerActiveBackgroundColor: "rgba(277,277,277,0.1)",
+        drawerActiveTintColor: "#fff",
+        drawerItemStyle: {
+          paddingVertical: 2,
+          paddingHorizontal: 10,
+          borderRadius: 40
+        },
+        drawerContentContainerStyle: {
+          backgroundColor: "#244757"
+        },
+        drawerInactiveTintColor: "#ffff",
+        drawerLabelStyle: {
+          marginLeft: -15,
+          fontFamily: "Poppins-Regular",
+          fontSize: 16,
+        }
+      }}
+    >
+      <Drawer.Screen name="Home"
+        options={{
+          // headerShown: false,
+          drawerLabel: "Home",
+          drawerIcon: ({ color }) => (
+            <Ionicons name="home-outline" size={25} color={color} />
+          ),
+        }}
+        component={Home} />
+      <Drawer.Screen name="PostRequest"
+        options={{
+          // headerShown: false,
+          drawerLabel: "Post Request",
+          drawerIcon: ({ color }) => (
+            <Ionicons name="add-circle-outline" size={25} color={color} />
+          ),
+        }}
+        component={PostRequest} />
+    </Drawer.Navigator>
+  );
+}
+
+export default DrawerNavigator
diff --git a/app/navigation/StackNavigator/index.js b/app/navigation/StackNavigator/index.js
@@ -3,10 +3,10 @@ import { createStackNavigator, TransitionPresets } from '@react-navigation/stack
 import { useContext, useEffect } from 'react';
 import { AuthContext } from '../../context/AuthContext';
 import CreateProfile from '../../screens/CreateProfile';
-import Home from '../../screens/Home';
 import Login from '../../screens/Login';
 import Walkthrough from '../../screens/Walkthrough';
 import Welcome from '../../screens/Welcome';
+import DrawerNavigator from '../DrawerNavigator';
 
 const Stack = createStackNavigator();
 
@@ -19,7 +19,7 @@ const StackNavigator = () => {
 
     if (user.isProfile === false) return "CreateProfile"
 
-    return "Home"
+    return "HomeNavigation"
   }
 
   return (
@@ -40,7 +40,7 @@ const StackNavigator = () => {
         isAuth &&
         <>
           <Stack.Screen name="CreateProfile" component={CreateProfile} />
-          <Stack.Screen name="Home" component={Home} />
+          <Stack.Screen name="HomeNavigation" component={DrawerNavigator} />
         </>
       }
     </Stack.Navigator>

diff --git a/app/screens/CreateProfile/index.js b/app/screens/CreateProfile/index.js
@@ -118,7 +118,7 @@ const CreateProfile = () => {
         storeProfile(res.data);
         setSubmitted(false)
         getUser(accessToken);
-        navigation.navigate("Home")
+        navigation.navigate("HomeNavigation")
       }).catch((err) => {
         console.log(err);
       })

diff --git a/app/screens/Login/index.js b/app/screens/Login/index.js
@@ -34,7 +34,7 @@ const Login = () => {
       }).then((res) => {
         storeCredentials(res.data);
         if(res.data.isProfile){
-          setTimeout(() => navigation.navigate("Home"), 200)
+          setTimeout(() => navigation.navigate("HomeNavigation"), 200)
         }
         else{
           setTimeout(() => navigation.navigate("CreateProfile"), 200)

diff --git a/app/screens/PostRequest/index.js b/app/screens/PostRequest/index.js
@@ -0,0 +1,36 @@
+import React, { useContext, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { heightScreen, widthScreen } from '../../utils/layout';
+import { Box, Button, CloseIcon, HStack, Icon, IconButton, Text, VStack } from 'native-base';
+import { AntDesign } from '@expo/vector-icons';
+import { AuthContext } from '../../context/AuthContext';
+import { useNavigation } from '@react-navigation/native';
+
+
+
+const PostRequest = () => {
+
+  const { user } = useContext(AuthContext)
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.container}>
+      <Text>PostRequest</Text>
+
+    </View>
+  );
+}
+
+export default PostRequest
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: widthScreen,
+    backgroundColor: "#fff",
+    paddingHorizontal: heightScreen > 800 ? 32 : 26,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+  },
+});
diff --git a/babel.config.js b/babel.config.js
@@ -2,5 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
   };
 };
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.10",
+    "@react-navigation/drawer": "^6.5.0",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/stack": "^6.3.1",
     "axios": "^0.27.2",
@@ -23,8 +24,9 @@
     "expo-status-bar": "~1.4.0",
     "native-base": "^3.4.16",
     "react": "18.0.0",
-    "react-native": "0.69.5",
+    "react-native": "0.69.6",
     "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
     "react-native-safe-area-context": "4.3.1",
     "react-native-screens": "~3.15.0",
     "react-native-svg": "12.3.0",

diff --git a/yarn.lock b/yarn.lock
@@ -359,7 +359,7 @@
     "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-default-from" "^7.18.6"
 
-"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+"@babel/plugin-proposal-export-namespace-from@^7.17.12", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
   integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
@@ -766,6 +766,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-object-assign@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.18.6.tgz#7830b4b6f83e1374a5afb9f6111bcfaea872cdd2"
+  integrity sha512-mQisZ3JfqWh2gVXvfqYCAAyRs6+7oev+myBsTwW5RnPhYXOTuCEw2oe3YgxlXMViXUS53lG8koulI7mJ+8JE+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
@@ -1008,7 +1015,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.13.0":
+"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
   integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
@@ -2197,6 +2204,15 @@
     react-is "^16.13.0"
     use-latest-callback "^0.1.5"
 
+"@react-navigation/drawer@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-6.5.0.tgz#6f73a04deca2ce046626a60d9a59b11e8cc97167"
+  integrity sha512-ma3qPjAfbwF07xd1w1gaWdcvYWmT4F+Z098q2J7XGbHw8yTGQYiNTnD1NMKerXwxM24vui2tMuFHA54F1rIvHQ==
+  dependencies:
+    "@react-navigation/elements" "^1.3.6"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@react-navigation/elements@^1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.6.tgz#fa700318528db93f05144b1be4b691b9c1dd1abe"
@@ -2716,6 +2732,11 @@
   resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
   integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
 
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -6638,7 +6659,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-promise@^8.0.3:
+promise@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.2.0.tgz#a1f6280ab67457fbfc8aad2b198c9497e9e5c806"
   integrity sha512-+CMAlLHqwRYwBMXKCP+o8ns7DN+xHDUiI+0nArsiJ9y+kJVPLFxEaSw6Ha9s9H0tftxg2Yzl25wqj9G7m5wLZg==
@@ -6813,6 +6834,20 @@ react-native-keyboard-aware-scroll-view@^0.9.5:
     prop-types "^15.6.2"
     react-native-iphone-x-helper "^1.0.3"
 
+react-native-reanimated@~2.9.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1"
+  integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg==
+  dependencies:
+    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
+    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/preset-typescript" "^7.16.7"
+    "@types/invariant" "^2.2.35"
+    invariant "^2.2.4"
+    lodash.isequal "^4.5.0"
+    setimmediate "^1.0.5"
+    string-hash-64 "^1.0.3"
+
 [email protected]:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"
@@ -6843,10 +6878,10 @@ [email protected]:
     css-select "^4.2.1"
     css-tree "^1.0.0-alpha.39"
 
-[email protected].5:
-  version "0.69.5"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.5.tgz#959142bfef21beed837160b54aa17313f5e1898f"
-  integrity sha512-4Psrj1nDMLQjBXVH8n3UikzOHQc8+sa6NbxZQR0XKtpx8uC3HiJBgX+/FIum/RWxfi5J/Dt/+A2gLGmq2Hps8g==
+[email protected].6:
+  version "0.69.6"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.6.tgz#cdd1a5757d902b91b165c28fdda4e518ed6f683a"
+  integrity sha512-wwXpqM+12kdEYdBZCJUb5SBu95CzgejrwFeYJ78RzHZV/Sj6DBRekbsHGrDDsY4R25QXALQxy4DQYQCObVvWjA==
   dependencies:
     "@jest/create-cache-key-function" "^27.0.1"
     "@react-native-community/cli" "^8.0.4"
@@ -6869,7 +6904,7 @@ [email protected]:
     mkdirp "^0.5.1"
     nullthrows "^1.1.1"
     pretty-format "^26.5.2"
-    promise "^8.0.3"
+    promise "^8.2.0"
     react-devtools-core "4.24.0"
     react-native-codegen "^0.69.2"
     react-native-gradle-plugin "^0.0.7"
@@ -7530,6 +7565,11 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
+string-hash-64@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322"
+  integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==
+
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"