add component Side Drawer

README.md

@@ -61,6 +61,7 @@ This section will show any installed modules you add from the Storyboard Modules
 - [react-native-2fa](modules/2fa)
 - [react-native-maps](modules/maps)
 - [react-native-onboarding](modules/onboarding)
+- [react-native-side-drawer](modules/side-drawer)
 
 # Getting started: Frontend
 

modules/side-drawer/README.md

@@ -0,0 +1,72 @@
+# Side Drawer React native specs
+
+## Module description
+
+This is a React Native based module that renders a navigation drawer which can be opened and closed via gestures.
+
+- Navigation between screens
+- Open and close drawer with gestures.
+
+![image](https://github.com/saad-abid-crowdbotics/modules/assets/120275623/dae04e08-c117-4b0c-b075-224967b247dd)
+
+## ## Features
+
+ - [ ] This module includes environment variables.
+ - [x] This module requires manual configurations.
+ - [x] This module can be configured with module options.
+ - [ ] This module requires manual Android setup.
+ - [ ] This module requires manual iOS setup.
+
+## ## 3rd party setup
+
+No 3rd party account required.
+
+## Dependencies
+
+
+Dependencies used:
+- @react-navigation/drawer - https://www.npmjs.com/package/@react-navigation/drawer?activeTab=versions
+- prop-types - https://www.npmjs.com/package/prop-types
+
+## ## Module Options
+
+### Global Configs
+
+No global configs required.
+
+### Local Configs
+
+In `modules/side-drawer/options.js` provide the `screenSet` and `drawerOptions`.
+
+```javascript
+const screenSet = [
+    {
+        name: 'Home',
+        component: HomeScreen,
+        options: {}
+    },
+    ...
+]
+
+const drawerOptions = {
+	initialRouteName : 'Basket',
+	drawerType : 'front',
+	screenOptions: {},
+	drawerPosition : 'left',
+	drawerStyle : {},
+	overlayColor : 'transparent',
+	hideStatusBar : false,
+	edgeWidth : 300,
+	keyboardDismissMode : 'on-drag',
+	minSwipeDistance : 300,
+}
+```
+
+### Android setup
+
+No android setup required.
+
+
+### iOS setup
+
+No iOS setup required.

modules/side-drawer/index.js

@@ -0,0 +1,78 @@
+import React, { useContext } from "react";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { OptionsContext } from "@options";
+import PropTypes from "prop-types";
+
+const Drawer = createDrawerNavigator();
+
+const SideDrawer = ({
+  screenSet,
+  initialRouteName = "",
+  drawerType = "front",
+  screenOptions,
+  drawerPosition = "left",
+  drawerStyle = {},
+  overlayColor = "transparent",
+  hideStatusBar = false,
+  edgeWidth = 300,
+  keyboardDismissMode = "on-drag",
+  minSwipeDistance = 300
+
+}) => {
+  const options = useContext(OptionsContext);
+  const { drawerOptions } = options;
+
+  return (
+    <Drawer.Navigator
+      initialRouteName={initialRouteName || drawerOptions.initialRouteName}
+      drawerType={drawerType || drawerOptions.drawerType}
+      screenOptions={screenOptions || drawerOptions.screenOptions}
+      drawerPosition={drawerPosition || drawerOptions.drawerPosition}
+      drawerStyle={drawerStyle || drawerOptions.drawerStyle}
+      overlayColor={overlayColor || drawerOptions.overlayColor}
+      hideStatusBar={hideStatusBar || drawerOptions.hideStatusBar}
+      edgeWidth={edgeWidth || drawerOptions.edgeWidth}
+      keyboardDismissMode={keyboardDismissMode || drawerOptions.keyboardDismissMode}
+      minSwipeDistance={minSwipeDistance || drawerOptions.minSwipeDistance}
+    >
+      {options.screenSet
+        ? options.screenSet.map((screen, index) => (
+          <Drawer.Screen
+            key={index}
+            name={screen?.name}
+            component={screen?.component}
+            options={screen?.options}
+          />
+        ))
+        : screenSet.map((screen, index) => (
+          <Drawer.Screen
+            key={index}
+            name={screen?.name}
+            component={screen?.component}
+            options={screen?.options}
+          />
+        ))
+      }
+
+    </Drawer.Navigator>
+  );
+};
+
+SideDrawer.propTypes = {
+  screenSet: PropTypes.array,
+  initialRouteName: PropTypes.string,
+  drawerType: PropTypes.string,
+  screenOptions: PropTypes.object,
+  drawerPosition: PropTypes.string,
+  drawerStyle: PropTypes.object,
+  overlayColor: PropTypes.string,
+  hideStatusBar: PropTypes.bool,
+  edgeWidth: PropTypes.number,
+  keyboardDismissMode: PropTypes.string,
+  minSwipeDistance: PropTypes.number
+};
+
+export default {
+  title: "SideDrawer",
+  navigator: SideDrawer
+};

modules/side-drawer/options.js

@@ -0,0 +1,20 @@
+
+const screenSet = [];
+
+const drawerOptions = {
+  initialRouteName: "",
+  drawerType: "",
+  screenOptions: {},
+  drawerPosition: "",
+  drawerStyle: {},
+  overlayColor: "",
+  hideStatusBar: false,
+  edgeWidth: 0,
+  keyboardDismissMode: "",
+  minSwipeDistance: 0
+};
+
+export default {
+  screenSet: screenSet,
+  drawerOptions: drawerOptions
+};

modules/side-drawer/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@modules/side-drawer",
+	"version": "1.0.0",
+	"description": "Side Drawer module",
+	"private": true,
+	"main": "index.js",
+	"author": "Crowdbotics",
+	"license": "ISC",
+    "dependencies": {},
+	"x-dependencies": {
+		"@react-navigation/drawer": "^5.12.9",
+		"prop-types" : "15.8.1"
+	}
+}

