Create ReanimatedDrawerLayout component

MacOSExample/babel.config.js

@@ -13,6 +13,8 @@ module.exports = {
           'react-native-reanimated': './node_modules/react-native-reanimated',
           'react-native-gesture-handler/ReanimatedSwipeable':
             '../src/components/ReanimatedSwipeable',
+          'react-native-gesture-handler/ReanimatedDrawerLayout':
+            '../src/components/ReanimatedDrawerLayout',
           'react-native-gesture-handler/Swipeable':
             '../src/components/Swipeable',
           'react-native-gesture-handler': '../src/index',

ReanimatedDrawerLayout/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/components/ReanimatedDrawerLayout",
+  "module": "../lib/module/components/ReanimatedDrawerLayout",
+  "react-native": "../src/components/ReanimatedDrawerLayout",
+  "types": "../lib/typescript/components/ReanimatedDrawerLayout.d.ts"
+}

example/App.tsx

@@ -55,6 +55,7 @@
 import Fling from './src/basic/fling';
 import WebStylesResetExample from './src/release_tests/webStylesReset';
 import StylusData from './src/release_tests/StylusData';
+import ReanimatedDrawerLayout from './src/release_tests/reanimatedDrawerLayout';
 
 import Camera from './src/new_api/camera';
 import Transformations from './src/new_api/transformations';
@@ -201,6 +202,7 @@
         unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
       },
       { name: 'PointerType', component: PointerType },
+      { name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },
       { name: 'Swipeable Reanimation', component: SwipeableReanimation },
       { name: 'RectButton (borders)', component: RectButtonBorders },
       { name: 'Gesturized pressable', component: GesturizedPressable },
@@ -319,7 +321,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/babel.config.js

@@ -10,6 +10,8 @@ module.exports = function (api) {
           alias: {
             'react-native-gesture-handler/ReanimatedSwipeable':
               '../src/components/ReanimatedSwipeable',
+            'react-native-gesture-handler/ReanimatedDrawerLayout':
+              '../src/components/ReanimatedDrawerLayout',
             'react-native-gesture-handler': '../src/index',
           },
         },

example/src/release_tests/reanimatedDrawerLayout/index.tsx

@@ -0,0 +1,139 @@
+import React, { useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { SharedValue } from 'react-native-reanimated';
+
+import ReanimatedDrawerLayout, {
+  DrawerType,
+  DrawerPosition,
+  DrawerLayoutMethods,
+  DrawerLockMode,
+} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+import { LoremIpsum } from '../../../src/common';
+
+const DrawerPage = ({ progress }: { progress?: SharedValue }) => {
+  progress && console.log('Drawer opening progress:', progress);
+  return (
+    <View style={styles.drawerContainer}>
+      <LoremIpsum />
+    </View>
+  );
+};
+
+export default function ReanimatedDrawerExample() {
+  const drawerRef = useRef<DrawerLayoutMethods>(null);
+  const [side, setSide] = useState(DrawerPosition.LEFT);
+  const [type, setType] = useState(DrawerType.FRONT);
+  const [lock, setLock] = useState(DrawerLockMode.UNLOCKED);
+
+  const tapGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart(() =>
+      drawerRef.current?.openDrawer({ animationSpeed: 1, initialVelocity: 0 })
+    );
+
+  const toggleSideGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart(() =>
+      setSide(
+        side === DrawerPosition.LEFT
+          ? DrawerPosition.RIGHT
+          : DrawerPosition.LEFT
+      )
+    );
+
+  const toggleTypeGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart(() =>
+      setType(
+        type === DrawerType.FRONT
+          ? DrawerType.BACK
+          : type === DrawerType.BACK
+          ? DrawerType.SLIDE
+          : DrawerType.FRONT
+      )
+    );
+
+  const toggleLockGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onStart(() =>
+      setLock(
+        lock === DrawerLockMode.UNLOCKED
+          ? DrawerLockMode.LOCKED_CLOSED
+          : lock === DrawerLockMode.LOCKED_CLOSED
+          ? DrawerLockMode.LOCKED_OPEN
+          : DrawerLockMode.UNLOCKED
+      )
+    );
+
+  return (
+    <ReanimatedDrawerLayout
+      ref={drawerRef}
+      renderNavigationView={() => <DrawerPage />}
+      drawerPosition={side}
+      drawerType={type}
+      drawerLockMode={lock}>
+      <View style={styles.innerContainer}>
+        <GestureDetector gesture={tapGesture}>
+          <View style={styles.box}>
+            <Text>Open drawer</Text>
+          </View>
+        </GestureDetector>
+        <GestureDetector gesture={toggleSideGesture}>
+          <View style={styles.box}>
+            <Text>
+              Currently opening from:{' '}
+              {side === DrawerPosition.LEFT ? 'left' : 'right'}
+            </Text>
+          </View>
+        </GestureDetector>
+        <GestureDetector gesture={toggleTypeGesture}>
+          <View style={styles.box}>
+            <Text>
+              Current background type:{' '}
+              {type === DrawerType.FRONT
+                ? 'front'
+                : type === DrawerType.BACK
+                ? 'back'
+                : 'slide'}
+            </Text>
+          </View>
+        </GestureDetector>
+        <GestureDetector gesture={toggleLockGesture}>
+          <View style={styles.box}>
+            <Text>
+              Current lock mode:{' '}
+              {lock === DrawerLockMode.UNLOCKED
+                ? 'unlocked'
+                : lock === DrawerLockMode.LOCKED_OPEN
+                ? 'locked-open'
+                : 'locked-closed'}
+            </Text>
+          </View>
+        </GestureDetector>
+      </View>
+    </ReanimatedDrawerLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'pink',
+  },
+  innerContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 20,
+  },
+  box: {
+    width: 150,
+    padding: 10,
+    paddingHorizontal: 5,
+    backgroundColor: 'pink',
+  },
+});