@react-navigation/drawer 6.4.3 → 6.5.0

package/lib/typescript/src/views/ScreenFallback.d.ts

@@ -4,6 +4,7 @@ declare type Props = {
     visible: boolean;
     children: React.ReactNode;
     enabled: boolean;
+    freezeOnBlur?: boolean;
     style?: StyleProp<ViewStyle>;
 };
 export declare const MaybeScreenContainer: ({ enabled, ...rest }: ViewProps & {

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

@@ -2,11 +2,10 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 declare const Overlay: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | Animated.Node<React.ReactNode>;
+    removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
     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;
-    removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | Animated.Node<import("react-native").StyleProp<import("react-native").ViewStyle>>;
     testID?: string | Animated.Node<string | undefined> | undefined;
     nativeID?: string | Animated.Node<string | undefined> | undefined;
     collapsable?: boolean | Animated.Node<boolean | undefined> | undefined;

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

@@ -2,11 +2,10 @@ import * as React from 'react';
 import Animated from 'react-native-reanimated';
 declare const Overlay: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | Animated.Node<React.ReactNode>;
+    removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
     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;
-    removeClippedSubviews?: boolean | Animated.Node<boolean | undefined> | undefined;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle> | Animated.Node<import("react-native").StyleProp<import("react-native").ViewStyle>>;
     testID?: string | Animated.Node<string | undefined> | undefined;
     nativeID?: string | Animated.Node<string | undefined> | undefined;
     collapsable?: boolean | Animated.Node<boolean | undefined> | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "6.4.3",
+  "version": "6.5.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -37,27 +37,27 @@
     "access": "public"
   },
   "scripts": {
-    "prepare": "bob build",
+    "prepack": "bob build",
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.3.4",
+    "@react-navigation/elements": "^1.3.6",
     "color": "^4.2.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.11",
+    "@react-navigation/native": "^6.0.13",
     "@testing-library/react-native": "^7.2.0",
-    "@types/react": "^17.0.47",
-    "@types/react-native": "~0.68.1",
+    "@types/react": "~18.0.0",
+    "@types/react-native": "~0.69.1",
     "del-cli": "^3.0.1",
-    "react": "17.0.2",
-    "react-native": "~0.68.2",
+    "react": "18.0.0",
+    "react-native": "0.69.5",
     "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
@@ -82,5 +82,6 @@
         }
       ]
     ]
-  }
+  },
+  "gitHead": "fc4c3a63ab156e17db7ba0cbd32ada319f78714e"
 }

package/src/types.tsx

@@ -211,6 +211,15 @@ export type DrawerNavigationOptions = HeaderOptions & {
    * Defaults to `false`.
    */
   unmountOnBlur?: boolean;
+
+  /**
+   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+   * Requires `react-native-screens` version >=3.16.0.
+   *
+   * Only supported on iOS and Android.
+   */
+  freezeOnBlur?: boolean;
 };
 
 export type DrawerContentComponentProps = {

package/src/views/DrawerContentScrollView.tsx

@@ -20,7 +20,7 @@ function DrawerContentScrollView(
   const drawerPosition = React.useContext(DrawerPositionContext);
   const insets = useSafeAreaInsets();
 
-  const isRight = I18nManager.isRTL
+  const isRight = I18nManager.getConstants().isRTL
     ? drawerPosition === 'left'
     : drawerPosition === 'right';
 

package/src/views/DrawerView.tsx

@@ -84,6 +84,16 @@ function DrawerViewBase({
   // @ts-expect-error: the type definitions are incomplete
   useLegacyImplementation = !Reanimated.isConfigured?.(),
 }: Props) {
+  // Reanimated v3 dropped legacy v1 syntax
+  const legacyImplemenationNotAvailable =
+    require('react-native-reanimated').abs === undefined;
+
+  if (useLegacyImplementation && legacyImplemenationNotAvailable) {
+    throw new Error(
+      'The `useLegacyImplementation` prop is not available with Reanimated 3 as it no longer includes support for Reanimated 1 legacy API. Remove the `useLegacyImplementation` prop from `Drawer.Navigator` to be able to use it.'
+    );
+  }
+
   const Drawer: React.ComponentType<DrawerProps> = useLegacyImplementation
     ? require('./legacy/Drawer').default
     : require('./modern/Drawer').default;
@@ -91,7 +101,7 @@ function DrawerViewBase({
   const focusedRouteKey = state.routes[state.index].key;
   const {
     drawerHideStatusBarOnOpen = false,
-    drawerPosition = I18nManager.isRTL ? 'right' : 'left',
+    drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
     drawerStatusBarAnimation = 'slide',
     drawerStyle,
     drawerType = Platform.select({ ios: 'slide', default: 'front' }),
@@ -220,6 +230,7 @@ function DrawerViewBase({
           }
 
           const {
+            freezeOnBlur,
             header = ({ layout, options }: DrawerHeaderProps) => (
               <Header
                 {...options}
@@ -231,6 +242,9 @@ function DrawerViewBase({
                 }
               />
             ),
+            headerShown,
+            headerStatusBarHeight,
+            headerTransparent,
             sceneContainerStyle,
           } = descriptor.options;
 
@@ -240,14 +254,15 @@ function DrawerViewBase({
               style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              freezeOnBlur={freezeOnBlur}
             >
               <Screen
                 focused={isFocused}
                 route={descriptor.route}
                 navigation={descriptor.navigation}
-                headerShown={descriptor.options.headerShown}
-                headerTransparent={descriptor.options.headerTransparent}
-                headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
+                headerShown={headerShown}
+                headerStatusBarHeight={headerStatusBarHeight}
+                headerTransparent={headerTransparent}
                 header={header({
                   layout: dimensions,
                   route: descriptor.route,

package/src/views/GestureHandlerNative.tsx

@@ -16,9 +16,9 @@ export function PanGestureHandler(props: PanGestureHandlerProperties) {
   );
 }
 
+export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
 export {
   GestureHandlerRootView,
   State as GestureState,
-  PanGestureHandlerGestureEvent,
   TapGestureHandler,
 } from 'react-native-gesture-handler';

package/src/views/ScreenFallback.tsx

@@ -6,6 +6,7 @@ type Props = {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;
+  freezeOnBlur?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 

package/src/views/legacy/Drawer.tsx

@@ -502,7 +502,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
 
     const drawerTranslateX =
       drawerType === 'back'
-        ? I18nManager.isRTL
+        ? I18nManager.getConstants().isRTL
           ? multiply(
               sub(this.containerWidth, this.drawerWidth),
               isRight ? 1 : -1
@@ -513,7 +513,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
     const offset =
       drawerType === 'back'
         ? 0
-        : I18nManager.isRTL
+        : I18nManager.getConstants().isRTL
         ? '100%'
         : multiply(this.drawerWidth, -1);
 

package/src/views/modern/Drawer.tsx

@@ -258,6 +258,7 @@ export default function Drawer({
     return translateX;
   });
 
+  const isRTL = I18nManager.getConstants().isRTL;
   const drawerAnimatedStyle = useAnimatedStyle(() => {
     const distanceFromEdge = dimensions.width - drawerWidth;
 
@@ -273,10 +274,10 @@ export default function Drawer({
                   // The drawer stays in place when `drawerType` is `back`
                   (drawerType === 'back' ? 0 : translateX.value) +
                   (drawerPosition === 'left'
-                    ? I18nManager.isRTL
+                    ? isRTL
                       ? -distanceFromEdge
                       : 0
-                    : I18nManager.isRTL
+                    : isRTL
                     ? 0
                     : distanceFromEdge),
               },