react-native-drawer-layout 3.1.0 → 3.2.1

package/src/views/Drawer.tsx

@@ -50,7 +50,7 @@ const getDefaultDrawerWidth = ({
   return Math.min(smallerAxisSize - appBarHeight, maxWidth);
 };
 
-export default function Drawer({
+export function Drawer({
   // Reanimated 2 is not configured
   // @ts-expect-error: the type definitions are incomplete
   useLegacyImplementation = !Reanimated.isConfigured?.(),
@@ -80,10 +80,10 @@ export default function Drawer({
     );
   }
 
-  const Drawer: typeof import('./modern/Drawer').default =
+  const Drawer: typeof import('./modern/Drawer').Drawer =
     useLegacyImplementation
-      ? require('./legacy/Drawer').default
-      : require('./modern/Drawer').default;
+      ? require('./legacy/Drawer').Drawer
+      : require('./modern/Drawer').Drawer;
 
   const windowDimensions = useWindowDimensions();
   const layout = customLayout ?? windowDimensions;

package/src/views/GestureHandlerNative.tsx

@@ -4,7 +4,7 @@ import {
   PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
 
-import DrawerGestureContext from '../utils/DrawerGestureContext';
+import { DrawerGestureContext } from '../utils/DrawerGestureContext';
 
 export function PanGestureHandler(props: PanGestureHandlerProperties) {
   const gestureRef = React.useRef<PanGestureHandlerNative>(null);

package/src/views/legacy/Drawer.tsx

@@ -18,9 +18,9 @@ import {
   SWIPE_MIN_VELOCITY,
 } from '../../constants';
 import type { DrawerProps } from '../../types';
-import DrawerProgressContext from '../../utils/DrawerProgressContext';
+import { DrawerProgressContext } from '../../utils/DrawerProgressContext';
 import { GestureState, PanGestureHandler } from '../GestureHandler';
-import Overlay from './Overlay';
+import { Overlay } from './Overlay';
 
 const {
   Clock,
@@ -76,7 +76,7 @@ type Props = DrawerProps & {
   layout: { width: number };
 };
 
-export default class Drawer extends React.Component<Props> {
+export class Drawer extends React.Component<Props> {
   componentDidUpdate(prevProps: Props) {
     const {
       open,
@@ -284,6 +284,14 @@ export default class Drawer extends React.Component<Props> {
         set(this.manuallyTriggerSpring, FALSE),
       ]),
       spring(this.clock, state, { ...SPRING_CONFIG, toValue }),
+      onChange(
+        state.finished,
+        cond(
+          state.finished,
+          call([this.isOpen], (open) => this.props.onTransitionEnd?.(!open)),
+          call([this.isOpen], (open) => this.props.onTransitionStart?.(!open))
+        )
+      ),
       cond(state.finished, [
         // Reset gesture and velocity from previous gesture
         set(this.touchX, 0),
@@ -370,6 +378,18 @@ export default class Drawer extends React.Component<Props> {
         call([], this.handleStartInteraction)
       )
     ),
+    onChange(
+      this.gestureState,
+      cond(eq(this.gestureState, GestureState.END), [
+        call([], () => this.props.onGestureEnd?.()),
+      ])
+    ),
+    onChange(
+      this.gestureState,
+      cond(eq(this.gestureState, GestureState.CANCELLED), [
+        call([], () => this.props.onGestureCancel?.()),
+      ])
+    ),
     cond(
       eq(this.gestureState, GestureState.ACTIVE),
       [
@@ -378,6 +398,7 @@ export default class Drawer extends React.Component<Props> {
           set(this.isSwiping, TRUE),
           // Also update the drag offset to the last position
           set(this.offsetX, this.position),
+          call([], () => this.props.onGestureStart?.()),
         ]),
         // Update position with previous offset + gesture distance
         set(

package/src/views/legacy/Overlay.tsx

@@ -21,7 +21,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,
@@ -83,5 +83,3 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
-export default Overlay;

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;