react-native-drawer-layout 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/views/Drawer.tsx

@@ -1,476 +1,150 @@
 import * as React from 'react';
-import {
-  I18nManager,
-  InteractionManager,
-  Keyboard,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedGestureHandler,
-  useAnimatedStyle,
-  useDerivedValue,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import useLatestCallback from 'use-latest-callback';
 
 import type { DrawerProps } from '../types';
 import { DrawerProgressContext } from '../utils/DrawerProgressContext';
-import {
-  GestureHandlerRootView,
-  GestureState,
-  PanGestureHandler,
-  type PanGestureHandlerGestureEvent,
-} from './GestureHandler';
+import { getDrawerWidth } from '../utils/getDrawerWidth';
+import { useFakeSharedValue } from '../utils/useFakeSharedValue';
 import { Overlay } from './Overlay';
 
-export const SWIPE_EDGE_WIDTH = 32;
-export const SWIPE_MIN_OFFSET = 5;
-export const SWIPE_MIN_DISTANCE = 60;
-export const SWIPE_MIN_VELOCITY = 500;
-
-export const DRAWER_BORDER_RADIUS = 16;
-
-const minmax = (value: number, start: number, end: number) => {
-  'worklet';
-
-  return Math.min(Math.max(value, start), end);
-};
-
-const getDefaultDrawerWidth = ({
-  height,
-  width,
-}: {
-  height: number;
-  width: number;
-}) => {
-  /*
-   * Default drawer width is screen width - header height
-   * with a max width of 280 on mobile and 320 on tablet
-   * https://material.io/components/navigation-drawer
-   */
-  const smallerAxisSize = Math.min(height, width);
-  const isLandscape = width > height;
-  const isTablet = smallerAxisSize >= 600;
-  const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
-  const maxWidth = isTablet ? 320 : 280;
-
-  return Math.min(smallerAxisSize - appBarHeight, maxWidth);
-};
-
 export function Drawer({
   layout: customLayout,
-  drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
+  drawerPosition = 'left',
   drawerStyle,
-  drawerType = Platform.select({ ios: 'slide', default: 'front' }),
-  gestureHandlerProps,
-  hideStatusBarOnOpen = false,
-  keyboardDismissMode = 'on-drag',
+  drawerType = 'front',
   onClose,
-  onOpen,
-  onGestureStart,
-  onGestureCancel,
-  onGestureEnd,
   onTransitionStart,
   onTransitionEnd,
   open,
   overlayStyle,
   overlayAccessibilityLabel,
-  statusBarAnimation = 'slide',
-  swipeEnabled = Platform.OS !== 'web' &&
-    Platform.OS !== 'windows' &&
-    Platform.OS !== 'macos',
-  swipeEdgeWidth = SWIPE_EDGE_WIDTH,
-  swipeMinDistance = SWIPE_MIN_DISTANCE,
-  swipeMinVelocity = SWIPE_MIN_VELOCITY,
   renderDrawerContent,
   children,
   style,
 }: DrawerProps) {
-  // FIXME: temporary workaround for useSafeAreaFrame not updating on Web
   const windowDimensions = useWindowDimensions();
-  const layout = customLayout ?? windowDimensions;
-
-  const getDrawerWidth = (): number => {
-    const { width = getDefaultDrawerWidth(layout) } =
-      StyleSheet.flatten(drawerStyle) || {};
-
-    if (typeof width === 'string' && width.endsWith('%')) {
-      // Try to calculate width if a percentage is given
-      const percentage = Number(width.replace(/%$/, ''));
-
-      if (Number.isFinite(percentage)) {
-        return layout.width * (percentage / 100);
-      }
-    }
-
-    return typeof width === 'number' ? width : 0;
-  };
-
-  const drawerWidth = getDrawerWidth();
-
-  const isOpen = drawerType === 'permanent' ? true : open;
-  const isRight = drawerPosition === 'right';
-
-  const getDrawerTranslationX = React.useCallback(
-    (open: boolean) => {
-      'worklet';
 
-      if (drawerPosition === 'left') {
-        return open ? 0 : -drawerWidth;
-      }
-
-      return open ? 0 : drawerWidth;
-    },
-    [drawerPosition, drawerWidth]
-  );
+  const layout = customLayout ?? windowDimensions;
+  const drawerWidth = getDrawerWidth({ layout, drawerStyle });
 
-  const hideStatusBar = React.useCallback(
-    (hide: boolean) => {
-      if (hideStatusBarOnOpen) {
-        StatusBar.setHidden(hide, statusBarAnimation);
-      }
-    },
-    [hideStatusBarOnOpen, statusBarAnimation]
-  );
+  const progress = useFakeSharedValue(open ? 1 : 0);
 
   React.useEffect(() => {
-    hideStatusBar(isOpen);
-
-    return () => hideStatusBar(false);
-  }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
-
-  const interactionHandleRef = React.useRef<number | null>(null);
-
-  const startInteraction = () => {
-    interactionHandleRef.current = InteractionManager.createInteractionHandle();
-  };
-
-  const endInteraction = () => {
-    if (interactionHandleRef.current != null) {
-      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
-      interactionHandleRef.current = null;
-    }
-  };
-
-  const hideKeyboard = () => {
-    if (keyboardDismissMode === 'on-drag') {
-      Keyboard.dismiss();
-    }
-  };
-
-  const onGestureBegin = () => {
-    onGestureStart?.();
-    startInteraction();
-    hideKeyboard();
-    hideStatusBar(true);
-  };
-
-  const onGestureFinish = () => {
-    onGestureEnd?.();
-    endInteraction();
-  };
-
-  const onGestureAbort = () => {
-    onGestureCancel?.();
-    endInteraction();
-  };
-
-  // FIXME: Currently hitSlop is broken when on Android when drawer is on right
-  // https://github.com/software-mansion/react-native-gesture-handler/issues/569
-  const hitSlop = isRight
-    ? // Extend hitSlop to the side of the screen when drawer is closed
-      // This lets the user drag the drawer from the side of the screen
-      { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
-    : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
-
-  const borderRadiiStyle = isRight
-    ? {
-        borderTopLeftRadius: DRAWER_BORDER_RADIUS,
-        borderBottomLeftRadius: DRAWER_BORDER_RADIUS,
-      }
-    : {
-        borderTopRightRadius: DRAWER_BORDER_RADIUS,
-        borderBottomRightRadius: DRAWER_BORDER_RADIUS,
-      };
+    progress.value = open ? 1 : 0;
+  }, [open, progress]);
 
-  const touchStartX = useSharedValue(0);
-  const touchX = useSharedValue(0);
-  const translationX = useSharedValue(getDrawerTranslationX(open));
-  const gestureState = useSharedValue<GestureState>(GestureState.UNDETERMINED);
+  const drawerRef = React.useRef<View>(null);
 
-  const handleAnimationStart = useLatestCallback((open: boolean) => {
-    onTransitionStart?.(!open);
+  const onTransitionStartLatest = useLatestCallback(() => {
+    onTransitionStart?.(open === false);
   });
 
-  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,
-        },
-        (finished) => runOnJS(handleAnimationEnd)(open, finished)
-      );
-
-      if (open) {
-        runOnJS(onOpen)();
-      } else {
-        runOnJS(onClose)();
-      }
-    },
-    [
-      getDrawerTranslationX,
-      handleAnimationEnd,
-      handleAnimationStart,
-      onClose,
-      onOpen,
-      touchStartX,
-      touchX,
-      translationX,
-    ]
-  );
-
-  React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
-
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number; hasCalledOnStart: boolean }
-  >({
-    onStart: (event, ctx) => {
-      ctx.hasCalledOnStart = false;
-      ctx.startX = translationX.value;
-      gestureState.value = event.state;
-      touchStartX.value = event.x;
-    },
-    onCancel: () => {
-      runOnJS(onGestureAbort)();
-    },
-    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 onGestureBegin is only
-      // called when the criteria is really met.
-      if (!ctx.hasCalledOnStart) {
-        ctx.hasCalledOnStart = true;
-        runOnJS(onGestureBegin)();
-      }
-    },
-    onEnd: (event) => {
-      gestureState.value = event.state;
-
-      const nextOpen =
-        (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
-          Math.abs(event.translationX) > swipeMinVelocity) ||
-        Math.abs(event.translationX) > swipeMinDistance
-          ? drawerPosition === 'left'
-            ? // If swiped to right, open the drawer, otherwise close it
-              (event.velocityX === 0 ? event.translationX : event.velocityX) > 0
-            : // If swiped to left, open the drawer, otherwise close it
-              (event.velocityX === 0 ? event.translationX : event.velocityX) < 0
-          : open;
-
-      toggleDrawer(nextOpen, event.velocityX);
-    },
-    onFinish: () => {
-      runOnJS(onGestureFinish)();
-    },
+  const onTransitionEndLatest = useLatestCallback(() => {
+    onTransitionEnd?.(open === false);
   });
 
-  const translateX = useDerivedValue(() => {
-    // Comment stolen from react-native-gesture-handler/DrawerLayout
-    //
-    // While closing the drawer when user starts gesture outside of its area (in greyed
-    // out part of the window), we want the drawer to follow only once finger reaches the
-    // edge of the drawer.
-    // E.g. on the diagram below drawer is illustrate by X signs and the greyed out area by
-    // dots. The touch gesture starts at '*' and moves left, touch path is indicated by
-    // an arrow pointing left
-    // 1) +---------------+ 2) +---------------+ 3) +---------------+ 4) +---------------+
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    |XXXXXXXX|......|    |XXXXXXXX|.<-*..|    |XXXXXXXX|<--*..|    |XXXXX|<-----*..|
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
-    //    +---------------+    +---------------+    +---------------+    +---------------+
-    //
-    // For the above to work properly we define animated value that will keep start position
-    // of the gesture. Then we use that value to calculate how much we need to subtract from
-    // the translationX. If the gesture started on the greyed out area we take the distance from the
-    // edge of the drawer to the start position. Otherwise we don't subtract at all and the
-    // drawer be pulled back as soon as you start the pan.
-    //
-    // This is used only when drawerType is "front"
-    const touchDistance =
-      drawerType === 'front' && gestureState.value === GestureState.ACTIVE
-        ? minmax(
-            drawerPosition === 'left'
-              ? touchStartX.value - drawerWidth
-              : layout.width - drawerWidth - touchStartX.value,
-            0,
-            layout.width
-          )
-        : 0;
-
-    const translateX =
-      drawerPosition === 'left'
-        ? minmax(translationX.value + touchDistance, -drawerWidth, 0)
-        : minmax(translationX.value - touchDistance, 0, drawerWidth);
-
-    return translateX;
-  });
+  React.useEffect(() => {
+    const element = drawerRef.current as HTMLDivElement | null;
 
-  const drawerAnimatedStyle = useAnimatedStyle(() => {
-    const distanceFromEdge = layout.width - drawerWidth;
+    if (element) {
+      element.addEventListener('transitionstart', onTransitionStartLatest);
+      element.addEventListener('transitionend', onTransitionEndLatest);
+    }
+  }, [onTransitionEndLatest, onTransitionStartLatest]);
 
-    return {
-      transform:
-        drawerType === 'permanent'
-          ? // Reanimated needs the property to be present, but it results in Browser bug
-            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
-            []
-          : [
-              {
-                translateX:
-                  // The drawer stays in place when `drawerType` is `back`
-                  (drawerType === 'back' ? 0 : translateX.value) +
-                  (drawerPosition === 'left' ? 0 : distanceFromEdge),
-              },
-            ],
-    };
-  });
+  const isOpen = drawerType === 'permanent' ? true : open;
+  const isRight = drawerPosition === 'right';
 
-  const contentAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform:
-        drawerType === 'permanent'
-          ? // Reanimated needs the property to be present, but it results in Browser bug
-            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
-            []
-          : [
-              {
-                translateX:
-                  // The screen content stays in place when `drawerType` is `front`
-                  drawerType === 'front'
+  const drawerAnimatedStyle =
+    drawerType !== 'permanent'
+      ? {
+          transition: 'transform 0.3s',
+          transform: [
+            {
+              // The drawer stays in place at open position when `drawerType` is `back`
+              translateX:
+                open || drawerType === 'back'
+                  ? drawerPosition === 'left'
                     ? 0
-                    : translateX.value +
-                      drawerWidth * (drawerPosition === 'left' ? 1 : -1),
-              },
-            ],
-    };
-  });
-
-  const progress = useDerivedValue(() => {
-    return drawerType === 'permanent'
-      ? 1
-      : interpolate(
-          translateX.value,
-          [getDrawerTranslationX(false), getDrawerTranslationX(true)],
-          [0, 1]
-        );
-  });
+                    : layout.width - drawerWidth
+                  : drawerPosition === 'left'
+                    ? -drawerWidth
+                    : layout.width,
+            },
+          ],
+        }
+      : null;
+
+  const contentAnimatedStyle =
+    drawerType !== 'permanent'
+      ? {
+          transition: 'transform 0.3s',
+          transform: [
+            {
+              translateX: open
+                ? // The screen content stays in place when `drawerType` is `front`
+                  drawerType === 'front'
+                  ? 0
+                  : drawerWidth * (drawerPosition === 'left' ? 1 : -1)
+                : 0,
+            },
+          ],
+        }
+      : null;
 
   return (
-    <GestureHandlerRootView style={[styles.container, style]}>
+    <View style={[styles.container, style]}>
       <DrawerProgressContext.Provider value={progress}>
-        <PanGestureHandler
-          activeOffsetX={[-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]}
-          failOffsetY={[-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]}
-          hitSlop={hitSlop}
-          enabled={drawerType !== 'permanent' && swipeEnabled}
-          onGestureEvent={onGestureEvent}
-          {...gestureHandlerProps}
+        <View
+          style={[
+            styles.main,
+            {
+              flexDirection:
+                drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',
+            },
+          ]}
         >
-          {/* Immediate child of gesture handler needs to be an Animated.View */}
-          <Animated.View
+          <View style={[styles.content, contentAnimatedStyle]}>
+            <View
+              accessibilityElementsHidden={isOpen && drawerType !== 'permanent'}
+              importantForAccessibility={
+                isOpen && drawerType !== 'permanent'
+                  ? 'no-hide-descendants'
+                  : 'auto'
+              }
+              style={styles.content}
+            >
+              {children}
+            </View>
+            {drawerType !== 'permanent' ? (
+              <Overlay
+                open={open}
+                progress={progress}
+                onPress={() => onClose()}
+                style={overlayStyle}
+                accessibilityLabel={overlayAccessibilityLabel}
+              />
+            ) : null}
+          </View>
+          <View
+            ref={drawerRef}
             style={[
-              styles.main,
+              styles.drawer,
               {
-                flexDirection:
-                  drawerType === 'permanent' && !isRight
-                    ? 'row-reverse'
-                    : 'row',
+                width: drawerWidth,
+                position: drawerType === 'permanent' ? 'relative' : 'absolute',
+                zIndex: drawerType === 'back' ? -1 : 0,
               },
+              drawerAnimatedStyle,
+              drawerStyle,
             ]}
           >
-            <Animated.View style={[styles.content, contentAnimatedStyle]}>
-              <View
-                accessibilityElementsHidden={
-                  isOpen && drawerType !== 'permanent'
-                }
-                importantForAccessibility={
-                  isOpen && drawerType !== 'permanent'
-                    ? 'no-hide-descendants'
-                    : 'auto'
-                }
-                style={styles.content}
-              >
-                {children}
-              </View>
-              {drawerType !== 'permanent' ? (
-                <Overlay
-                  progress={progress}
-                  onPress={() => toggleDrawer(false)}
-                  style={overlayStyle}
-                  accessibilityLabel={overlayAccessibilityLabel}
-                />
-              ) : null}
-            </Animated.View>
-            <Animated.View
-              removeClippedSubviews={Platform.OS !== 'ios'}
-              style={[
-                styles.drawer,
-                {
-                  width: drawerWidth,
-                  position:
-                    drawerType === 'permanent' ? 'relative' : 'absolute',
-                  zIndex: drawerType === 'back' ? -1 : 0,
-                },
-                drawerType === 'permanent' ? null : borderRadiiStyle,
-                drawerAnimatedStyle,
-                drawerStyle,
-              ]}
-            >
-              {renderDrawerContent()}
-            </Animated.View>
-          </Animated.View>
-        </PanGestureHandler>
+            {renderDrawerContent()}
+          </View>
+        </View>
       </DrawerProgressContext.Provider>
-    </GestureHandlerRootView>
+    </View>
   );
 }
 
@@ -489,11 +163,5 @@ const styles = StyleSheet.create({
   },
   main: {
     flex: 1,
-    ...Platform.select({
-      // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.
-      // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.
-      web: null,
-      default: { overflow: 'hidden' },
-    }),
   },
 });

package/src/views/Overlay.native.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+import type { OverlayProps } from '../types';
+
+const PROGRESS_EPSILON = 0.05;
+
+export function Overlay({
+  progress,
+  onPress,
+  style,
+  accessibilityLabel = 'Close drawer',
+  ...rest
+}: OverlayProps) {
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: progress.value,
+      // We don't want the user to be able to press through the overlay when drawer is open
+      // We can send the overlay behind the screen to avoid it
+      zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,
+    };
+  });
+
+  const animatedProps = useAnimatedProps(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+
+    return {
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+    } as const;
+  });
+
+  return (
+    <Animated.View
+      {...rest}
+      style={[styles.overlay, animatedStyle, style]}
+      animatedProps={animatedProps}
+    >
+      <Pressable
+        onPress={onPress}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      />
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  pressable: {
+    flex: 1,
+    pointerEvents: 'auto',
+  },
+});