@react-navigation/drawer 6.1.5

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@react-navigation/drawer",
+  "description": "Drawer navigator component with animated transitions and gesturess",
+  "version": "6.1.5",
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android",
+    "material",
+    "drawer"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/drawer"
+  },
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org/docs/drawer-navigator/",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "@react-navigation/elements": "^1.1.1",
+    "color": "^3.1.3",
+    "warn-once": "^0.1.0"
+  },
+  "devDependencies": {
+    "@react-navigation/native": "^6.0.3",
+    "@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-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.3.0",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">= 1.0.0",
+    "react-native-reanimated": ">= 1.0.0",
+    "react-native-safe-area-context": ">= 3.0.0",
+    "react-native-screens": ">= 3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "gitHead": "38ac69f17ee314f96d3d4bcee02349fa4a02d422"
+}

package/src/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Navigators
+ */
+export { default as createDrawerNavigator } from './navigators/createDrawerNavigator';
+
+/**
+ * Views
+ */
+export { default as DrawerContent } from './views/DrawerContent';
+export { default as DrawerContentScrollView } from './views/DrawerContentScrollView';
+export { default as DrawerItem } from './views/DrawerItem';
+export { default as DrawerItemList } from './views/DrawerItemList';
+export { default as DrawerToggleButton } from './views/DrawerToggleButton';
+export { default as DrawerView } from './views/DrawerView';
+
+/**
+ * Utilities
+ */
+export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
+export { default as DrawerProgressContext } from './utils/DrawerProgressContext';
+export { default as getDrawerStatusFromState } from './utils/getDrawerStatusFromState';
+export { default as useDrawerProgress } from './utils/useDrawerProgress';
+export { default as useDrawerStatus } from './utils/useDrawerStatus';
+
+/**
+ * Types
+ */
+export type {
+  DrawerContentComponentProps,
+  DrawerHeaderProps,
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+  DrawerScreenProps,
+} from './types';

package/src/navigators/createDrawerNavigator.tsx

