react-native-drawer-layout 3.0.0 → 3.2.0

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(
@@ -502,6 +523,7 @@ export default class Drawer extends React.Component<Props> {
       renderDrawerContent,
       children,
       gestureHandlerProps,
+      overlayAccessibilityLabel,
     } = this.props;
 
     const isOpen = drawerType === 'permanent' ? true : open;
@@ -592,6 +614,7 @@ export default class Drawer extends React.Component<Props> {
                   <Overlay
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}
+                    accessibilityLabel={overlayAccessibilityLabel}
                     style={overlayStyle as any}
                     accessibilityElementsHidden={!isOpen}
                     importantForAccessibility={
@@ -619,7 +642,6 @@ export default class Drawer extends React.Component<Props> {
               />
             )}
             <Animated.View
-              accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
               removeClippedSubviews={Platform.OS !== 'ios'}
               onLayout={this.handleDrawerLayout}
               style={[

package/src/views/legacy/Overlay.tsx

@@ -18,10 +18,17 @@ const PROGRESS_EPSILON = 0.05;
 type Props = React.ComponentProps<typeof Animated.View> & {
   progress: Animated.Node<number>;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
-const Overlay = React.forwardRef(function Overlay(
-  { progress, onPress, style, ...props }: Props,
+export const Overlay = React.forwardRef(function Overlay(
+  {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  }: Props,
   ref: React.Ref<Animated.View>
 ) {
   const animatedStyle = {
@@ -48,7 +55,12 @@ const Overlay = React.forwardRef(function Overlay(
       ref={ref}
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
     >
-      <Pressable onPress={onPress} style={styles.pressable} />
+      <Pressable
+        onPress={onPress}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      />
     </Animated.View>
   );
 });
@@ -71,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,8 +54,14 @@ export default function Drawer({
   keyboardDismissMode,
   onClose,
   onOpen,
+  onGestureStart,
+  onGestureCancel,
+  onGestureEnd,
+  onTransitionStart,
+  onTransitionEnd,
   open,
   overlayStyle,
+  overlayAccessibilityLabel,
   statusBarAnimation,
   swipeEnabled,
   swipeEdgeWidth,
@@ -131,13 +138,15 @@ export default function Drawer({
     }
   };
 
-  const onGestureStart = () => {
+  const onGestureBegin = () => {
+    onGestureStart?.();
     startInteraction();
     hideKeyboard();
     hideStatusBar(true);
   };
 
   const onGestureFinish = () => {
+    onGestureEnd?.();
     endInteraction();
   };
 
@@ -154,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)();
@@ -178,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]);
@@ -193,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) => {
@@ -366,11 +406,11 @@ export default function Drawer({
                 progress={progress}
                 onPress={() => toggleDrawer(false)}
                 style={overlayStyle}
+                accessibilityLabel={overlayAccessibilityLabel}
               />
             ) : null}
           </Animated.View>
           <Animated.View
-            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
             removeClippedSubviews={Platform.OS !== 'ios'}
             style={[
               styles.container,

package/src/views/modern/Overlay.tsx

@@ -10,10 +10,17 @@ const PROGRESS_EPSILON = 0.05;
 type Props = React.ComponentProps<typeof Animated.View> & {
   progress: Animated.SharedValue<number>;
   onPress: () => void;
+  accessibilityLabel?: string;
 };
 
-const Overlay = React.forwardRef(function Overlay(
-  { progress, onPress, style, ...props }: Props,
+export const Overlay = React.forwardRef(function Overlay(
+  {
+    progress,
+    onPress,
+    style,
+    accessibilityLabel = 'Close drawer',
+    ...props
+  }: Props,
   ref: React.Ref<Animated.View>
 ) {
   const animatedStyle = useAnimatedStyle(() => {
@@ -42,7 +49,12 @@ const Overlay = React.forwardRef(function Overlay(
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
       animatedProps={animatedProps}
     >
-      <Pressable onPress={onPress} style={styles.pressable} />
+      <Pressable
+        onPress={onPress}
+        style={styles.pressable}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+      />
     </Animated.View>
   );
 });
@@ -66,5 +78,3 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
 });
-
-export default Overlay;