software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.13k stars 982 forks source link

Create `ReanimatedDrawerLayout` component #3146

Closed latekvo closed 1 week ago

latekvo commented 1 month ago

Description

This PR adds ReanimatedDrawerLayout component.

Test plan

Collapsed code - legacy component preview ```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 ; }; export default function ReanimatedDrawerExample() { const drawerRef = useRef(null); const tapGesture = Gesture.Tap() .runOnJS(true) .onStart(() => drawerRef.current?.openDrawer()); return ( }> Open drawer ); } const styles = StyleSheet.create({ drawerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', }, innerContainer: { margin: 'auto', padding: 35, paddingHorizontal: 25, backgroundColor: 'pink', }, }); ```
latekvo commented 1 month ago

As of 1ebcfa4, I'm not aware of any bugs that haven't been fixed already. In the following days I will test some minor parts of the component, like type compatibility with the legacy version, if it works when exported into a real app and not just an example package, etc. Regardless, as of now it is ready to review.

m-bert commented 3 weeks ago

Also, on web tapping does not close drawer

latekvo commented 3 weeks ago

Also, on web tapping does not close drawer

Fixed in d2a52dd and 920a869