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

@@ -54,6 +54,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';
@@ -200,6 +201,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 },
@@ -313,7 +315,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/package.json

@@ -35,7 +35,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-gesture-handler": "link:..",
-    "react-native-reanimated": "3.10.0",
+    "react-native-reanimated": "3.15.5",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",

example/src/release_tests/reanimatedDrawerLayout/index.tsx

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';
+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 (
+    <ReanimatedDrawerLayout
+      ref={drawerRef}
+      renderNavigationView={() => <DrawerPage />}>
+      <GestureDetector gesture={tapGesture}>
+        <View style={styles.innerContainer}>
+          <Text>Open drawer</Text>
+        </View>
+      </GestureDetector>
+    </ReanimatedDrawerLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  drawerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'pink',
+  },
+  innerContainer: {
+    margin: 'auto',
+    padding: 35,
+    paddingHorizontal: 25,
+    backgroundColor: 'pink',
+  },
+});