@@ -0,0 +1,134 @@
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  DrawerActionHelpers,
+  DrawerNavigationState,
+  DrawerRouter,
+  DrawerRouterOptions,
+  ParamListBase,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
+import type {
+  DrawerNavigationConfig,
+  DrawerNavigationEventMap,
+  DrawerNavigationOptions,
+} from '../types';
+import DrawerView from '../views/DrawerView';
+
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap
+> &
+  DrawerRouterOptions &
+  DrawerNavigationConfig;
+
+function DrawerNavigator({
+  initialRouteName,
+  defaultStatus,
+  backBehavior,
+  children,
+  screenListeners,
+  screenOptions,
+  // @ts-expect-error: openByDefault is deprecated
+  openByDefault,
+  // @ts-expect-error: lazy is deprecated
+  lazy,
+  // @ts-expect-error: drawerContentOptions is deprecated
+  drawerContentOptions,
+  ...rest
+}: Props) {
+  let defaultScreenOptions: DrawerNavigationOptions = {};
+
+  if (drawerContentOptions) {
+    Object.assign(defaultScreenOptions, {
+      drawerPosition: drawerContentOptions.drawerPosition,
+      drawerType: drawerContentOptions.drawerType,
+      swipeEdgeWidth: drawerContentOptions.edgeWidth,
+      drawerHideStatusBarOnOpen: drawerContentOptions.hideStatusBar,
+      keyboardDismissMode: drawerContentOptions.keyboardDismissMode,
+      swipeMinDistance: drawerContentOptions.minSwipeDistance,
+      overlayColor: drawerContentOptions.overlayColor,
+      drawerStatusBarAnimation: drawerContentOptions.statusBarAnimation,
+      gestureHandlerProps: drawerContentOptions.gestureHandlerProps,
+    });
+
+    (
+      Object.keys(defaultScreenOptions) as (keyof DrawerNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
+    warnOnce(
+      drawerContentOptions,
+      `Drawer Navigator: 'drawerContentOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
+        defaultScreenOptions,
+        null,
+        2
+      )}\n\nSee https://reactnavigation.org/docs/drawer-navigator#options for more details.`
+    );
+  }
+
+  if (typeof lazy === 'boolean') {
+    defaultScreenOptions.lazy = lazy;
+
+    warnOnce(
+      true,
+      `Drawer Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#lazy for more details.`
+    );
+  }
+
+  if (typeof openByDefault === 'boolean') {
+    warnOnce(
+      true,
+      `Drawer Navigator: 'openByDefault' is deprecated. Use 'defaultStatus' and set it to 'open' or 'closed' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#defaultstatus for more details.`
+    );
+  }
+
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      DrawerNavigationState<ParamListBase>,
+      DrawerRouterOptions,
+      DrawerActionHelpers<ParamListBase>,
+      DrawerNavigationOptions,
+      DrawerNavigationEventMap
+    >(DrawerRouter, {
+      initialRouteName,
+      defaultStatus:
+        defaultStatus !== undefined
+          ? defaultStatus
+          : openByDefault
+          ? 'open'
+          : 'closed',
+      backBehavior,
+      children,
+      screenListeners,
+      screenOptions,
+      defaultScreenOptions,
+    });
+
+  return (
+    <NavigationContent>
+      <DrawerView
+        {...rest}
+        state={state}
+        descriptors={descriptors}
+        navigation={navigation}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap,
+  typeof DrawerNavigator
+>(DrawerNavigator);

package/src/types.tsx

@@ -0,0 +1,300 @@
+import type { HeaderOptions } from '@react-navigation/elements';
+import type {
+  Descriptor,
+  DrawerActionHelpers,
+  DrawerNavigationState,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+  Route,
+  RouteProp,
+} from '@react-navigation/native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  PanGestureHandler,
+  PanGestureHandlerProperties,
+} from 'react-native-gesture-handler';
+
+export type Scene = {
+  route: Route<string>;
+  focused: boolean;
+  color?: string;
+};
+
+export type Layout = { width: number; height: number };
+
+export type DrawerNavigationConfig = {
+  /**
+   * Function that returns React element to render as the content of the drawer, for example, navigation items.
+   * Defaults to `DrawerContent`.
+   */
+  drawerContent?: (props: DrawerContentComponentProps) => React.ReactNode;
+  /**
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true`.
+   */
+  detachInactiveScreens?: boolean;
+  /**
+   * Whether to use the legacy implementation based on Reanimated 1.
+   * The new implementation based on Reanimated 2 will perform better,
+   * but you need additional configuration and need to use Hermes with Flipper to debug.
+   *
+   * This defaults to `true` in following cases:
+   * - Reanimated 2 is not configured
+   * - App is connected to Chrome debugger (Reanimated 2 cannot be used with Chrome debugger)
+   *
+   * Otherwise, it defaults to `false`
+   */
+  useLegacyImplementation?: boolean;
+};
+
+export type DrawerNavigationOptions = HeaderOptions & {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+
+  /**
+   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Set it to `false` if you want to render the screen on initial render.
+   */
+  lazy?: boolean;
+
+  /**
+   * Function that returns a React Element to display as a header.
+   */
+  header?: (props: DrawerHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. Setting this to `false` hides the header.
+   * Defaults to `true`.
+   */
+  headerShown?: boolean;
+
+  /**
+   * Title string of a screen displayed in the drawer
+   * or a function that given { focused: boolean, color: string } returns a React.Node
+   * When undefined, scene title is used.
+   */
+  drawerLabel?:
+    | string
+    | ((props: { color: string; focused: boolean }) => React.ReactNode);
+
+  /**
+   * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
+   */
+  drawerIcon?: (props: {
+    color: string;
+    size: number;
+    focused: boolean;
+  }) => React.ReactNode;
+
+  /**
+   * Color for the icon and label in the active item in the drawer.
+   */
+  drawerActiveTintColor?: string;
+
+  /**
+   * Background color for the active item in the drawer.
+   */
+  drawerActiveBackgroundColor?: string;
+
+  /**
+   * Color for the icon and label in the inactive items in the drawer.
+   */
+  drawerInactiveTintColor?: string;
+
+  /**
+   * Background color for the inactive items in the drawer.
+   */
+  drawerInactiveBackgroundColor?: string;
+
+  /**
+   * Style object for the single item, which can contain an icon and/or a label.
+   */
+  drawerItemStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object to apply to the `Text` inside content section which renders a label.
+   */
+  drawerLabelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Style object for the content section.
+   */
+  drawerContentContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the wrapper view.
+   */
+  drawerContentStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the drawer component.
+   * You can pass a custom background color for a drawer or a custom width here.
+   */
+  drawerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Position of the drawer on the screen. Defaults to `left`.
+   */
+  drawerPosition?: 'left' | 'right';
+
+  /**
+   * Type of the drawer. It determines how the drawer looks and animates.
+   * - `front`: Traditional drawer which covers the screen with a overlay behind it.
+   * - `back`: The drawer is revealed behind the screen on swipe.
+   * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+   * - `permanent`: A permanent drawer is shown as a sidebar.
+   */
+  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
+
+  /**
+   * Whether the statusbar should be hidden when the drawer is pulled or opens,
+   */
+  drawerHideStatusBarOnOpen?: boolean;
+
+  /**
+   * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
+   */
+  drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
+
+  /**
+   * Color of the overlay to be displayed on top of the content view when drawer gets open.
+   * The opacity is animated from `0` to `1` when the drawer opens.
+   */
+  overlayColor?: string;
+
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether you can use gestures to open or close the drawer.
+   * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
+   * See `swipeEnabled` to disable only the swipe gesture.
+   * Defaults to `true`.
+   * Not supported on Web.
+   */
+  gestureEnabled?: boolean;
+
+  /**
+   * Props to pass to the underlying pan gesture handler.
+   * Not supported on Web.
+   */
+  gestureHandlerProps?: PanGestureHandlerProperties;
+
+  /**
+   * Whether you can use swipe gestures to open or close the drawer.
+   * Defaults to `true`.
+   * Not supported on Web.
+   */
+  swipeEnabled?: boolean;
+
+  /**
+   * How far from the edge of the screen the swipe gesture should activate.
+   * Not supported on Web.
+   */
+  swipeEdgeWidth?: number;
+
+  /**
+   * Minimum swipe distance threshold that should activate opening the drawer.
+   */
+  swipeMinDistance?: number;
+
+  /**
+   * Whether the keyboard should be dismissed when the swipe gesture begins.
+   * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
+   */
+  keyboardDismissMode?: 'on-drag' | 'none';
+
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
+};
+
+export type DrawerContentComponentProps = {
+  state: DrawerNavigationState<ParamListBase>;
+  navigation: DrawerNavigationHelpers;
+  descriptors: DrawerDescriptorMap;
+};
+
+export type DrawerHeaderProps = {
+  /**
+   * Layout of the screen.
+   */
+  layout: Layout;
+  /**
+   * Options for the current screen.
+   */
+  options: DrawerNavigationOptions;
+  /**
+   * Route object for the current screen.
+   */
+  route: RouteProp<ParamListBase>;
+  /**
+   * Navigation prop for the header.
+   */
+  navigation: DrawerNavigationProp<ParamListBase>;
+};
+
+export type DrawerNavigationEventMap = {};
+
+export type DrawerNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  DrawerNavigationEventMap
+> &
+  DrawerActionHelpers<ParamListBase>;
+
+export type DrawerNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  DrawerNavigationState<ParamList>,
+  DrawerNavigationOptions,
+  DrawerNavigationEventMap
+> &
+  DrawerActionHelpers<ParamList>;
+
+export type DrawerScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList
+> = {
+  navigation: DrawerNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type DrawerDescriptor = Descriptor<
+  DrawerNavigationOptions,
+  DrawerNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type DrawerDescriptorMap = Record<string, DrawerDescriptor>;
+
+export type DrawerProps = {
+  dimensions: { width: number; height: number };
+  drawerPosition: 'left' | 'right';
+  drawerStyle?: StyleProp<ViewStyle>;
+  drawerType: 'front' | 'back' | 'slide' | 'permanent';
+  gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
+  hideStatusBarOnOpen: boolean;
+  keyboardDismissMode: 'none' | 'on-drag';
+  onClose: () => void;
+  onOpen: () => void;
+  open: boolean;
+  overlayStyle?: StyleProp<ViewStyle>;
+  renderDrawerContent: () => React.ReactNode;
+  renderSceneContent: () => React.ReactNode;
+  statusBarAnimation: 'slide' | 'none' | 'fade';
+  swipeDistanceThreshold: number;
+  swipeEdgeWidth: number;
+  swipeEnabled: boolean;
+  swipeVelocityThreshold: number;
+};

package/src/utils/DrawerGestureContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<React.RefObject<any> | null>(null);

package/src/utils/DrawerPositionContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<'left' | 'right' | undefined>(undefined);

package/src/utils/DrawerProgressContext.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type Animated from 'react-native-reanimated';
+
+export default React.createContext<
+  Readonly<Animated.SharedValue<number>> | Animated.Node<number> | undefined
+>(undefined);

package/src/utils/DrawerStatusContext.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const DrawerStatusContext =
+  React.createContext<'open' | 'closed' | undefined>(undefined);
+
+export default DrawerStatusContext;

package/src/utils/getDrawerStatusFromState.tsx

@@ -0,0 +1,20 @@
+import type {
+  DrawerNavigationState,
+  ParamListBase,
+} from '@react-navigation/native';
+
+export default function getDrawerStatusFromState(
+  state: DrawerNavigationState<ParamListBase>
+) {
+  if (state.history == null) {
+    throw new Error(
+      "Couldn't find the drawer status in the state object. Is it a valid state object of drawer navigator?"
+    );
+  }
+
+  const entry = state.history.find((it) => it.type === 'drawer') as
+    | { type: 'drawer'; status: 'open' }
+    | undefined;
+
+  return entry?.status ?? 'closed';
+}

package/src/utils/useDrawerProgress.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type Animated from 'react-native-reanimated';
+
+import DrawerProgressContext from './DrawerProgressContext';
+
+export default function useDrawerProgress():
+  | Readonly<Animated.SharedValue<number>>
+  | Animated.Node<number> {
+  const progress = React.useContext(DrawerProgressContext);
+
+  if (progress === undefined) {
+    throw new Error(
+      "Couldn't find a drawer. Is your component inside a drawer navigator?"
+    );
+  }
+
+  return progress;
+}

package/src/utils/useDrawerStatus.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+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() {
+  const drawerStatus = React.useContext(DrawerStatusContext);
+
+  if (drawerStatus === undefined) {
+    throw new Error(
+      "Couldn't find a drawer. Is your component inside a drawer navigator?"
+    );
+  }
+
+  return drawerStatus;
+}

package/src/views/DrawerContent.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import type { DrawerContentComponentProps } from '../types';
+import DrawerContentScrollView from './DrawerContentScrollView';
+import DrawerItemList from './DrawerItemList';
+
+export default function DrawerContent({
+  descriptors,
+  state,
+  ...rest
+}: DrawerContentComponentProps) {
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
+
+  const { drawerContentStyle, drawerContentContainerStyle } = focusedOptions;
+
+  return (
+    <DrawerContentScrollView
+      {...rest}
+      contentContainerStyle={drawerContentContainerStyle}
+      style={drawerContentStyle}
+    >
+      <DrawerItemList descriptors={descriptors} state={state} {...rest} />
+    </DrawerContentScrollView>
+  );
+}