react-native-drawer-layout 4.0.0-alpha.5 → 4.0.0-alpha.7

package/src/views/Overlay.tsx

@@ -1,80 +1,47 @@
 import * as React from 'react';
-import { Platform, Pressable, StyleSheet } from 'react-native';
-import Animated, {
-  useAnimatedProps,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
+import { Pressable, StyleSheet, View } from 'react-native';
 
-const PROGRESS_EPSILON = 0.05;
-
-type Props = React.ComponentProps<typeof Animated.View> & {
-  progress: Animated.SharedValue<number>;
-  onPress: () => void;
-  accessibilityLabel?: string;
-};
-
-export const Overlay = React.forwardRef(function Overlay(
-  {
-    progress,
-    onPress,
-    style,
-    accessibilityLabel = 'Close drawer',
-    ...props
-  }: Props,
-  ref: React.Ref<Animated.View>
-) {
-  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;
-  });
+import type { OverlayProps } from '../types';
 
+export function Overlay({
+  open,
+  onPress,
+  style,
+  accessibilityLabel = 'Close drawer',
+  ...rest
+}: OverlayProps) {
   return (
-    <Animated.View
-      {...props}
-      ref={ref}
-      style={[styles.overlay, overlayStyle, animatedStyle, style]}
-      animatedProps={animatedProps}
+    <View
+      {...rest}
+      style={[
+        styles.overlay,
+        { opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none' },
+        style,
+      ]}
+      accessibilityElementsHidden={!open}
+      importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
     >
       <Pressable
         onPress={onPress}
-        style={styles.pressable}
+        style={[styles.pressable, { pointerEvents: open ? 'auto' : 'none' }]}
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
       />
-    </Animated.View>
+    </View>
   );
-});
-
-const overlayStyle = Platform.select<Record<string, string>>({
-  web: {
-    // Disable touch highlight on mobile Safari.
-    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.
-    WebkitTapHighlightColor: 'transparent',
-  },
-  default: {},
-});
+}
 
 const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // Disable touch highlight on mobile Safari.
+    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.
+    // @ts-expect-error: WebkitTapHighlightColor is web only
+    WebkitTapHighlightColor: 'transparent',
+    transition: 'opacity 0.3s',
   },
   pressable: {
     flex: 1,
-    pointerEvents: 'auto',
   },
 });

package/lib/commonjs/constants.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SWIPE_MIN_VELOCITY = exports.SWIPE_MIN_OFFSET = exports.SWIPE_MIN_DISTANCE = exports.SWIPE_EDGE_WIDTH = void 0;
-const SWIPE_EDGE_WIDTH = exports.SWIPE_EDGE_WIDTH = 32;
-const SWIPE_MIN_OFFSET = exports.SWIPE_MIN_OFFSET = 5;
-const SWIPE_MIN_DISTANCE = exports.SWIPE_MIN_DISTANCE = 60;
-const SWIPE_MIN_VELOCITY = exports.SWIPE_MIN_VELOCITY = 500;
-//# sourceMappingURL=constants.js.map

package/lib/commonjs/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SWIPE_EDGE_WIDTH","exports","SWIPE_MIN_OFFSET","SWIPE_MIN_DISTANCE","SWIPE_MIN_VELOCITY"],"sourceRoot":"../../src","sources":["constants.tsx"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,EAAE;AAC3B,MAAME,gBAAgB,GAAAD,OAAA,CAAAC,gBAAA,GAAG,CAAC;AAC1B,MAAMC,kBAAkB,GAAAF,OAAA,CAAAE,kBAAA,GAAG,EAAE;AAC7B,MAAMC,kBAAkB,GAAAH,OAAA,CAAAG,kBAAA,GAAG,GAAG"}

package/lib/module/constants.js

@@ -1,5 +0,0 @@
-export const SWIPE_EDGE_WIDTH = 32;
-export const SWIPE_MIN_OFFSET = 5;
-export const SWIPE_MIN_DISTANCE = 60;
-export const SWIPE_MIN_VELOCITY = 500;
-//# sourceMappingURL=constants.js.map

package/lib/module/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SWIPE_EDGE_WIDTH","SWIPE_MIN_OFFSET","SWIPE_MIN_DISTANCE","SWIPE_MIN_VELOCITY"],"sourceRoot":"../../src","sources":["constants.tsx"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,GAAG,EAAE;AAClC,OAAO,MAAMC,gBAAgB,GAAG,CAAC;AACjC,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC,OAAO,MAAMC,kBAAkB,GAAG,GAAG"}

package/lib/typescript/src/constants.d.ts

@@ -1,5 +0,0 @@
-export declare const SWIPE_EDGE_WIDTH = 32;
-export declare const SWIPE_MIN_OFFSET = 5;
-export declare const SWIPE_MIN_DISTANCE = 60;
-export declare const SWIPE_MIN_VELOCITY = 500;
-//# sourceMappingURL=constants.d.ts.map

package/lib/typescript/src/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/constants.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC"}

package/src/constants.tsx

@@ -1,4 +0,0 @@
-export const SWIPE_EDGE_WIDTH = 32;
-export const SWIPE_MIN_OFFSET = 5;
-export const SWIPE_MIN_DISTANCE = 60;
-export const SWIPE_MIN_VELOCITY = 500;