react-native-gesture-handler
react-native-gesture-handler copied to clipboard
Create `ReanimatedDrawerLayout` component
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',
},
});
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.
Also, on web tapping does not close drawer