From 7afd99ac58bf98752b42454591bbed69dc7ae410 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Tue, 12 Mar 2024 12:08:07 +0100 Subject: [PATCH] chore: add example for drawer-layout --- .eslintrc.json | 3 +- example/package.json | 1 + example/src/Screens/DrawerView.tsx | 160 +++++++++++++++++++++++++++++ example/src/index.tsx | 21 +++- example/src/screens.tsx | 5 + tsconfig.json | 1 + yarn.lock | 23 +++++ 7 files changed, 211 insertions(+), 3 deletions(-) create mode 100644 example/src/Screens/DrawerView.tsx diff --git a/.eslintrc.json b/.eslintrc.json index e1c2da87e6..04c4b739b1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -17,7 +17,8 @@ "@react-navigation/material-bottom-tabs", "@react-navigation/elements", "@react-navigation/devtools", - "react-native-tab-view" + "react-native-tab-view", + "react-native-drawer-layout" ] }, "env": { diff --git a/example/package.json b/example/package.json index 2abe7a90cd..762b710926 100644 --- a/example/package.json +++ b/example/package.json @@ -17,6 +17,7 @@ "check:prebuild": "node ../scripts/check-prebuild.js" }, "dependencies": { + "@expo/react-native-action-sheet": "^4.0.1", "@expo/vector-icons": "^13.0.0", "@react-native-async-storage/async-storage": "1.17.11", "@react-native-masked-view/masked-view": "0.2.9", diff --git a/example/src/Screens/DrawerView.tsx b/example/src/Screens/DrawerView.tsx new file mode 100644 index 0000000000..4d75a4dd3e --- /dev/null +++ b/example/src/Screens/DrawerView.tsx @@ -0,0 +1,160 @@ +import { useActionSheet } from '@expo/react-native-action-sheet'; +import { useTheme } from '@react-navigation/native'; +import * as React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Drawer, useDrawerProgress } from 'react-native-drawer-layout'; +import { Button, Text } from 'react-native-paper'; +import Animated, { + interpolate, + // @ts-expect-error the type definitions are incomplete + isConfigured, + type SharedValue, + useAnimatedStyle, +} from 'react-native-reanimated'; + +const RealDrawer = () => { + const progress = useDrawerProgress() as SharedValue; + + const animatedStyle = useAnimatedStyle(() => { + return { + transform: [ + { + translateY: interpolate(progress.value, [0, 1], [56, 0]), + }, + ], + }; + }); + + return ( + + + + ); +}; + +const DRAWER_TYPES = ['front', 'back', 'slide'] as const; + +export default function DrawerView() { + const { showActionSheetWithOptions } = useActionSheet(); + const { colors } = useTheme(); + + const [open, setOpen] = React.useState(false); + const [legacy, setLegacy] = React.useState(isConfigured?.() ? false : true); + const [drawerType, setDrawerType] = + React.useState<(typeof DRAWER_TYPES)[number]>('front'); + const [drawerPosition, setDrawerPosition] = React.useState<'left' | 'right'>( + 'left' + ); + + return ( + setOpen(true)} + onClose={() => setOpen(false)} + drawerType={drawerType} + drawerPosition={drawerPosition} + renderDrawerContent={() => { + return ( + + + + ); + }} + > + + {!legacy && } + + + + + {isConfigured?.() ? ( + + ) : ( + Using Reanimated 1 + )} + + + + ); +} + +DrawerView.title = 'Drawer Layout'; +DrawerView.linking = {}; +DrawerView.options = { + headerShown: true, +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 8, + }, + buttons: { + gap: 8, + alignItems: 'center', + }, + realDrawerWrapper: { + width: 64, + height: 72, + marginBottom: 8, + overflow: 'hidden', + }, + realDrawer: { + position: 'absolute', + top: 0, + start: 0, + end: 8, + bottom: 0, + backgroundColor: '#ebdec1', + borderColor: '#3e3a3a', + borderWidth: 4, + borderBottomWidth: 0, + borderRadius: 2, + }, +}); diff --git a/example/src/index.tsx b/example/src/index.tsx index 7d1c97d1d8..8cc656a23c 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -1,3 +1,4 @@ +import { ActionSheetProvider } from '@expo/react-native-action-sheet'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { useFlipper, @@ -128,7 +129,7 @@ export default function App() { const isLargeScreen = dimensions.width >= 1024; return ( - + - + ); } + +const Providers = ({ + theme, + children, +}: { + theme: ReactNativePaper.Theme; + children: React.ReactNode; +}) => { + return ( + + + <>{children} + + + ); +}; diff --git a/example/src/screens.tsx b/example/src/screens.tsx index a5d1ca984a..593d0156dc 100644 --- a/example/src/screens.tsx +++ b/example/src/screens.tsx @@ -2,6 +2,7 @@ import type { NavigatorScreenParams } from '@react-navigation/native'; import AuthFlow from './Screens/AuthFlow'; import BottomTabs from './Screens/BottomTabs'; +import DrawerView from './Screens/DrawerView'; import DynamicTabs from './Screens/DynamicTabs'; import LinkComponent from './Screens/LinkComponent'; import MasterDetail from './Screens/MasterDetail'; @@ -101,6 +102,10 @@ export const SCREENS = { title: 'TabView', component: TabView, }, + DrawerLayout: { + title: 'Drawer Layout', + component: DrawerView, + }, }; type ParamListTypes = { diff --git a/tsconfig.json b/tsconfig.json index 118bd8eb2c..b8e7893abf 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "paths": { "@react-navigation/*": ["./packages/*/src"], "react-native-tab-view": ["./packages/react-native-tab-view/src"], + "react-native-drawer-layout": ["./packages/react-native-drawer-layout/src"], }, "composite": true, "allowUnreachableCode": false, diff --git a/yarn.lock b/yarn.lock index 13dd3d3791..ad758add90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3930,6 +3930,18 @@ __metadata: languageName: node linkType: hard +"@expo/react-native-action-sheet@npm:^4.0.1": + version: 4.0.1 + resolution: "@expo/react-native-action-sheet@npm:4.0.1" + dependencies: + "@types/hoist-non-react-statics": ^3.3.1 + hoist-non-react-statics: ^3.3.0 + peerDependencies: + react: ">=16.3.0" + checksum: f33b8a3b7c6ca77a6e05e5b2284c0961cf1e27b954e87b76747afc990a9581b852326e1ab739ac84a2c1afce05a133627c85465418cad5292d162fbcb305d86e + languageName: node + linkType: hard + "@expo/rudder-sdk-node@npm:1.1.1": version: 1.1.1 resolution: "@expo/rudder-sdk-node@npm:1.1.1" @@ -5658,6 +5670,7 @@ __metadata: dependencies: "@babel/core": ^7.20.5 "@babel/node": ^7.20.5 + "@expo/react-native-action-sheet": ^4.0.1 "@expo/vector-icons": ^13.0.0 "@expo/webpack-config": ^18.0.1 "@playwright/test": ^1.28.1 @@ -6283,6 +6296,16 @@ __metadata: languageName: node linkType: hard +"@types/hoist-non-react-statics@npm:^3.3.1": + version: 3.3.5 + resolution: "@types/hoist-non-react-statics@npm:3.3.5" + dependencies: + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + checksum: b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7 + languageName: node + linkType: hard + "@types/html-minifier-terser@npm:^6.0.0": version: 6.1.0 resolution: "@types/html-minifier-terser@npm:6.1.0"