react-native-drawer-layout 5.0.0-alpha.2 → 5.0.0-alpha.20

package/src/views/Drawer.native.tsx

@@ -8,16 +8,20 @@ import {
   StatusBar,
   StyleSheet,
   View,
+  type ViewProps,
 } from 'react-native';
 import Animated, {
+  cancelAnimation,
   interpolate,
   ReduceMotion,
-  runOnJS,
+  useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  withDelay,
   withSpring,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import useLatestCallback from 'use-latest-callback';
 
 import type { DrawerProps } from '../types';
@@ -25,10 +29,10 @@ import { DrawerGestureContext } from '../utils/DrawerGestureContext';
 import { DrawerProgressContext } from '../utils/DrawerProgressContext';
 import { getDrawerWidthNative } from '../utils/getDrawerWidth';
 import {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
-  GestureState,
+  type PanGestureConfig,
+  usePanGesture,
 } from './GestureHandler';
 import { Overlay } from './Overlay';
 
@@ -36,6 +40,18 @@ const SWIPE_EDGE_WIDTH = 32;
 const SWIPE_MIN_OFFSET = 5;
 const SWIPE_MIN_DISTANCE = 60;
 const SWIPE_MIN_VELOCITY = 500;
+const PEEK_DELAY = 160;
+const PEEK_EDGE_WIDTH = 20;
+const PEEK_DISTANCE = 20;
+const PROGRESS_EPSILON = 0.05;
+
+const SPRING_CONFIG = {
+  stiffness: 500,
+  damping: 40,
+  mass: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.Never,
+};
 
 const minmax = (value: number, start: number, end: number) => {
   'worklet';
@@ -104,7 +120,7 @@ export function Drawer({
     [hideStatusBarOnOpen, statusBarAnimation]
   );
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     hideStatusBar(isOpen);
 
     return () => hideStatusBar(false);
@@ -147,13 +163,17 @@ export function Drawer({
     getDrawerTranslationX(open, initialWidth)
   );
 
-  const contentRef = React.useRef<View>(null);
+  const contentRef = React.useRef<React.ComponentRef<typeof View>>(null);
+
+  const updateLayout = useLatestCallback((width: number) => {
+    layoutWidth.set(width);
+    translationX.set(getDrawerTranslationX(open, width));
+  });
 
   React.useLayoutEffect(() => {
     const measureLayout = () => {
       contentRef.current?.measure((_x, _y, width) => {
-        layoutWidth.set(width);
-        translationX.set(getDrawerTranslationX(open, width));
+        updateLayout(width);
       });
     };
 
@@ -163,6 +183,7 @@ export function Drawer({
     // Measure the layout again on screen rotation
     let handle: number | undefined;
 
+    // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
     const subscription = Dimensions.addEventListener('change', () => {
       // The measurement is not accurate without the delay
       handle = requestAnimationFrame(() => {
@@ -183,15 +204,26 @@ export function Drawer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    layoutWidth.set(event.nativeEvent.layout.width);
-  };
+  const onLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      updateLayout(event.nativeEvent.layout.width);
+    },
+    [updateLayout]
+  );
 
   const touchStartX = useSharedValue(0);
   const touchX = useSharedValue(0);
-  const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);
+  const isGestureActive = useSharedValue(false);
+  const isPeeking = useSharedValue(false);
+
+  const onOpenLatest = useLatestCallback(onOpen);
+  const onCloseLatest = useLatestCallback(onClose);
 
   const onAnimationStart = useLatestCallback((open: boolean) => {
+    if (drawerType !== 'permanent') {
+      hideKeyboard();
+    }
+
     onTransitionStart?.(!open);
   });
 
@@ -213,6 +245,7 @@ export function Drawer({
 
       touchStartX.set(0);
       touchX.set(0);
+      isPeeking.set(false);
 
       const containerWidth = layoutWidth.get();
       const toValue = getDrawerTranslationX(open, containerWidth);
@@ -226,87 +259,159 @@ export function Drawer({
       }
 
       if (velocity === undefined) {
-        runOnJS(onAnimationStart)(open);
+        scheduleOnRN(onAnimationStart, open);
       }
 
+      // Ignore velocity that opposes the spring direction.
+      // Otherwise overshootClamping makes the spring snap instantly.
+      const isSameDirection =
+        velocity !== undefined &&
+        ((toValue > translationX.get() && velocity > 0) ||
+          (toValue < translationX.get() && velocity < 0));
+
+      const effectiveVelocity = isSameDirection ? velocity : 0;
+
       animatingTo.set(open ? 'open' : 'close');
       translationX.set(
         withSpring(
           toValue,
           {
-            velocity,
-            stiffness: 1000,
-            damping: 500,
-            mass: 3,
+            velocity: effectiveVelocity,
+            stiffness: 500,
+            damping: 40,
+            mass: 1,
             overshootClamping: true,
             reduceMotion: ReduceMotion.Never,
           },
           (finished) => {
             animatingTo.set(null);
-            runOnJS(onAnimationEnd)(open, finished);
+            scheduleOnRN(onAnimationEnd, open, finished);
           }
         )
       );
 
       if (open) {
-        runOnJS(onOpen)();
+        scheduleOnRN(onOpenLatest);
       } else {
-        runOnJS(onClose)();
+        scheduleOnRN(onCloseLatest);
       }
     },
     [
       touchStartX,
       touchX,
+      isPeeking,
       layoutWidth,
       getDrawerTranslationX,
       translationX,
       animatingTo,
       onAnimationStart,
       onAnimationEnd,
-      onOpen,
-      onClose,
+      onOpenLatest,
+      onCloseLatest,
     ]
   );
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     toggleDrawer(open);
   }, [animatingTo, open, toggleDrawer]);
 
-  const startX = useSharedValue(0);
-
-  const pan = React.useMemo(() => {
-    let panGesture = Gesture?.Pan()
-      .onBegin((event) => {
+  const panGestureConfig = React.useMemo(() => {
+    const config: PanGestureConfig = {
+      onBegin: (event) => {
         'worklet';
 
-        startX.set(translationX.get());
-        gestureState.set(event.state);
         touchStartX.set(event.x);
-      })
-      .onStart(() => {
+
+        if (open) {
+          return;
+        }
+
+        const distanceFromEdge =
+          drawerPosition === 'left' ? event.x : layoutWidth.get() - event.x;
+
+        if (distanceFromEdge > PEEK_EDGE_WIDTH) {
+          return;
+        }
+
+        const closedTranslation = getDrawerTranslationX(
+          false,
+          layoutWidth.get()
+        );
+
+        // Don't start the peek if the drawer isn't fully closed
+        if (translationX.get() !== closedTranslation) {
+          return;
+        }
+
+        const peekDistance = Math.min(
+          PEEK_DISTANCE,
+          Math.abs(closedTranslation)
+        );
+
+        if (peekDistance <= 0) {
+          return;
+        }
+
+        const peekTranslation =
+          closedTranslation +
+          peekDistance * (drawerPosition === 'left' ? 1 : -1);
+
+        isPeeking.set(true);
+        translationX.set(
+          withDelay(PEEK_DELAY, withSpring(peekTranslation, SPRING_CONFIG))
+        );
+      },
+      onActivate: (event) => {
         'worklet';
 
-        runOnJS(onGestureBegin)();
-      })
-      .onChange((event) => {
+        const wasPeeking = isPeeking.get();
+
+        if (wasPeeking) {
+          // If a peek is pending or the drawer is peeking,
+          // cancel the peek animation
+          cancelAnimation(translationX);
+        }
+
+        const currentTranslation = translationX.get();
+        const closedTranslation = getDrawerTranslationX(
+          false,
+          layoutWidth.get()
+        );
+
+        // Start the gesture from the pan's initial translation
+        // We avoid this if the drawer has already moved for the peek,
+        // otherwise there can be a jump to the pan's initial translation
+        if (!wasPeeking || currentTranslation === closedTranslation) {
+          translationX.set(currentTranslation + event.translationX);
+        }
+
+        isPeeking.set(false);
+        isGestureActive.set(true);
+
+        scheduleOnRN(onGestureBegin);
+      },
+      onUpdate: (event) => {
         'worklet';
 
+        isGestureActive.set(true);
         touchX.set(event.x);
-        translationX.set(startX.get() + event.translationX);
-        gestureState.set(event.state);
-      })
-      .onEnd((event, success) => {
+        translationX.set(translationX.get() + event.changeX);
+      },
+      onDeactivate: (event) => {
         'worklet';
 
-        gestureState.set(event.state);
+        isGestureActive.set(false);
 
-        if (!success) {
-          runOnJS(onGestureAbort)();
+        if (event.canceled) {
+          toggleDrawer(open, event.velocityX);
+          scheduleOnRN(onGestureAbort);
+
+          return;
         }
 
         const nextOpen =
           (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
-            Math.abs(event.translationX) > swipeMinVelocity) ||
+            Math.abs(event.velocityX) > swipeMinVelocity) ||
           Math.abs(event.translationX) > swipeMinDistance
             ? drawerPosition === 'left'
               ? // If swiped to right, open the drawer, otherwise close it
@@ -318,29 +423,42 @@ export function Drawer({
             : open;
 
         toggleDrawer(nextOpen, event.velocityX);
-        runOnJS(onGestureFinish)();
-      })
-      .activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
-      .failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
-      .hitSlop(hitSlop)
-      .enabled(drawerType !== 'permanent' && swipeEnabled);
-
-    if (panGesture && configureGestureHandler) {
-      panGesture = configureGestureHandler(panGesture);
-    }
+        scheduleOnRN(onGestureFinish);
+      },
+      onFinalize: () => {
+        'worklet';
+
+        if (isPeeking.get()) {
+          isPeeking.set(false);
+
+          translationX.set(
+            withSpring(
+              getDrawerTranslationX(false, layoutWidth.get()),
+              SPRING_CONFIG
+            )
+          );
+        }
+      },
+      activeOffsetX: [-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET],
+      failOffsetY: [-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET],
+      hitSlop,
+      enabled: drawerType !== 'permanent' && swipeEnabled,
+    };
 
-    return panGesture;
+    return configureGestureHandler?.(config) ?? config;
   }, [
     configureGestureHandler,
     drawerPosition,
     drawerType,
-    gestureState,
+    getDrawerTranslationX,
     hitSlop,
+    isGestureActive,
+    isPeeking,
+    layoutWidth,
     onGestureBegin,
     onGestureAbort,
     onGestureFinish,
     open,
-    startX,
     swipeEnabled,
     swipeMinDistance,
     swipeMinVelocity,
@@ -350,6 +468,8 @@ export function Drawer({
     translationX,
   ]);
 
+  const pan = usePanGesture(panGestureConfig);
+
   const translateX = useDerivedValue(() => {
     const drawerWidth = getDrawerWidthNative({
       containerWidth: layoutWidth.get(),
@@ -382,7 +502,7 @@ export function Drawer({
     //
     // This is used only when drawerType is "front"
     const touchDistance =
-      drawerType === 'front' && gestureState.get() === GestureState.ACTIVE
+      drawerType === 'front' && isGestureActive.get()
         ? minmax(
             drawerPosition === 'left'
               ? touchStartX.get() - drawerWidth
@@ -494,6 +614,34 @@ export function Drawer({
         );
   });
 
+  const contentAnimatedProps = useAnimatedProps<ViewProps>(() => {
+    const hidden =
+      drawerType !== 'permanent' && progress.value >= 1 - PROGRESS_EPSILON;
+
+    if (Platform.OS === 'android') {
+      const importantForAccessibility: ViewProps['importantForAccessibility'] =
+        hidden ? 'no-hide-descendants' : 'auto';
+
+      return { importantForAccessibility };
+    }
+
+    return { accessibilityElementsHidden: hidden };
+  }, [drawerType, progress]);
+
+  const drawerContentAnimatedProps = useAnimatedProps<ViewProps>(() => {
+    const hidden =
+      drawerType !== 'permanent' && progress.value < 1 - PROGRESS_EPSILON;
+
+    if (Platform.OS === 'android') {
+      const importantForAccessibility: ViewProps['importantForAccessibility'] =
+        hidden ? 'no-hide-descendants' : 'auto';
+
+      return { importantForAccessibility };
+    }
+
+    return { accessibilityElementsHidden: hidden };
+  }, [drawerType, progress]);
+
   return (
     <GestureHandlerRootView style={[styles.container, style]}>
       <DrawerProgressContext.Provider value={progress}>
@@ -519,12 +667,12 @@ export function Drawer({
                 onLayout={onLayout}
                 style={[styles.content, contentAnimatedStyle]}
               >
-                <View
-                  aria-hidden={isOpen && drawerType !== 'permanent'}
+                <Animated.View
+                  animatedProps={contentAnimatedProps}
                   style={styles.content}
                 >
                   {children}
-                </View>
+                </Animated.View>
                 {drawerType !== 'permanent' ? (
                   <Overlay
                     open={open}
@@ -536,6 +684,7 @@ export function Drawer({
                 ) : null}
               </Animated.View>
               <Animated.View
+                animatedProps={drawerContentAnimatedProps}
                 removeClippedSubviews={Platform.OS !== 'ios'}
                 style={[
                   styles.drawer,

package/src/views/Drawer.tsx

@@ -34,18 +34,26 @@ export function Drawer({
     progress.set(open ? 1 : 0);
   }, [open, progress]);
 
-  const drawerRef = React.useRef<View>(null);
+  const drawerRef = React.useRef<React.ComponentRef<typeof View>>(null);
 
-  const onTransitionStartLatest = useLatestCallback(() => {
-    onTransitionStart?.(open === false);
+  const onTransitionStartLatest = useLatestCallback((e: TransitionEvent) => {
+    if (e.target === e.currentTarget && e.propertyName === 'transform') {
+      onTransitionStart?.(open === false);
+    }
   });
 
-  const onTransitionEndLatest = useLatestCallback(() => {
-    onTransitionEnd?.(open === false);
+  const onTransitionEndLatest = useLatestCallback((e: TransitionEvent) => {
+    if (e.target === e.currentTarget && e.propertyName === 'transform') {
+      onTransitionEnd?.(open === false);
+    }
   });
 
   React.useEffect(() => {
-    const element = drawerRef.current as HTMLDivElement | null;
+    const element =
+      typeof HTMLElement !== 'undefined' &&
+      drawerRef.current instanceof HTMLElement
+        ? drawerRef.current
+        : null;
 
     element?.addEventListener('transitionstart', onTransitionStartLatest);
     element?.addEventListener('transitionend', onTransitionEndLatest);

package/src/views/GestureHandler.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import type { GestureType } from 'react-native-gesture-handler';
+import type {
+  PanGesture,
+  PanGestureConfig,
+} from 'react-native-gesture-handler';
 
-// FIXME: Inline this type instead of getting it from react-native-gesture-handler
-// Otherwise, we get a type error:
-// Exported variable 'GestureDetector' has or is using name 'GestureDetectorProps' from external module ".." but cannot be named.
 type GestureDetectorProps = {
-  gesture: GestureType | undefined;
+  gesture: PanGesture | undefined;
   userSelect?: 'none' | 'auto' | 'text';
   children: React.ReactNode;
 };
@@ -21,15 +21,13 @@ export const GestureDetector = ({
 
 export const GestureHandlerRootView = View;
 
-export const Gesture:
-  | typeof import('react-native-gesture-handler').Gesture
-  | undefined = undefined;
+export function usePanGesture(config: PanGestureConfig) {
+  React.useDebugValue(config);
 
-export const enum GestureState {
-  UNDETERMINED = 0,
-  FAILED = 1,
-  BEGAN = 2,
-  CANCELLED = 3,
-  ACTIVE = 4,
-  END = 5,
+  return undefined;
 }
+
+export type {
+  PanGesture,
+  PanGestureConfig,
+} from 'react-native-gesture-handler';

package/src/views/GestureHandlerNative.tsx

@@ -1,7 +1,9 @@
-export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+export type {
+  PanGesture,
+  PanGestureConfig,
+} from 'react-native-gesture-handler';
 export {
-  Gesture,
   GestureDetector,
   GestureHandlerRootView,
-  State as GestureState,
+  usePanGesture,
 } from 'react-native-gesture-handler';