react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Create `ReanimatedDrawerLayout` component

Open latekvo opened this issue 1 year ago • 1 comments

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
Collapsed code - legacy component preview

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',
  },
});

latekvo avatar Oct 09 '24 15:10 latekvo

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.

latekvo avatar Oct 22 '24 15:10 latekvo

Also, on web tapping does not close drawer

m-bert avatar Oct 28 '24 08:10 m-bert

Also, on web tapping does not close drawer

Fixed in d2a52dd and 920a869

latekvo avatar Oct 28 '24 14:10 latekvo