package.json

@@ -17,7 +17,9 @@
     "@modules/2fa": "file:./modules/2fa/",
     "@modules/maps": "file:./modules/maps/",
     "@modules/onboarding": "file:./modules/onboarding/",
+    "@modules/side-drawer": "file:./modules/side-drawer/",
     "@react-native-masked-view/masked-view": "^0.2.9",
+    "@react-navigation/drawer": "^5.12.9",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
     "@reduxjs/toolkit": "^1.9.5",

yarn.lock

@@ -1464,12 +1464,15 @@
 "@modules/maps@file:./modules/maps":
   version "1.0.0"
 
-"@modules/onboarding@file:./modules/onboarding/":
+"@modules/onboarding@file:./modules/onboarding":
   version "1.0.0"
   dependencies:
     prop-types "^15.8.1"
     react-native-app-intro-slider "^4.0.4"
 
+"@modules/side-drawer@file:./modules/side-drawer/":
+  version "1.0.0"
+
 "@nicolo-ribaudo/[email protected]":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -1716,6 +1719,14 @@
     react-is "^16.13.0"
     use-latest-callback "^0.1.5"
 
+"@react-navigation/drawer@^5.12.9":
+  version "5.12.9"
+  resolved "https://registry.yarnpkg.com/@react-navigation/drawer/-/drawer-5.12.9.tgz#b07d7391a6fea4ce07cd7a7421fdbaea37cdbb46"
+  integrity sha512-SYb2BCEAn+BiEwC6WBfCzs1VlWD+ZdQbxmsim6vo1o+ndPW2e+kiq7FXKRs0vUXhQRZVl2oOB3vBn0c3YCllQg==
+  dependencies:
+    color "^3.1.3"
+    react-native-iphone-x-helper "^1.3.0"
+
 "@react-navigation/elements@^1.3.17":
   version "1.3.17"
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.17.tgz#9cb95765940f2841916fc71686598c22a3e4067e"
@@ -3206,7 +3217,7 @@ color-string@^1.6.0, color-string@^1.9.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.1.2:
+color@^3.1.2, color@^3.1.3:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
   integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
@@ -7261,6 +7272,11 @@ react-native-gradle-plugin@^0.71.17:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz#cf780a27270f0a32dca8184eff91555d7627dd00"
   integrity sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA==
 
+react-native-iphone-x-helper@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
+  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
+
 [email protected]:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/react-native-maps-directions/-/react-native-maps-directions-1.8.0.tgz#ced452efeb153e54dfb9315480b0ae9539dfbcc7"