@react-navigation/drawer 6.5.8 → 7.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/lib/commonjs/index.js +4 -6
  2. package/lib/commonjs/index.js.map +1 -1
  3. package/lib/commonjs/navigators/createDrawerNavigator.js +3 -43
  4. package/lib/commonjs/navigators/createDrawerNavigator.js.map +1 -1
  5. package/lib/commonjs/views/DrawerItem.js +13 -5
  6. package/lib/commonjs/views/DrawerItem.js.map +1 -1
  7. package/lib/commonjs/views/DrawerItemList.js +6 -6
  8. package/lib/commonjs/views/DrawerItemList.js.map +1 -1
  9. package/lib/commonjs/views/DrawerView.js +23 -58
  10. package/lib/commonjs/views/DrawerView.js.map +1 -1
  11. package/lib/module/index.js +1 -3
  12. package/lib/module/index.js.map +1 -1
  13. package/lib/module/navigators/createDrawerNavigator.js +3 -43
  14. package/lib/module/navigators/createDrawerNavigator.js.map +1 -1
  15. package/lib/module/views/DrawerItem.js +14 -6
  16. package/lib/module/views/DrawerItem.js.map +1 -1
  17. package/lib/module/views/DrawerItemList.js +7 -7
  18. package/lib/module/views/DrawerItemList.js.map +1 -1
  19. package/lib/module/views/DrawerView.js +23 -58
  20. package/lib/module/views/DrawerView.js.map +1 -1
  21. package/lib/typescript/src/index.d.ts +1 -3
  22. package/lib/typescript/src/index.d.ts.map +1 -1
  23. package/lib/typescript/src/navigators/createDrawerNavigator.d.ts +8 -3
  24. package/lib/typescript/src/navigators/createDrawerNavigator.d.ts.map +1 -1
  25. package/lib/typescript/src/types.d.ts +20 -14
  26. package/lib/typescript/src/types.d.ts.map +1 -1
  27. package/lib/typescript/src/views/DrawerItem.d.ts +18 -5
  28. package/lib/typescript/src/views/DrawerItem.d.ts.map +1 -1
  29. package/lib/typescript/src/views/DrawerItemList.d.ts +1 -1
  30. package/lib/typescript/src/views/DrawerItemList.d.ts.map +1 -1
  31. package/lib/typescript/src/views/DrawerToggleButton.d.ts +1 -1
  32. package/lib/typescript/src/views/DrawerToggleButton.d.ts.map +1 -1
  33. package/lib/typescript/src/views/DrawerView.d.ts +1 -1
  34. package/lib/typescript/src/views/DrawerView.d.ts.map +1 -1
  35. package/lib/typescript/src/views/ScreenFallback.d.ts +1 -1
  36. package/lib/typescript/src/views/ScreenFallback.d.ts.map +1 -1
  37. package/package.json +14 -14
  38. package/src/index.tsx +5 -3
  39. package/src/navigators/createDrawerNavigator.tsx +2 -72
  40. package/src/types.tsx +8 -1
  41. package/src/views/DrawerItem.tsx +33 -11
  42. package/src/views/DrawerItemList.tsx +5 -4
  43. package/src/views/DrawerView.tsx +17 -68
  44. package/lib/commonjs/utils/DrawerGestureContext.js +0 -12
  45. package/lib/commonjs/utils/DrawerGestureContext.js.map +0 -1
  46. package/lib/commonjs/utils/DrawerProgressContext.js +0 -12
  47. package/lib/commonjs/utils/DrawerProgressContext.js.map +0 -1
  48. package/lib/commonjs/utils/useDrawerProgress.js +0 -19
  49. package/lib/commonjs/utils/useDrawerProgress.js.map +0 -1
  50. package/lib/commonjs/views/GestureHandler.android.js +0 -17
  51. package/lib/commonjs/views/GestureHandler.android.js.map +0 -1
  52. package/lib/commonjs/views/GestureHandler.ios.js +0 -17
  53. package/lib/commonjs/views/GestureHandler.ios.js.map +0 -1
  54. package/lib/commonjs/views/GestureHandler.js +0 -32
  55. package/lib/commonjs/views/GestureHandler.js.map +0 -1
  56. package/lib/commonjs/views/GestureHandlerNative.js +0 -37
  57. package/lib/commonjs/views/GestureHandlerNative.js.map +0 -1
  58. package/lib/commonjs/views/legacy/Drawer.js +0 -419
  59. package/lib/commonjs/views/legacy/Drawer.js.map +0 -1
  60. package/lib/commonjs/views/legacy/Overlay.js +0 -71
  61. package/lib/commonjs/views/legacy/Overlay.js.map +0 -1
  62. package/lib/commonjs/views/modern/Drawer.js +0 -303
  63. package/lib/commonjs/views/modern/Drawer.js.map +0 -1
  64. package/lib/commonjs/views/modern/Overlay.js +0 -66
  65. package/lib/commonjs/views/modern/Overlay.js.map +0 -1
  66. package/lib/module/utils/DrawerGestureContext.js +0 -3
  67. package/lib/module/utils/DrawerGestureContext.js.map +0 -1
  68. package/lib/module/utils/DrawerProgressContext.js +0 -3
  69. package/lib/module/utils/DrawerProgressContext.js.map +0 -1
  70. package/lib/module/utils/useDrawerProgress.js +0 -10
  71. package/lib/module/utils/useDrawerProgress.js.map +0 -1
  72. package/lib/module/views/GestureHandler.android.js +0 -2
  73. package/lib/module/views/GestureHandler.android.js.map +0 -1
  74. package/lib/module/views/GestureHandler.ios.js +0 -2
  75. package/lib/module/views/GestureHandler.ios.js.map +0 -1
  76. package/lib/module/views/GestureHandler.js +0 -20
  77. package/lib/module/views/GestureHandler.js.map +0 -1
  78. package/lib/module/views/GestureHandlerNative.js +0 -11
  79. package/lib/module/views/GestureHandlerNative.js.map +0 -1
  80. package/lib/module/views/legacy/Drawer.js +0 -409
  81. package/lib/module/views/legacy/Drawer.js.map +0 -1
  82. package/lib/module/views/legacy/Overlay.js +0 -61
  83. package/lib/module/views/legacy/Overlay.js.map +0 -1
  84. package/lib/module/views/modern/Drawer.js +0 -294
  85. package/lib/module/views/modern/Drawer.js.map +0 -1
  86. package/lib/module/views/modern/Overlay.js +0 -57
  87. package/lib/module/views/modern/Overlay.js.map +0 -1
  88. package/lib/typescript/src/utils/DrawerGestureContext.d.ts +0 -4
  89. package/lib/typescript/src/utils/DrawerGestureContext.d.ts.map +0 -1
  90. package/lib/typescript/src/utils/DrawerProgressContext.d.ts +0 -5
  91. package/lib/typescript/src/utils/DrawerProgressContext.d.ts.map +0 -1
  92. package/lib/typescript/src/utils/useDrawerProgress.d.ts +0 -3
  93. package/lib/typescript/src/utils/useDrawerProgress.d.ts.map +0 -1
  94. package/lib/typescript/src/views/GestureHandler.android.d.ts +0 -2
  95. package/lib/typescript/src/views/GestureHandler.android.d.ts.map +0 -1
  96. package/lib/typescript/src/views/GestureHandler.d.ts +0 -15
  97. package/lib/typescript/src/views/GestureHandler.d.ts.map +0 -1
  98. package/lib/typescript/src/views/GestureHandler.ios.d.ts +0 -2
  99. package/lib/typescript/src/views/GestureHandler.ios.d.ts.map +0 -1
  100. package/lib/typescript/src/views/GestureHandlerNative.d.ts +0 -6
  101. package/lib/typescript/src/views/GestureHandlerNative.d.ts.map +0 -1
  102. package/lib/typescript/src/views/legacy/Drawer.d.ts +0 -45
  103. package/lib/typescript/src/views/legacy/Drawer.d.ts.map +0 -1
  104. package/lib/typescript/src/views/legacy/Overlay.d.ts +0 -74
  105. package/lib/typescript/src/views/legacy/Overlay.d.ts.map +0 -1
  106. package/lib/typescript/src/views/modern/Drawer.d.ts +0 -4
  107. package/lib/typescript/src/views/modern/Drawer.d.ts.map +0 -1
  108. package/lib/typescript/src/views/modern/Overlay.d.ts +0 -74
  109. package/lib/typescript/src/views/modern/Overlay.d.ts.map +0 -1
  110. package/src/utils/DrawerGestureContext.tsx +0 -3
  111. package/src/utils/DrawerProgressContext.tsx +0 -6
  112. package/src/utils/useDrawerProgress.tsx +0 -18
  113. package/src/views/GestureHandler.android.tsx +0 -1
  114. package/src/views/GestureHandler.ios.tsx +0 -1
  115. package/src/views/GestureHandler.tsx +0 -29
  116. package/src/views/GestureHandlerNative.tsx +0 -24
  117. package/src/views/legacy/Drawer.tsx +0 -671
  118. package/src/views/legacy/Overlay.tsx +0 -75
  119. package/src/views/modern/Drawer.tsx +0 -424
  120. package/src/views/modern/Overlay.tsx +0 -70
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { DrawerNavigationState, DrawerStatus, ParamListBase } from '@react-navigation/native';
3
3
  import type { DrawerDescriptorMap, DrawerNavigationConfig, DrawerNavigationHelpers } from '../types';
