From 31e32335e907ba7079f21fa18d0d9cd3d46fa6ba Mon Sep 17 00:00:00 2001 From: balzack Date: Sat, 17 Sep 2022 23:24:37 -0700 Subject: [PATCH] added drawer for large screen layouts --- app/mobile/App.js | 1 + app/mobile/babel.config.js | 3 +- app/mobile/index.js | 1 + app/mobile/ios/Podfile.lock | 31 +++++++++++++++ app/mobile/package.json | 2 + app/mobile/src/session/Session.jsx | 34 +++++++++++++++-- app/mobile/src/session/useSession.hook.js | 5 --- app/mobile/yarn.lock | 46 ++++++++++++++++++++++- 8 files changed, 113 insertions(+), 10 deletions(-) diff --git a/app/mobile/App.js b/app/mobile/App.js index f662cc97..9abf22b8 100644 --- a/app/mobile/App.js +++ b/app/mobile/App.js @@ -1,3 +1,4 @@ +import 'react-native-gesture-handler'; import React from 'react'; import { NativeRouter } from "react-router-native"; import { Routes, Route } from 'react-router-dom'; diff --git a/app/mobile/babel.config.js b/app/mobile/babel.config.js index baac9e50..db538eba 100644 --- a/app/mobile/babel.config.js +++ b/app/mobile/babel.config.js @@ -1,6 +1,7 @@ module.exports = function(api) { api.cache(true); return { - presets: ['babel-preset-expo'] + presets: ['babel-preset-expo'], + plugins: ['react-native-reanimated/plugin'], }; }; diff --git a/app/mobile/index.js b/app/mobile/index.js index 1d6e981e..d689463b 100644 --- a/app/mobile/index.js +++ b/app/mobile/index.js @@ -1,3 +1,4 @@ +import 'react-native-gesture-handler'; import { registerRootComponent } from 'expo'; import App from './App'; diff --git a/app/mobile/ios/Podfile.lock b/app/mobile/ios/Podfile.lock index 94ec046b..9e53251d 100644 --- a/app/mobile/ios/Podfile.lock +++ b/app/mobile/ios/Podfile.lock @@ -314,6 +314,33 @@ PODS: - React-perflogger (= 0.69.5) - RNGestureHandler (2.6.1): - React-Core + - RNReanimated (2.10.0): + - DoubleConversion + - FBLazyVector + - FBReactNativeSpec + - glog + - RCT-Folly + - RCTRequired + - RCTTypeSafety + - React-callinvoker + - React-Core + - React-Core/DevSupport + - React-Core/RCTWebSocket + - React-CoreModules + - React-cxxreact + - React-jsi + - React-jsiexecutor + - React-jsinspector + - React-RCTActionSheet + - React-RCTAnimation + - React-RCTBlob + - React-RCTImage + - React-RCTLinking + - React-RCTNetwork + - React-RCTSettings + - React-RCTText + - ReactCommon/turbomodule/core + - Yoga - Yoga (1.14.0) DEPENDENCIES: @@ -360,6 +387,7 @@ DEPENDENCIES: - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNReanimated (from `../node_modules/react-native-reanimated`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -451,6 +479,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" RNGestureHandler: :path: "../node_modules/react-native-gesture-handler" + RNReanimated: + :path: "../node_modules/react-native-reanimated" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -498,6 +528,7 @@ SPEC CHECKSUMS: React-runtimeexecutor: c778439c3c430a5719d027d3c67423b390a221fe ReactCommon: ab1003b81be740fecd82509c370a45b1a7dda0c1 RNGestureHandler: 28ad20bf02257791f7f137b31beef34b9549f54b + RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa Yoga: c2b1f2494060865ac1f27e49639e72371b1205fa PODFILE CHECKSUM: df5a4d8901f42ad69df9f07100579df01b20e7e8 diff --git a/app/mobile/package.json b/app/mobile/package.json index 496ebd5e..4e2c235a 100644 --- a/app/mobile/package.json +++ b/app/mobile/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@react-navigation/bottom-tabs": "^6.4.0", + "@react-navigation/drawer": "^6.5.0", "@react-navigation/native": "^6.0.13", "@react-navigation/stack": "^6.3.0", "expo": "~46.0.9", @@ -20,6 +21,7 @@ "react-native": "0.69.5", "react-native-base64": "^0.2.1", "react-native-gesture-handler": "^2.6.1", + "react-native-reanimated": "^2.10.0", "react-native-safe-area-context": "^4.3.3", "react-native-safe-area-view": "^1.1.1", "react-native-sqlite-storage": "^6.0.1", diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 50db8f15..7a0bc4ac 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -1,6 +1,7 @@ import { View, TouchableOpacity, Text } from 'react-native'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; import Ionicons from '@expo/vector-icons/AntDesign'; @@ -44,10 +45,38 @@ export function Session() { ); } + const Drawer = createDrawerNavigator(); + const CustomDrawerContent = ({ navigation }) => { + return ( + CUSTOM DRAWER + ) + } + const HomeScreen = ({ navigation }) => { + return ( + + navigation.openDrawer()}> + OPEN + + + ) + } + return ( - { state.tabbed && ( + { state.tabbed === false && ( + ({ + headerShown: false, + swipeEnabled: false, + drawerType: 'front', + drawerPosition: 'right', + })} + drawerContent={(props) => }> + + + )} + { state.tabbed === true && ( ({ tabBarStyle: styles.tabBar, @@ -66,8 +95,7 @@ export function Session() { tabBarShowLabel: false, tabBarActiveTintColor: Colors.white, tabBarInactiveTintColor: Colors.disabled, - })} - > + })}> diff --git a/app/mobile/src/session/useSession.hook.js b/app/mobile/src/session/useSession.hook.js index 60daeedc..2c7c90c9 100644 --- a/app/mobile/src/session/useSession.hook.js +++ b/app/mobile/src/session/useSession.hook.js @@ -18,12 +18,7 @@ export function useSession() { } useEffect(() => { - if (dimensions.width > config.tabbedWidth) { updateState({ tabbed: false }); - } - else { - updateState({ tabbed: true }); - } }, [dimensions]); const actions = { diff --git a/app/mobile/yarn.lock b/app/mobile/yarn.lock index 55cd1d37..c7cf242c 100644 --- a/app/mobile/yarn.lock +++ b/app/mobile/yarn.lock @@ -751,6 +751,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.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz" @@ -993,7 +1000,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.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz" integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== @@ -1710,6 +1717,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" @@ -1778,6 +1794,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.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz" @@ -4299,6 +4320,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== + lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz" @@ -5486,6 +5512,19 @@ react-native-gradle-plugin@^0.0.7: resolved "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz" integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g== +react-native-reanimated@^2.10.0: + version "2.10.0" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.10.0.tgz#ed53be66bbb553b5b5e93e93ef4217c87b8c73db" + integrity sha512-jKm3xz5nX7ABtHzzuuLmawP0pFWP77lXNdIC6AWOceBs23OHUaJ29p4prxr/7Sb588GwTbkPsYkDqVFaE3ezNQ== + dependencies: + "@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" + react-native-safe-area-context@^4.3.3: version "4.3.3" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.3.tgz#a0f1e3116ded39efc1b78a46a6d89c71169827e4" @@ -6196,6 +6235,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.npmjs.org/string-width/-/string-width-4.2.3.tgz"