react-native-drawer-layout 3.1.0 → 3.2.0

package/src/views/modern/Drawer.tsx

@@ -17,6 +17,7 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
+import useLatestCallback from 'use-latest-callback';
 
 import {
   DEFAULT_DRAWER_WIDTH,
@@ -25,13 +26,13 @@ import {
   SWIPE_MIN_VELOCITY,
 } from '../../constants';
 import type { DrawerProps } from '../../types';
-import DrawerProgressContext from '../../utils/DrawerProgressContext';
+import { DrawerProgressContext } from '../../utils/DrawerProgressContext';
 import {
   GestureState,
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
 } from '../GestureHandler';
-import Overlay from './Overlay';
+import { Overlay } from './Overlay';
 
 const minmax = (value: number, start: number, end: number) => {
   'worklet';
@@ -43,7 +44,7 @@ type Props = DrawerProps & {
   layout: { width: number };
 };
 
-export default function Drawer({
+export function Drawer({
   layout,
   drawerPosition,
   drawerStyle,
@@ -53,6 +54,11 @@ export default function Drawer({
   keyboardDismissMode,
   onClose,
   onOpen,
+  onGestureStart,
+  onGestureCancel,
+  onGestureEnd,
+  onTransitionStart,
+  onTransitionEnd,
   open,
   overlayStyle,
   overlayAccessibilityLabel,
@@ -132,13 +138,15 @@ export default function Drawer({
     }
   };
 
-  const onGestureStart = () => {
+  const onGestureBegin = () => {
+    onGestureStart?.();
     startInteraction();
     hideKeyboard();
     hideStatusBar(true);
   };
 
   const onGestureFinish = () => {
+    onGestureEnd?.();
     endInteraction();
   };
 
@@ -155,23 +163,42 @@ export default function Drawer({
   const translationX = useSharedValue(getDrawerTranslationX(open));
   const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);
 
+  const handleAnimationStart = useLatestCallback((open: boolean) => {
+    onTransitionStart?.(!open);
+  });
+
+  const handleAnimationEnd = useLatestCallback(
+    (open: boolean, finished?: boolean) => {
+      if (!finished) return;
+      onTransitionEnd?.(!open);
+    }
+  );
+
   const toggleDrawer = React.useCallback(
     (open: boolean, velocity?: number) => {
       'worklet';
 
       const translateX = getDrawerTranslationX(open);
 
+      if (velocity === undefined) {
+        runOnJS(handleAnimationStart)(open);
+      }
+
       touchStartX.value = 0;
       touchX.value = 0;
-      translationX.value = withSpring(translateX, {
-        velocity,
-        stiffness: 1000,
-        damping: 500,
-        mass: 3,
-        overshootClamping: true,
-        restDisplacementThreshold: 0.01,
-        restSpeedThreshold: 0.01,
-      });
+      translationX.value = withSpring(
+        translateX,
+        {
+          velocity,
+          stiffness: 1000,
+          damping: 500,
+          mass: 3,
+          overshootClamping: true,
+          restDisplacementThreshold: 0.01,
+          restSpeedThreshold: 0.01,
+        },
+        (finished) => runOnJS(handleAnimationEnd)(open, finished)
+      );
 
       if (open) {
         runOnJS(onOpen)();
@@ -179,7 +206,16 @@ export default function Drawer({
         runOnJS(onClose)();
       }
     },
-    [getDrawerTranslationX, onClose, onOpen, touchStartX, touchX, translationX]
+    [
+      getDrawerTranslationX,
+      handleAnimationEnd,
+      handleAnimationStart,
+      onClose,
+      onOpen,
+      touchStartX,
+      touchX,
+      translationX,
+    ]
   );
 
   React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
@@ -194,17 +230,20 @@ export default function Drawer({
       gestureState.value = event.state;
       touchStartX.value = event.x;
     },
+    onCancel: () => {
+      runOnJS(() => onGestureCancel?.())();
+    },
     onActive: (event, ctx) => {
       touchX.value = event.x;
       translationX.value = ctx.startX + event.translationX;
       gestureState.value = event.state;
 
       // onStart will _always_ be called, even when the activation
-      // criteria isn't met yet. This makes sure onGestureStart is only
+      // criteria isn't met yet. This makes sure onGestureBegin is only
       // called when the criteria is really met.
       if (!ctx.hasCalledOnStart) {
         ctx.hasCalledOnStart = true;
-        runOnJS(onGestureStart)();
+        runOnJS(onGestureBegin)();
       }
     },
     onEnd: (event) => {

package/src/views/modern/Overlay.tsx

@@ -13,7 +13,7 @@ type Props = React.ComponentProps<typeof Animated.View> & {
   accessibilityLabel?: string;
 };
 
-const Overlay = React.forwardRef(function Overlay(
+export const Overlay = React.forwardRef(function Overlay(
   {
     progress,
     onPress,
@@ -78,5 +78,3 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
 });
-
-export default Overlay;