4
- declare type Props = DrawerNavigationConfig & {
4
+ type Props = DrawerNavigationConfig & {
5
5
  defaultStatus: DrawerStatus;
6
6
  state: DrawerNavigationState<ParamListBase>;
7
7
  navigation: DrawerNavigationHelpers;
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":";AAMA,OAAO,EAEL,qBAAqB,EACrB,YAAY,EACZ,aAAa,EAEd,MAAM,0BAA0B,CAAC;AAYlC,OAAO,KAAK,EAEV,mBAAmB,EAEnB,sBAAsB,EACtB,uBAAuB,EAGxB,MAAM,UAAU,CAAC;AASlB,aAAK,KAAK,GAAG,sBAAsB,GAAG;IACpC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AAuRF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAQhE"}
1
+ {"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":";AAMA,OAAO,EAEL,qBAAqB,EACrB,YAAY,EACZ,aAAa,EAEd,MAAM,0BAA0B,CAAC;AAMlC,OAAO,KAAK,EAEV,mBAAmB,EAEnB,sBAAsB,EACtB,uBAAuB,EAExB,MAAM,UAAU,CAAC;AAQlB,KAAK,KAAK,GAAG,sBAAsB,GAAG;IACpC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CAClC,CAAC;AA8OF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAMhE"}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { StyleProp, ViewProps, ViewStyle } from 'react-native';
3
- declare type Props = {
3
+ type Props = {
4
4
  visible: boolean;
5
5
  children: React.ReactNode;
6
6
  enabled: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"ScreenFallback.d.ts","sourceRoot":"","sources":["../../../../src/views/ScreenFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,aAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAUF,eAAO,MAAM,oBAAoB;aAItB,OAAO;kBACF,OAAO;cACX,MAAM,SAAS;iBAO1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAchE"}
1
+ {"version":3,"file":"ScreenFallback.d.ts","sourceRoot":"","sources":["../../../../src/views/ScreenFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAUF,eAAO,MAAM,oBAAoB;aAItB,OAAO;kBACF,OAAO;cACX,MAAM,SAAS;iBAO1B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,eAchE"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-navigation/drawer",
3
3
  "description": "Drawer navigator component with animated transitions and gesturess",
4
- "version": "6.5.8",
4
+ "version": "7.0.0-alpha.0",
5
5
  "keywords": [
6
6
  "react-native-component",
7
7
  "react-component",
@@ -41,24 +41,24 @@
41
41
  "clean": "del lib"
42
42
  },
43
43
  "dependencies": {
44
- "@react-navigation/elements": "^1.3.14",
44
+ "@react-navigation/elements": "^1.3.9-alpha.0",
45
45
  "color": "^4.2.3",
46
- "warn-once": "^0.1.0"
46
+ "react-native-drawer-layout": "^3.1.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@react-navigation/native": "^6.1.3",
49
+ "@react-navigation/native": "^7.0.0-alpha.0",
50
50
  "@testing-library/react-native": "^11.5.0",
51
- "@types/react": "~18.0.0",
52
- "@types/react-native": "~0.69.1",
53
- "del-cli": "^3.0.1",
54
- "react": "18.0.0",
55
- "react-native": "0.69.5",
51
+ "@types/react": "~18.0.26",
52
+ "@types/react-native": "~0.70.8",
53
+ "del-cli": "^5.0.0",
54
+ "react": "18.1.0",
55
+ "react-native": "0.70.5",
56
56
  "react-native-builder-bob": "^0.20.3",
57
- "react-native-gesture-handler": "~2.5.0",
57
+ "react-native-gesture-handler": "~2.8.0",
58
58
  "react-native-reanimated": "~2.9.1",
59
- "react-native-safe-area-context": "4.3.1",
60
- "react-native-screens": "~3.15.0",
61
- "typescript": "^4.7.4"
59
+ "react-native-safe-area-context": "4.4.1",
60
+ "react-native-screens": "~3.18.0",
61
+ "typescript": "^4.9.4"
62
62
  },
63
63
  "peerDependencies": {
64
64
  "@react-navigation/native": "^6.0.0",
@@ -83,5 +83,5 @@
83
83
  ]
84
84
  ]
85
85
  },
86
- "gitHead": "ef3f7377ef1a5623bc38273b63663b0f7bd39815"
86
+ "gitHead": "ad722b882e0c40b1d1bc025d70112ddb126f265e"
87
87
  }
package/src/index.tsx CHANGED
@@ -16,12 +16,14 @@ export { default as DrawerView } from './views/DrawerView';
16
16
  /**
17
17
  * Utilities
18
18
  */
19
- export { default as DrawerGestureContext } from './utils/DrawerGestureContext';
20
- export { default as DrawerProgressContext } from './utils/DrawerProgressContext';
21
19
  export { default as DrawerStatusContext } from './utils/DrawerStatusContext';
22
20
  export { default as getDrawerStatusFromState } from './utils/getDrawerStatusFromState';
23
- export { default as useDrawerProgress } from './utils/useDrawerProgress';
24
21
  export { default as useDrawerStatus } from './utils/useDrawerStatus';
22
+ export {
23
+ DrawerGestureContext,
24
+ DrawerProgressContext,
25
+ useDrawerProgress,
26
+ } from 'react-native-drawer-layout';
25
27
 
26
28
  /**
27
29
  * Types
@@ -5,12 +5,10 @@ import {
5
5
  DrawerNavigationState,
6
6
  DrawerRouter,
7
7
  DrawerRouterOptions,
8
- DrawerStatus,
9
8
  ParamListBase,
10
9
  useNavigationBuilder,
11
10
  } from '@react-navigation/native';
12
11
  import * as React from 'react';
13
- import warnOnce from 'warn-once';
14
12
 
15
13
  import type {
16
14
  DrawerNavigationConfig,
@@ -31,80 +29,13 @@ type Props = DefaultNavigatorOptions<
31
29
  function DrawerNavigator({
32
30
  id,
33
31
  initialRouteName,
34
- defaultStatus: customDefaultStatus,
32
+ defaultStatus = 'closed',
35
33
  backBehavior,
36
34
  children,
37
35
  screenListeners,
38
36
  screenOptions,
39
- ...restWithDeprecated
37
+ ...rest
40
38
  }: Props) {
41
- const {
42
- // @ts-expect-error: openByDefault is deprecated
43
- openByDefault,
44
- // @ts-expect-error: lazy is deprecated
45
- lazy,
46
- // @ts-expect-error: drawerContentOptions is deprecated
47
- drawerContentOptions,
48
- ...rest
49
- } = restWithDeprecated;
50
-
51
- let defaultScreenOptions: DrawerNavigationOptions = {};
52
-
53
- if (drawerContentOptions) {
54
- Object.assign(defaultScreenOptions, {
55
- drawerPosition: drawerContentOptions.drawerPosition,
56
- drawerType: drawerContentOptions.drawerType,
57
- swipeEdgeWidth: drawerContentOptions.edgeWidth,
58
- drawerHideStatusBarOnOpen: drawerContentOptions.hideStatusBar,
59
- keyboardDismissMode: drawerContentOptions.keyboardDismissMode,
60
- swipeMinDistance: drawerContentOptions.minSwipeDistance,
61
- overlayColor: drawerContentOptions.overlayColor,
62
- drawerStatusBarAnimation: drawerContentOptions.statusBarAnimation,
63
- gestureHandlerProps: drawerContentOptions.gestureHandlerProps,
64
- });
65
-
66
- (
67
- Object.keys(defaultScreenOptions) as (keyof DrawerNavigationOptions)[]
68
- ).forEach((key) => {
69
- if (defaultScreenOptions[key] === undefined) {
70
- // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
71
- delete defaultScreenOptions[key];
72
- }
73
- });
74
-
75
- warnOnce(
76
- drawerContentOptions,
77
- `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(
78
- defaultScreenOptions,
79
- null,
80
- 2
81
- )}\n\nSee https://reactnavigation.org/docs/drawer-navigator#options for more details.`
82
- );
83
- }
84
-
85
- if (typeof lazy === 'boolean') {
86
- defaultScreenOptions.lazy = lazy;
87
-
88
- warnOnce(
89
- true,
90
- `Drawer Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/drawer-navigator/#lazy for more details.`
91
- );
92
- }
93
-
94
- if (typeof openByDefault === 'boolean') {
95
- warnOnce(
96
- true,
97
- `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.`
98
- );
99
- }
100
-
101
- const defaultStatus: DrawerStatus =
102
- customDefaultStatus !== undefined
103
- ? customDefaultStatus
104
- : openByDefault
105
- ? 'open'
106
- : 'closed';
107
-
108
39
  const { state, descriptors, navigation, NavigationContent } =
109
40
  useNavigationBuilder<
110
41
  DrawerNavigationState<ParamListBase>,
@@ -120,7 +51,6 @@ function DrawerNavigator({
120
51
  children,
121
52
  screenListeners,
122
53
  screenOptions,
123
- defaultScreenOptions,
124
54
  });
125
55
 
126
56
  return (
package/src/types.tsx CHANGED
@@ -38,7 +38,7 @@ export type DrawerNavigationConfig = {
38
38
  /**
39
39
  * Whether to use the legacy implementation based on Reanimated 1.
40
40
  * The new implementation based on Reanimated 2 will perform better,
41
- * but you need additional configuration and need to use Hermes with Flipper to debug.
41
+ * but it's not possible to use Chrome remote debugger.
42
42
  *
43
43
  * This defaults to `true` if Reanimated 2 is not configured.
44
44
  *
@@ -171,6 +171,12 @@ export type DrawerNavigationOptions = HeaderOptions & {
171
171
  */
172
172
  overlayColor?: string;
173
173
 
174
+ /**
175
+ * Accessibility label for the overlay. This is read by the screen reader when the user taps the overlay.
176
+ * Defaults to "Close drawer".
177
+ */
178
+ overlayAccessibilityLabel?: string;
179
+
174
180
  /**
175
181
  * Style object for the component wrapping the screen content.
176
182
  */
@@ -310,4 +316,5 @@ export type DrawerProps = {
310
316
  swipeEdgeWidth: number;
311
317
  swipeEnabled: boolean;
312
318
  swipeVelocityThreshold: number;
319
+ overlayAccessibilityLabel?: string;
313
320
  };
@@ -1,5 +1,5 @@
1
1
  import { PlatformPressable } from '@react-navigation/elements';
2
- import { Link, useTheme } from '@react-navigation/native';
2
+ import { CommonActions, Link, Route, useTheme } from '@react-navigation/native';
3
3
  import Color from 'color';
4
4
  import * as React from 'react';
5
5
  import {
@@ -13,6 +13,14 @@ import {
13
13
  } from 'react-native';
14
14
 
15
15
  type Props = {
16
+ /**
17
+ * The route object which should be specified by the drawer item.
18
+ */
19
+ route: Route<string>;
20
+ /**
21
+ * The `href` to use for the anchor tag on web
22
+ */
23
+ href?: string;
16
24
  /**
17
25
  * The label text of the item.
18
26
  */
@@ -27,10 +35,6 @@ type Props = {
27
35
  size: number;
28
36
  color: string;
29
37
  }) => React.ReactNode;
30
- /**
31
- * URL to use for the link to the tab.
32
- */
33
- to?: string;
34
38
  /**
35
39
  * Whether to highlight the drawer item as active.
36
40
  */
@@ -81,32 +85,44 @@ type Props = {
81
85
  * Whether label font should scale to respect Text Size accessibility settings.
82
86
  */
83
87
  allowFontScaling?: boolean;
88
+
89
+ /**
90
+ * Accessibility label for drawer item.
91
+ */
92
+ accessibilityLabel?: string;
93
+ /**
94
+ * ID to locate this drawer item in tests.
95
+ */
96
+ testID?: string;
84
97
  };
85
98
 
86
99
  const LinkPressable = ({
100
+ route,
101
+ href,
87
102
  children,
88
103
  style,
89
104
  onPress,
90
105
  onLongPress,
91
106
  onPressIn,
92
107
  onPressOut,
93
- to,
94
108
  accessibilityRole,
95
109
  ...rest
96
110
  }: Omit<React.ComponentProps<typeof PlatformPressable>, 'style'> & {
97
111
  style: StyleProp<ViewStyle>;
98
112
  } & {
99
- to?: string;
113
+ route: Route<string>;
114
+ href?: string;
100
115
  children: React.ReactNode;
101
116
  onPress?: () => void;
102
117
  }) => {
103
- if (Platform.OS === 'web' && to) {
118
+ if (Platform.OS === 'web') {
104
119
  // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
105
120
  // We need to use `onClick` to be able to prevent default browser handling of links.
106
121
  return (
107
122
  <Link
108
123
  {...rest}
109
- to={to}
124
+ href={href}
125
+ action={CommonActions.navigate(route.name, route.params)}
110
126
  style={[styles.button, style]}
111
127
  onPress={(e: any) => {
112
128
  if (
@@ -146,10 +162,11 @@ export default function DrawerItem(props: Props) {
146
162
  const { colors } = useTheme();
147
163
 
148
164
  const {
165
+ route,
166
+ href,
149
167
  icon,
150
168
  label,
151
169
  labelStyle,
152
- to,
153
170
  focused = false,
154
171
  allowFontScaling,
155
172
  activeTintColor = colors.primary,
@@ -160,6 +177,8 @@ export default function DrawerItem(props: Props) {
160
177
  onPress,
161
178
  pressColor,
162
179
  pressOpacity,
180
+ testID,
181
+ accessibilityLabel,
163
182
  ...rest
164
183
  } = props;
165
184
 
@@ -178,13 +197,16 @@ export default function DrawerItem(props: Props) {
178
197
  style={[styles.container, { borderRadius, backgroundColor }, style]}
179
198
  >
180
199
  <LinkPressable
200
+ testID={testID}
181
201
  onPress={onPress}
182
202
  style={[styles.wrapper, { borderRadius }]}
203
+ accessibilityLabel={accessibilityLabel}
183
204
  accessibilityRole="button"
184
205
  accessibilityState={{ selected: focused }}
185
206
  pressColor={pressColor}
186
207
  pressOpacity={pressOpacity}
187
- to={to}
208
+ route={route}
209
+ href={href}
188
210
  >
189
211
  <React.Fragment>
190
212
  {iconNode}
@@ -3,7 +3,7 @@ import {
3
3
  DrawerActions,
4
4
  DrawerNavigationState,
5
5
  ParamListBase,
6
- useLinkBuilder,
6
+ useLinkTools,
7
7
  } from '@react-navigation/native';
8
8
  import * as React from 'react';
9
9
 
@@ -24,7 +24,7 @@ export default function DrawerItemList({
24
24
  navigation,
25
25
  descriptors,
26
26
  }: Props) {
27
- const buildLink = useLinkBuilder();
27
+ const { buildHref } = useLinkTools();
28
28
 
29
29
  const focusedRoute = state.routes[state.index];
30
30
  const focusedDescriptor = descriptors[focusedRoute.key];
@@ -51,7 +51,7 @@ export default function DrawerItemList({
51
51
  navigation.dispatch({
52
52
  ...(focused
53
53
  ? DrawerActions.closeDrawer()
54
- : CommonActions.navigate({ name: route.name, merge: true })),
54
+ : CommonActions.navigate(route)),
55
55
  target: state.key,
56
56
  });
57
57
  }
@@ -69,6 +69,8 @@ export default function DrawerItemList({
69
69
  return (
70
70
  <DrawerItem
71
71
  key={route.key}
72
+ route={route}
73
+ href={buildHref(route.name, route.params)}
72
74
  label={
73
75
  drawerLabel !== undefined
74
76
  ? drawerLabel
@@ -85,7 +87,6 @@ export default function DrawerItemList({
85
87
  allowFontScaling={drawerAllowFontScaling}
86
88
  labelStyle={drawerLabelStyle}
87
89
  style={drawerItemStyle}
88
- to={buildLink(route.name, route.params)}
89
90
  onPress={onPress}
90
91
  />
91
92
  );
@@ -12,14 +12,8 @@ import {
12
12
  useTheme,
13
13
  } from '@react-navigation/native';
14
14
  import * as React from 'react';
15
- import {
16
- BackHandler,
17
- I18nManager,
18
- Platform,
19
- StyleSheet,
20
- View,
21
- } from 'react-native';
22
- import * as Reanimated from 'react-native-reanimated';
15
+ import { BackHandler, I18nManager, Platform, StyleSheet } from 'react-native';
16
+ import { Drawer } from 'react-native-drawer-layout';
23
17
  import { useSafeAreaFrame } from 'react-native-safe-area-context';
24
18
 
25
19
  import type {
@@ -29,14 +23,12 @@ import type {
29
23
  DrawerNavigationConfig,
30
24
  DrawerNavigationHelpers,
31
25
  DrawerNavigationProp,
32
- DrawerProps,
33
26
  } from '../types';
34
27
  import DrawerPositionContext from '../utils/DrawerPositionContext';
35
28
  import DrawerStatusContext from '../utils/DrawerStatusContext';
36
29
  import getDrawerStatusFromState from '../utils/getDrawerStatusFromState';
37
30
  import DrawerContent from './DrawerContent';
38
31
  import DrawerToggleButton from './DrawerToggleButton';
39
- import { GestureHandlerRootView } from './GestureHandler';
40
32
  import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
41
33
 
42
34
  type Props = DrawerNavigationConfig & {
@@ -46,29 +38,6 @@ type Props = DrawerNavigationConfig & {
46
38
  descriptors: DrawerDescriptorMap;
47
39
  };
48
40
 
49
- const getDefaultDrawerWidth = ({
50
- height,
51
- width,
52
- }: {
53
- height: number;
54
- width: number;
55
- }) => {
56
- /*
57
- * Default drawer width is screen width - header height
58
- * with a max width of 280 on mobile and 320 on tablet
59
- * https://material.io/components/navigation-drawer
60
- */
61
- const smallerAxisSize = Math.min(height, width);
62
- const isLandscape = width > height;
63
- const isTablet = smallerAxisSize >= 600;
64
- const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
65
- const maxWidth = isTablet ? 320 : 280;
66
-
67
- return Math.min(smallerAxisSize - appBarHeight, maxWidth);
68
- };
69
-
70
- const GestureHandlerWrapper = GestureHandlerRootView ?? View;
71
-
72
41
  function DrawerViewBase({
73
42
  state,
74
43
  navigation,
@@ -80,39 +49,23 @@ function DrawerViewBase({
80
49
  detachInactiveScreens = Platform.OS === 'web' ||
81
50
  Platform.OS === 'android' ||
82
51
  Platform.OS === 'ios',
83
- // Reanimated 2 is not configured
84
- // @ts-expect-error: the type definitions are incomplete
85
- useLegacyImplementation = !Reanimated.isConfigured?.(),
86
52
  }: Props) {
87
- // Reanimated v3 dropped legacy v1 syntax
88
- const legacyImplemenationNotAvailable =
89
- require('react-native-reanimated').abs === undefined;
90
-
91
- if (useLegacyImplementation && legacyImplemenationNotAvailable) {
92
- throw new Error(
93
- '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.'
94
- );
95
- }
96
-
97
- const Drawer: React.ComponentType<DrawerProps> = useLegacyImplementation
98
- ? require('./legacy/Drawer').default
99
- : require('./modern/Drawer').default;
100
-
101
53
  const focusedRouteKey = state.routes[state.index].key;
102
54
  const {
103
- drawerHideStatusBarOnOpen = false,
55
+ drawerHideStatusBarOnOpen,
104
56
  drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
105
- drawerStatusBarAnimation = 'slide',
57
+ drawerStatusBarAnimation,
106
58
  drawerStyle,
107
- drawerType = Platform.select({ ios: 'slide', default: 'front' }),
59
+ drawerType,
108
60
  gestureHandlerProps,
109
- keyboardDismissMode = 'on-drag',
61
+ keyboardDismissMode,
110
62
  overlayColor = 'rgba(0, 0, 0, 0.5)',
111
- swipeEdgeWidth = 32,
63
+ swipeEdgeWidth,
112
64
  swipeEnabled = Platform.OS !== 'web' &&
113
65
  Platform.OS !== 'windows' &&
114
66
  Platform.OS !== 'macos',
115
- swipeMinDistance = 60,
67
+ swipeMinDistance,
68
+ overlayAccessibilityLabel,
116
69
  } = descriptors[focusedRouteKey].options;
117
70
 
118
71
  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
@@ -287,21 +240,19 @@ function DrawerViewBase({
287
240
  open={drawerStatus !== 'closed'}
288
241
  onOpen={handleDrawerOpen}
289
242
  onClose={handleDrawerClose}
243
+ layout={dimensions}
290
244
  gestureHandlerProps={gestureHandlerProps}
291
245
  swipeEnabled={swipeEnabled}
292
246
  swipeEdgeWidth={swipeEdgeWidth}
293
- swipeVelocityThreshold={500}
294
- swipeDistanceThreshold={swipeMinDistance}
247
+ swipeMinDistance={swipeMinDistance}
295
248
  hideStatusBarOnOpen={drawerHideStatusBarOnOpen}
296
249
  statusBarAnimation={drawerStatusBarAnimation}
297
250
  keyboardDismissMode={keyboardDismissMode}
298
251
  drawerType={drawerType}
252
+ overlayAccessibilityLabel={overlayAccessibilityLabel}
299
253
  drawerPosition={drawerPosition}
300
254
  drawerStyle={[
301
- {
302
- width: getDefaultDrawerWidth(dimensions),
303
- backgroundColor: colors.card,
304
- },
255
+ { backgroundColor: colors.card },
305
256
  drawerType === 'permanent' &&
306
257
  (drawerPosition === 'left'
307
258
  ? {
@@ -316,9 +267,9 @@ function DrawerViewBase({
316
267
  ]}
317
268
  overlayStyle={{ backgroundColor: overlayColor }}
318
269
  renderDrawerContent={renderDrawerContent}
319
- renderSceneContent={renderSceneContent}
320
- dimensions={dimensions}
321
- />
270
+ >
271
+ {renderSceneContent()}
272
+ </Drawer>
322
273
  </DrawerStatusContext.Provider>
323
274
  );
324
275
  }
@@ -326,9 +277,7 @@ function DrawerViewBase({
326
277
  export default function DrawerView({ navigation, ...rest }: Props) {
327
278
  return (
328
279
  <SafeAreaProviderCompat>
329
- <GestureHandlerWrapper style={styles.content}>
330
- <DrawerViewBase navigation={navigation} {...rest} />
331
- </GestureHandlerWrapper>
280
+ <DrawerViewBase navigation={navigation} {...rest} />
332
281
  </SafeAreaProviderCompat>
333
282
  );
334
283
  }
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
- var _default = /*#__PURE__*/React.createContext(null);
11
- exports.default = _default;
12
- //# sourceMappingURL=DrawerGestureContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","createContext"],"sourceRoot":"../../src","sources":["DrawerGestureContext.tsx"],"mappings":";;;;;;AAAA;AAA+B;AAAA;AAAA,4BAEhBA,KAAK,CAACC,aAAa,CAA8B,IAAI,CAAC;AAAA"}
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var React = _interopRequireWildcard(require("react"));
8
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
- var _default = /*#__PURE__*/React.createContext(undefined);
11
- exports.default = _default;
12
- //# sourceMappingURL=DrawerProgressContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","createContext","undefined"],"sourceRoot":"../../src","sources":["DrawerProgressContext.tsx"],"mappings":";;;;;;AAAA;AAA+B;AAAA;AAAA,4BAGhBA,KAAK,CAACC,aAAa,CAEhCC,SAAS,CAAC;AAAA"}
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = useDrawerProgress;
7
- var React = _interopRequireWildcard(require("react"));
8
- var _DrawerProgressContext = _interopRequireDefault(require("./DrawerProgressContext"));
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
11
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
12
- function useDrawerProgress() {
13
- const progress = React.useContext(_DrawerProgressContext.default);
14
- if (progress === undefined) {
15
- throw new Error("Couldn't find a drawer. Is your component inside a drawer navigator?");
16
- }
17
- return progress;
18
- }
19
- //# sourceMappingURL=useDrawerProgress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useDrawerProgress","progress","React","useContext","DrawerProgressContext","undefined","Error"],"sourceRoot":"../../src","sources":["useDrawerProgress.tsx"],"mappings":";;;;;;AAAA;AAGA;AAA4D;AAAA;AAAA;AAE7C,SAASA,iBAAiB,GAEf;EACxB,MAAMC,QAAQ,GAAGC,KAAK,CAACC,UAAU,CAACC,8BAAqB,CAAC;EAExD,IAAIH,QAAQ,KAAKI,SAAS,EAAE;IAC1B,MAAM,IAAIC,KAAK,CACb,sEAAsE,CACvE;EACH;EAEA,OAAOL,QAAQ;AACjB"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _GestureHandlerNative = require("./GestureHandlerNative");
7
- Object.keys(_GestureHandlerNative).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _GestureHandlerNative[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _GestureHandlerNative[key];
14
- }
15
- });
16
- });
17
- //# sourceMappingURL=GestureHandler.android.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../src","sources":["GestureHandler.android.tsx"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- var _GestureHandlerNative = require("./GestureHandlerNative");
7
- Object.keys(_GestureHandlerNative).forEach(function (key) {
8
- if (key === "default" || key === "__esModule") return;
9
- if (key in exports && exports[key] === _GestureHandlerNative[key]) return;
10
- Object.defineProperty(exports, key, {
11
- enumerable: true,
12
- get: function () {
13
- return _GestureHandlerNative[key];
14
- }
15
- });
16
- });
17
- //# sourceMappingURL=GestureHandler.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sourceRoot":"../../src","sources":["GestureHandler.ios.tsx"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}