Skip to content

Commit 18969fd

Browse files
latekvolatekvo
authored
Create ReanimatedDrawerLayout component (#3146)
## Description This PR adds `ReanimatedDrawerLayout` component. ## Test plan - use the newly added Reanimated Drawer Layout example to see how the drawer layout functions - use the provided sample code to test how the legacy one used to work <details> <summary> Collapsed code - legacy component preview </summary> ```js import React, { useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Gesture, GestureDetector, DrawerLayout, } from 'react-native-gesture-handler'; import { SharedValue } from 'react-native-reanimated'; const DrawerPage = ({ progress }: { progress?: SharedValue }) => { progress && console.log('Drawer opening progress:', progress); return <View style={styles.drawerContainer} />; }; export default function ReanimatedDrawerExample() { const drawerRef = useRef<any>(null); const tapGesture = Gesture.Tap() .runOnJS(true) .onStart(() => drawerRef.current?.openDrawer()); return ( <DrawerLayout ref={drawerRef} renderNavigationView={() => <DrawerPage />}> <GestureDetector gesture={tapGesture}> <View style={styles.innerContainer}> <Text>Open drawer</Text> </View> </GestureDetector> </DrawerLayout> ); } const styles = StyleSheet.create({ drawerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', }, innerContainer: { margin: 'auto', padding: 35, paddingHorizontal: 25, backgroundColor: 'pink', }, }); ``` </details>
1 parent 56a14fb commit 18969fd

File tree

6 files changed

+892
-0
lines changed

6 files changed

+892
-0
lines changed

‎MacOSExample/babel.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ module.exports = {
1313
'react-native-reanimated': './node_modules/react-native-reanimated',
1414
'react-native-gesture-handler/ReanimatedSwipeable':
1515
'../src/components/ReanimatedSwipeable',
16+
'react-native-gesture-handler/ReanimatedDrawerLayout':
17+
'../src/components/ReanimatedDrawerLayout',
1618
'react-native-gesture-handler/Swipeable':
1719
'../src/components/Swipeable',
1820
'react-native-gesture-handler': '../src/index',

‎ReanimatedDrawerLayout/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"main": "../lib/commonjs/components/ReanimatedDrawerLayout",
3+
"module": "../lib/module/components/ReanimatedDrawerLayout",
4+
"react-native": "../src/components/ReanimatedDrawerLayout",
5+
"types": "../lib/typescript/components/ReanimatedDrawerLayout.d.ts"
6+
}

‎example/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import ForceTouch from './src/basic/forcetouch';
5555
import Fling from './src/basic/fling';
5656
import WebStylesResetExample from './src/release_tests/webStylesReset';
5757
import StylusData from './src/release_tests/StylusData';
58+
import ReanimatedDrawerLayout from './src/release_tests/reanimatedDrawerLayout';
5859

5960
import Camera from './src/new_api/camera';
6061
import Transformations from './src/new_api/transformations';
@@ -201,6 +202,7 @@ const EXAMPLES: ExamplesSection[] = [
201202
unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
202203
},
203204
{ name: 'PointerType', component: PointerType },
205+
{ name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },
204206
{ name: 'Swipeable Reanimation', component: SwipeableReanimation },
205207
{ name: 'RectButton (borders)', component: RectButtonBorders },
206208
{ name: 'Gesturized pressable', component: GesturizedPressable },

‎example/babel.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ module.exports = function (api) {
1010
alias: {
1111
'react-native-gesture-handler/ReanimatedSwipeable':
1212
'../src/components/ReanimatedSwipeable',
13+
'react-native-gesture-handler/ReanimatedDrawerLayout':
14+
'../src/components/ReanimatedDrawerLayout',
1315
'react-native-gesture-handler': '../src/index',
1416
},
1517
},

‎example/src/release_tests/reanimatedDrawerLayout/index.tsx

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import React, { useRef, useState } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
4+
import { SharedValue } from 'react-native-reanimated';
5+
6+
import ReanimatedDrawerLayout, {
7+
DrawerType,
8+
DrawerPosition,
9+
DrawerLayoutMethods,
10+
DrawerLockMode,
11+
} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
12+
import { LoremIpsum } from '../../../src/common';
13+
14+
const DrawerPage = ({ progress }: { progress?: SharedValue }) => {
15+
progress && console.log('Drawer opening progress:', progress);
16+
return (
17+
<View style={styles.drawerContainer}>
18+
<LoremIpsum />
19+
</View>
20+
);
21+
};
22+
23+
export default function ReanimatedDrawerExample() {
24+
const drawerRef = useRef<DrawerLayoutMethods>(null);
25+
const [side, setSide] = useState(DrawerPosition.LEFT);
26+
const [type, setType] = useState(DrawerType.FRONT);
27+
const [lock, setLock] = useState(DrawerLockMode.UNLOCKED);
28+
29+
const tapGesture = Gesture.Tap()
30+
.runOnJS(true)
31+
.onStart(() =>
32+
drawerRef.current?.openDrawer({ animationSpeed: 1, initialVelocity: 0 })
33+
);
34+
35+
const toggleSideGesture = Gesture.Tap()
36+
.runOnJS(true)
37+
.onStart(() =>
38+
setSide(
39+
side === DrawerPosition.LEFT
40+
? DrawerPosition.RIGHT
41+
: DrawerPosition.LEFT
42+
)
43+
);
44+
45+
const toggleTypeGesture = Gesture.Tap()
46+
.runOnJS(true)
47+
.onStart(() =>
48+
setType(
49+
type === DrawerType.FRONT
50+
? DrawerType.BACK
51+
: type === DrawerType.BACK
52+
? DrawerType.SLIDE
53+
: DrawerType.FRONT
54+
)
55+
);
56+
57+
const toggleLockGesture = Gesture.Tap()
58+
.runOnJS(true)
59+
.onStart(() =>
60+
setLock(
61+
lock === DrawerLockMode.UNLOCKED
62+
? DrawerLockMode.LOCKED_CLOSED
63+
: lock === DrawerLockMode.LOCKED_CLOSED
64+
? DrawerLockMode.LOCKED_OPEN
65+
: DrawerLockMode.UNLOCKED
66+
)
67+
);
68+
69+
return (
70+
<ReanimatedDrawerLayout
71+
ref={drawerRef}
72+
renderNavigationView={() => <DrawerPage />}
73+
drawerPosition={side}
74+
drawerType={type}
75+
drawerLockMode={lock}>
76+
<View style={styles.innerContainer}>
77+
<GestureDetector gesture={tapGesture}>
78+
<View style={styles.box}>
79+
<Text>Open drawer</Text>
80+
</View>
81+
</GestureDetector>
82+
<GestureDetector gesture={toggleSideGesture}>
83+
<View style={styles.box}>
84+
<Text>
85+
Currently opening from:{' '}
86+
{side === DrawerPosition.LEFT ? 'left' : 'right'}
87+
</Text>
88+
</View>
89+
</GestureDetector>
90+
<GestureDetector gesture={toggleTypeGesture}>
91+
<View style={styles.box}>
92+
<Text>
93+
Current background type:{' '}
94+
{type === DrawerType.FRONT
95+
? 'front'
96+
: type === DrawerType.BACK
97+
? 'back'
98+
: 'slide'}
99+
</Text>
100+
</View>
101+
</GestureDetector>
102+
<GestureDetector gesture={toggleLockGesture}>
103+
<View style={styles.box}>
104+
<Text>
105+
Current lock mode:{' '}
106+
{lock === DrawerLockMode.UNLOCKED
107+
? 'unlocked'
108+
: lock === DrawerLockMode.LOCKED_OPEN
109+
? 'locked-open'
110+
: 'locked-closed'}
111+
</Text>
112+
</View>
113+
</GestureDetector>
114+
</View>
115+
</ReanimatedDrawerLayout>
116+
);
117+
}
118+
119+
const styles = StyleSheet.create({
120+
drawerContainer: {
121+
flex: 1,
122+
justifyContent: 'center',
123+
alignItems: 'center',
124+
backgroundColor: 'pink',
125+
},
126+
innerContainer: {
127+
flex: 1,
128+
backgroundColor: 'white',
129+
alignItems: 'center',
130+
justifyContent: 'center',
131+
gap: 20,
132+
},
133+
box: {
134+
width: 150,
135+
padding: 10,
136+
paddingHorizontal: 5,
137+
backgroundColor: 'pink',
138+
},
139+
});

0 commit comments

Comments
 (0)