martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added drawer for large screen layouts

Browse Source
This commit is contained in:
balzack 2022-09-17 23:24:37 -07:00
parent 74589ce5ad
commit 31e32335e9
8 changed files with 113 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/mobile/App.js
View File

@ -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';

3
app/mobile/babel.config.js
View File

@ -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'],
};
};

1
app/mobile/index.js
View File

@ -1,3 +1,4 @@
import 'react-native-gesture-handler';
import { registerRootComponent } from 'expo';
import App from './App';

31
app/mobile/ios/Podfile.lock
View File

@ -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

2
app/mobile/package.json
View File

@ -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",

34
app/mobile/src/session/Session.jsx
View File

@ -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 (
<SafeAreaView><Text>CUSTOM DRAWER</Text></SafeAreaView>
)
}
const HomeScreen = ({ navigation }) => {
return (
<SafeAreaView>
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<Text>OPEN</Text>
</TouchableOpacity>
</SafeAreaView>
)
}
return (
<SafeAreaProvider>
<NavigationContainer>
{ state.tabbed && (
{ state.tabbed === false && (
<Drawer.Navigator
screenOptions={({ route }) => ({
headerShown: false,
swipeEnabled: false,
drawerType: 'front',
drawerPosition: 'right',
})}
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>
)}
{ state.tabbed === true && (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarStyle: styles.tabBar,
@ -66,8 +95,7 @@ export function Session() {
tabBarShowLabel: false,
tabBarActiveTintColor: Colors.white,
tabBarInactiveTintColor: Colors.disabled,
})}
>
})}>
<Tab.Screen name="Conversation" component={ConversationStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Contacts" component={ContactStackScreen} />

5
app/mobile/src/session/useSession.hook.js
View File

@ -18,12 +18,7 @@ export function useSession() {
}
useEffect(() => {
if (dimensions.width > config.tabbedWidth) {
updateState({ tabbed: false });
}
else {
updateState({ tabbed: true });
}
}, [dimensions]);
const actions = {

46
app/mobile/yarn.lock
View File

@ -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"