@react-navigation/drawer 6.1.8 → 6.2.0

package/lib/module/views/modern/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Overlay.tsx"],"names":["React","Platform","Pressable","StyleSheet","Animated","useAnimatedProps","useAnimatedStyle","PROGRESS_EPSILON","Overlay","forwardRef","progress","onPress","style","props","ref","animatedStyle","opacity","value","zIndex","animatedProps","active","pointerEvents","accessibilityElementsHidden","importantForAccessibility","styles","overlay","overlayStyle","pressable","select","web","WebkitTapHighlightColor","default","create","absoluteFillObject","backgroundColor","flex"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,UAA9B,QAAgD,cAAhD;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,gBAFF,QAGO,yBAHP;AAKA,MAAMC,gBAAgB,GAAG,IAAzB;AAOA,MAAMC,OAAO,gBAAGR,KAAK,CAACS,UAAN,CAAiB,SAASD,OAAT,CAC/B;AAAEE,EAAAA,QAAF;AAAYC,EAAAA,OAAZ;AAAqBC,EAAAA,KAArB;AAA4B,KAAGC;AAA/B,CAD+B,EAE/BC,GAF+B,EAG/B;AACA,QAAMC,aAAa,GAAGT,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLU,MAAAA,OAAO,EAAEN,QAAQ,CAACO,KADb;AAEL;AACA;AACAC,MAAAA,MAAM,EAAER,QAAQ,CAACO,KAAT,GAAiBV,gBAAjB,GAAoC,CAApC,GAAwC,CAAC;AAJ5C,KAAP;AAMD,GAPqC,CAAtC;AASA,QAAMY,aAAa,GAAGd,gBAAgB,CAAC,MAAM;AAC3C,UAAMe,MAAM,GAAGV,QAAQ,CAACO,KAAT,GAAiBV,gBAAhC;AAEA,WAAO;AACLc,MAAAA,aAAa,EAAED,MAAM,GAAG,MAAH,GAAY,MAD5B;AAELE,MAAAA,2BAA2B,EAAE,CAACF,MAFzB;AAGLG,MAAAA,yBAAyB,EAAEH,MAAM,GAAG,MAAH,GAAY;AAHxC,KAAP;AAKD,GARqC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMP,KADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,KAAK,EAAE,CAACU,MAAM,CAACC,OAAR,EAAiBC,YAAjB,EAA+BX,aAA/B,EAA8CH,KAA9C,CAHT;AAIE,IAAA,aAAa,EAAEO;AAJjB,mBAME,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAER,OAApB;AAA6B,IAAA,KAAK,EAAEa,MAAM,CAACG;AAA3C,IANF,CADF;AAUD,CAjCe,CAAhB;AAmCA,MAAMD,YAAY,GAAGzB,QAAQ,CAAC2B,MAAT,CAAwC;AAC3DC,EAAAA,GAAG,EAAE;AACH;AACA;AACAC,IAAAA,uBAAuB,EAAE;AAHtB,GADsD;AAM3DC,EAAAA,OAAO,EAAE;AANkD,CAAxC,CAArB;AASA,MAAMP,MAAM,GAAGrB,UAAU,CAAC6B,MAAX,CAAkB;AAC/BP,EAAAA,OAAO,EAAE,EACP,GAAGtB,UAAU,CAAC8B,kBADP;AAEPC,IAAAA,eAAe,EAAE;AAFV,GADsB;AAK/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,IAAI,EAAE;AADG;AALoB,CAAlB,CAAf;AAUA,eAAe3B,OAAf","sourcesContent":["import * as React from 'react';\nimport { Platform, Pressable, StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedStyle,\n} from 'react-native-reanimated';\n\nconst PROGRESS_EPSILON = 0.05;\n\ntype Props = React.ComponentProps<typeof Animated.View> & {\n  progress: Animated.SharedValue<number>;\n  onPress: () => void;\n};\n\nconst Overlay = React.forwardRef(function Overlay(\n  { progress, onPress, style, ...props }: Props,\n  ref: React.Ref<Animated.View>\n) {\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: progress.value,\n      // We don't want the user to be able to press through the overlay when drawer is open\n      // We can send the overlay behind the screen to avoid it\n      zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,\n    };\n  });\n\n  const animatedProps = useAnimatedProps(() => {\n    const active = progress.value > PROGRESS_EPSILON;\n\n    return {\n      pointerEvents: active ? 'auto' : 'none',\n      accessibilityElementsHidden: !active,\n      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',\n    } as const;\n  });\n\n  return (\n    <Animated.View\n      {...props}\n      ref={ref}\n      style={[styles.overlay, overlayStyle, animatedStyle, style]}\n      animatedProps={animatedProps}\n    >\n      <Pressable onPress={onPress} style={styles.pressable} />\n    </Animated.View>\n  );\n});\n\nconst overlayStyle = Platform.select<Record<string, string>>({\n  web: {\n    // Disable touch highlight on mobile Safari.\n    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.\n    WebkitTapHighlightColor: 'transparent',\n  },\n  default: {},\n});\n\nconst styles = StyleSheet.create({\n  overlay: {\n    ...StyleSheet.absoluteFillObject,\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n  },\n  pressable: {\n    flex: 1,\n  },\n});\n\nexport default Overlay;\n"]}
+{"version":3,"sources":["Overlay.tsx"],"names":["React","Platform","Pressable","StyleSheet","Animated","useAnimatedProps","useAnimatedStyle","PROGRESS_EPSILON","Overlay","forwardRef","ref","progress","onPress","style","props","animatedStyle","opacity","value","zIndex","animatedProps","active","pointerEvents","accessibilityElementsHidden","importantForAccessibility","styles","overlay","overlayStyle","pressable","select","web","WebkitTapHighlightColor","default","create","absoluteFillObject","backgroundColor","flex"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,UAA9B,QAAgD,cAAhD;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,gBAFF,QAGO,yBAHP;AAKA,MAAMC,gBAAgB,GAAG,IAAzB;AAOA,MAAMC,OAAO,gBAAGR,KAAK,CAACS,UAAN,CAAiB,SAASD,OAAT,OAE/BE,GAF+B,EAG/B;AAAA,MAFA;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,OAAZ;AAAqBC,IAAAA,KAArB;AAA4B,OAAGC;AAA/B,GAEA;AACA,QAAMC,aAAa,GAAGT,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLU,MAAAA,OAAO,EAAEL,QAAQ,CAACM,KADb;AAEL;AACA;AACAC,MAAAA,MAAM,EAAEP,QAAQ,CAACM,KAAT,GAAiBV,gBAAjB,GAAoC,CAApC,GAAwC,CAAC;AAJ5C,KAAP;AAMD,GAPqC,CAAtC;AASA,QAAMY,aAAa,GAAGd,gBAAgB,CAAC,MAAM;AAC3C,UAAMe,MAAM,GAAGT,QAAQ,CAACM,KAAT,GAAiBV,gBAAhC;AAEA,WAAO;AACLc,MAAAA,aAAa,EAAED,MAAM,GAAG,MAAH,GAAY,MAD5B;AAELE,MAAAA,2BAA2B,EAAE,CAACF,MAFzB;AAGLG,MAAAA,yBAAyB,EAAEH,MAAM,GAAG,MAAH,GAAY;AAHxC,KAAP;AAKD,GARqC,CAAtC;AAUA,sBACE,oBAAC,QAAD,CAAU,IAAV,eACMN,KADN;AAEE,IAAA,GAAG,EAAEJ,GAFP;AAGE,IAAA,KAAK,EAAE,CAACc,MAAM,CAACC,OAAR,EAAiBC,YAAjB,EAA+BX,aAA/B,EAA8CF,KAA9C,CAHT;AAIE,IAAA,aAAa,EAAEM;AAJjB,mBAME,oBAAC,SAAD;AAAW,IAAA,OAAO,EAAEP,OAApB;AAA6B,IAAA,KAAK,EAAEY,MAAM,CAACG;AAA3C,IANF,CADF;AAUD,CAjCe,CAAhB;AAmCA,MAAMD,YAAY,GAAGzB,QAAQ,CAAC2B,MAAT,CAAwC;AAC3DC,EAAAA,GAAG,EAAE;AACH;AACA;AACAC,IAAAA,uBAAuB,EAAE;AAHtB,GADsD;AAM3DC,EAAAA,OAAO,EAAE;AANkD,CAAxC,CAArB;AASA,MAAMP,MAAM,GAAGrB,UAAU,CAAC6B,MAAX,CAAkB;AAC/BP,EAAAA,OAAO,EAAE,EACP,GAAGtB,UAAU,CAAC8B,kBADP;AAEPC,IAAAA,eAAe,EAAE;AAFV,GADsB;AAK/BP,EAAAA,SAAS,EAAE;AACTQ,IAAAA,IAAI,EAAE;AADG;AALoB,CAAlB,CAAf;AAUA,eAAe3B,OAAf","sourcesContent":["import * as React from 'react';\nimport { Platform, Pressable, StyleSheet } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedStyle,\n} from 'react-native-reanimated';\n\nconst PROGRESS_EPSILON = 0.05;\n\ntype Props = React.ComponentProps<typeof Animated.View> & {\n  progress: Animated.SharedValue<number>;\n  onPress: () => void;\n};\n\nconst Overlay = React.forwardRef(function Overlay(\n  { progress, onPress, style, ...props }: Props,\n  ref: React.Ref<Animated.View>\n) {\n  const animatedStyle = useAnimatedStyle(() => {\n    return {\n      opacity: progress.value,\n      // We don't want the user to be able to press through the overlay when drawer is open\n      // We can send the overlay behind the screen to avoid it\n      zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,\n    };\n  });\n\n  const animatedProps = useAnimatedProps(() => {\n    const active = progress.value > PROGRESS_EPSILON;\n\n    return {\n      pointerEvents: active ? 'auto' : 'none',\n      accessibilityElementsHidden: !active,\n      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',\n    } as const;\n  });\n\n  return (\n    <Animated.View\n      {...props}\n      ref={ref}\n      style={[styles.overlay, overlayStyle, animatedStyle, style]}\n      animatedProps={animatedProps}\n    >\n      <Pressable onPress={onPress} style={styles.pressable} />\n    </Animated.View>\n  );\n});\n\nconst overlayStyle = Platform.select<Record<string, string>>({\n  web: {\n    // Disable touch highlight on mobile Safari.\n    // WebkitTapHighlightColor must be used outside of StyleSheet.create because react-native-web will omit the property.\n    WebkitTapHighlightColor: 'transparent',\n  },\n  default: {},\n});\n\nconst styles = StyleSheet.create({\n  overlay: {\n    ...StyleSheet.absoluteFillObject,\n    backgroundColor: 'rgba(0, 0, 0, 0.5)',\n  },\n  pressable: {\n    flex: 1,\n  },\n});\n\nexport default Overlay;\n"]}

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

@@ -22,4 +22,4 @@ export { default as useDrawerStatus } from './utils/useDrawerStatus';
 /**
  * Types
  */
-export type { DrawerContentComponentProps, DrawerHeaderProps, DrawerNavigationOptions, DrawerNavigationProp, DrawerScreenProps, } from './types';
+export type { DrawerContentComponentProps, DrawerHeaderProps, DrawerNavigationEventMap, DrawerNavigationOptions, DrawerNavigationProp, DrawerScreenProps, } from './types';

package/lib/typescript/src/utils/useDrawerStatus.d.ts

@@ -1,5 +1,6 @@
+import type { DrawerStatus } from '@react-navigation/native';
 /**
  * Hook to detect if the drawer's status in a parent navigator.
  * Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
  */
-export default function useDrawerStatus(): import("packages/routers/lib/typescript/src").DrawerStatus;
+export default function useDrawerStatus(): DrawerStatus;

package/lib/typescript/src/views/legacy/Overlay.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 declare const Overlay: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | Animated.Node<React.ReactNode>;
     hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
     pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
@@ -61,6 +62,9 @@ declare const Overlay: React.ForwardRefExoticComponent<{
     accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
 } & {
     animatedProps?: Partial<Animated.AnimateProps<import("react-native").ViewProps>> | undefined;
+    layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
+    entering?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
+    exiting?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
 } & {
     progress: Animated.Node<number>;
     onPress: () => void;

package/lib/typescript/src/views/modern/Overlay.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Animated from 'react-native-reanimated';
 declare const Overlay: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | Animated.Node<React.ReactNode>;
     hitSlop?: import("react-native").Insets | Animated.Node<import("react-native").Insets | undefined> | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | Animated.Node<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
     pointerEvents?: "none" | "auto" | "box-none" | "box-only" | Animated.Node<"none" | "auto" | "box-none" | "box-only" | undefined> | undefined;
@@ -61,6 +62,9 @@ declare const Overlay: React.ForwardRefExoticComponent<{
     accessibilityIgnoresInvertColors?: boolean | Animated.Node<boolean | undefined> | undefined;
 } & {
     animatedProps?: Partial<Animated.AnimateProps<import("react-native").ViewProps>> | undefined;
+    layout?: import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").LayoutAnimationFunction | typeof import("react-native-reanimated").BaseAnimationBuilder | undefined;
+    entering?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
+    exiting?: import("react-native-reanimated").BaseAnimationBuilder | typeof import("react-native-reanimated").BaseAnimationBuilder | import("react-native-reanimated").EntryExitAnimationFunction | import("react-native-reanimated").Keyframe | undefined;
 } & {
     progress: Animated.SharedValue<number>;
     onPress: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "6.1.8",
+  "version": "6.2.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,23 +41,23 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.2.1",
+    "@react-navigation/elements": "^1.3.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/native": "^6.0.7",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",
     "del-cli": "^3.0.1",
-    "react": "~16.13.1",
-    "react-native": "~0.63.4",
+    "react": "17.0.1",
+    "react-native": "~0.64.3",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "~3.2.0",
-    "react-native-screens": "~3.8.0",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
     "typescript": "^4.3.2"
   },
   "peerDependencies": {
@@ -83,5 +83,5 @@
       ]
     ]
   },
-  "gitHead": "e77a5ab9d342a03cd8e20b54938700dfd4e23f42"
+  "gitHead": "4c5805867ce946d99ba17f71b4d6086bb8751262"
 }

package/src/index.tsx

@@ -28,6 +28,7 @@ export { default as useDrawerStatus } from './utils/useDrawerStatus';
 export type {
   DrawerContentComponentProps,
   DrawerHeaderProps,
+  DrawerNavigationEventMap,
   DrawerNavigationOptions,
   DrawerNavigationProp,
   DrawerScreenProps,

package/src/utils/DrawerStatusContext.tsx

@@ -1,7 +1,8 @@
 import type { DrawerStatus } from '@react-navigation/native';
 import * as React from 'react';
 
-const DrawerStatusContext =
-  React.createContext<DrawerStatus | undefined>(undefined);
+const DrawerStatusContext = React.createContext<DrawerStatus | undefined>(
+  undefined
+);
 
 export default DrawerStatusContext;

package/src/utils/useDrawerStatus.tsx

@@ -1,3 +1,4 @@
+import type { DrawerStatus } from '@react-navigation/native';
 import * as React from 'react';
 
 import DrawerStatusContext from './DrawerStatusContext';
@@ -6,7 +7,7 @@ import DrawerStatusContext from './DrawerStatusContext';
  * Hook to detect if the drawer's status in a parent navigator.
  * Returns 'open' if the drawer is open, 'closed' if the drawer is closed.
  */
-export default function useDrawerStatus() {
+export default function useDrawerStatus(): DrawerStatus {
   const drawerStatus = React.useContext(DrawerStatusContext);
 
   if (drawerStatus === undefined) {

package/src/views/legacy/Drawer.tsx

@@ -553,9 +553,14 @@ export default class DrawerView extends React.Component<DrawerProps> {
             <Animated.View
               style={[
                 styles.content,
-                drawerType !== 'permanent'
-                  ? { transform: [{ translateX: contentTranslateX }] }
-                  : undefined,
+                {
+                  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
+                        undefined
+                      : [{ translateX: contentTranslateX }],
+                },
               ]}
             >
               <View
@@ -609,12 +614,15 @@ export default class DrawerView extends React.Component<DrawerProps> {
               onLayout={this.handleDrawerLayout}
               style={[
                 styles.container,
-                drawerType === 'permanent'
-                  ? { opacity: 1 }
-                  : {
-                      transform: [{ translateX: drawerTranslateX }],
-                      opacity: this.drawerOpacity,
-                    },
+                {
+                  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
+                        undefined
+                      : [{ translateX: drawerTranslateX }],
+                  opacity: this.drawerOpacity,
+                },
                 drawerType === 'permanent'
                   ? // Without this, the `left`/`right` values don't get reset
                     isRight

package/src/views/legacy/Overlay.tsx

@@ -3,6 +3,7 @@ import { Platform, Pressable, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 const {
+  // @ts-expect-error: this is to support reanimated 1
   interpolate: interpolateDeprecated,
   interpolateNode,
   cond,

package/src/views/modern/Drawer.tsx

@@ -260,35 +260,37 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX: drawerType === 'back' ? 0 : translateX.value,
-        },
-      ],
+      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
+            undefined
+          : [
+              {
+                translateX: drawerType === 'back' ? 0 : translateX.value,
+              },
+            ],
     };
   });
 
   const contentAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX:
-            drawerType === 'front'
-              ? 0
-              : drawerPosition === 'left'
-              ? drawerWidth + translateX.value
-              : translateX.value - drawerWidth,
-        },
-      ],
+      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
+            undefined
+          : [
+              {
+                translateX:
+                  drawerType === 'front'
+                    ? 0
+                    : drawerPosition === 'left'
+                    ? drawerWidth + translateX.value
+                    : translateX.value - drawerWidth,
+              },
+            ],
     };
   });