@react-navigation/drawer 7.7.10 → 8.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.
- package/lib/module/index.js +1 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/navigators/createDrawerNavigator.js +7 -6
- package/lib/module/navigators/createDrawerNavigator.js.map +1 -1
- package/lib/module/views/DrawerItem.js +21 -11
- package/lib/module/views/DrawerItem.js.map +1 -1
- package/lib/module/views/DrawerToggleButton.js.map +1 -1
- package/lib/module/views/DrawerView.js +9 -15
- package/lib/module/views/DrawerView.js.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/navigators/createDrawerNavigator.d.ts +10 -6
- package/lib/typescript/src/navigators/createDrawerNavigator.d.ts.map +1 -1
- package/lib/typescript/src/types.d.ts +16 -20
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/views/DrawerItem.d.ts +8 -8
- package/lib/typescript/src/views/DrawerItem.d.ts.map +1 -1
- package/lib/typescript/src/views/DrawerToggleButton.d.ts +3 -3
- package/lib/typescript/src/views/DrawerToggleButton.d.ts.map +1 -1
- package/lib/typescript/src/views/DrawerView.d.ts.map +1 -1
- package/package.json +16 -15
- package/src/index.tsx +4 -1
- package/src/navigators/createDrawerNavigator.tsx +42 -25
- package/src/types.tsx +16 -25
- package/src/views/DrawerItem.tsx +33 -17
- package/src/views/DrawerToggleButton.tsx +9 -9
- package/src/views/DrawerView.tsx +14 -21
- package/lib/module/views/ScreenFallback.js +0 -45
- package/lib/module/views/ScreenFallback.js.map +0 -1
- package/lib/typescript/src/views/ScreenFallback.d.ts +0 -18
- package/lib/typescript/src/views/ScreenFallback.d.ts.map +0 -1
- package/src/views/ScreenFallback.tsx +0 -56
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DrawerView.d.ts","sourceRoot":"","sources":["../../../../src/views/DrawerView.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,aAAa,EAInB,MAAM,0BAA0B,CAAC;AAOlC,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;AAsTF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAMxD"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/drawer",
|
|
3
3
|
"description": "Integration for the drawer component from react-native-drawer-layout",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "8.0.0-alpha.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -46,35 +46,36 @@
|
|
|
46
46
|
"clean": "del lib"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@react-navigation/elements": "^
|
|
49
|
+
"@react-navigation/elements": "^3.0.0-alpha.0",
|
|
50
50
|
"color": "^4.2.3",
|
|
51
|
-
"react-native-drawer-layout": "^
|
|
52
|
-
"use-latest-callback": "^0.2
|
|
51
|
+
"react-native-drawer-layout": "^5.0.0-alpha.0",
|
|
52
|
+
"use-latest-callback": "^0.3.2"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@jest/globals": "^30.0.0",
|
|
56
|
-
"@react-navigation/native": "^
|
|
56
|
+
"@react-navigation/native": "^8.0.0-alpha.0",
|
|
57
57
|
"@testing-library/react-native": "^13.2.1",
|
|
58
|
-
"@types/react": "~19.
|
|
58
|
+
"@types/react": "~19.1.10",
|
|
59
59
|
"del-cli": "^6.0.0",
|
|
60
60
|
"react": "19.1.0",
|
|
61
|
-
"react-native": "0.81.
|
|
62
|
-
"react-native-builder-bob": "^0.40.
|
|
61
|
+
"react-native": "0.81.4",
|
|
62
|
+
"react-native-builder-bob": "^0.40.12",
|
|
63
63
|
"react-native-gesture-handler": "~2.28.0",
|
|
64
|
-
"react-native-reanimated": "
|
|
64
|
+
"react-native-reanimated": "4.1.3",
|
|
65
65
|
"react-native-safe-area-context": "~5.6.0",
|
|
66
66
|
"react-native-screens": "^4.19.0",
|
|
67
|
+
"react-native-worklets": "0.6.1",
|
|
67
68
|
"react-test-renderer": "19.1.0",
|
|
68
69
|
"typescript": "^5.9.2"
|
|
69
70
|
},
|
|
70
71
|
"peerDependencies": {
|
|
71
|
-
"@react-navigation/native": "^
|
|
72
|
-
"react": ">=
|
|
72
|
+
"@react-navigation/native": "^8.0.0-alpha.0",
|
|
73
|
+
"react": ">= 19.0.0",
|
|
73
74
|
"react-native": "*",
|
|
74
75
|
"react-native-gesture-handler": ">= 2.0.0",
|
|
75
|
-
"react-native-reanimated": ">=
|
|
76
|
-
"react-native-safe-area-context": ">=
|
|
77
|
-
"react-native-screens": ">= 4.
|
|
76
|
+
"react-native-reanimated": ">= 4.0.0",
|
|
77
|
+
"react-native-safe-area-context": ">= 5.5.0",
|
|
78
|
+
"react-native-screens": ">= 4.19.0"
|
|
78
79
|
},
|
|
79
80
|
"react-native-builder-bob": {
|
|
80
81
|
"source": "src",
|
|
@@ -94,5 +95,5 @@
|
|
|
94
95
|
]
|
|
95
96
|
]
|
|
96
97
|
},
|
|
97
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "46daae524ec6a59737147ed506222dd09a5b6e39"
|
|
98
99
|
}
|
package/src/index.tsx
CHANGED
|
@@ -4,9 +4,12 @@ import {
|
|
|
4
4
|
type DrawerNavigationState,
|
|
5
5
|
DrawerRouter,
|
|
6
6
|
type DrawerRouterOptions,
|
|
7
|
-
type NavigatorTypeBagBase,
|
|
8
7
|
type ParamListBase,
|
|
9
8
|
type StaticConfig,
|
|
9
|
+
type StaticParamList,
|
|
10
|
+
type StaticScreenConfig,
|
|
11
|
+
type StaticScreenConfigLinking,
|
|
12
|
+
type StaticScreenConfigScreen,
|
|
10
13
|
type TypedNavigator,
|
|
11
14
|
useNavigationBuilder,
|
|
12
15
|
} from '@react-navigation/native';
|
|
@@ -20,17 +23,16 @@ import type {
|
|
|
20
23
|
import { DrawerView } from '../views/DrawerView';
|
|
21
24
|
|
|
22
25
|
function DrawerNavigator({
|
|
23
|
-
id,
|
|
24
26
|
initialRouteName,
|
|
25
27
|
defaultStatus = 'closed',
|
|
26
28
|
backBehavior,
|
|
27
|
-
|
|
29
|
+
routeNamesChangeBehavior,
|
|
28
30
|
children,
|
|
29
31
|
layout,
|
|
30
32
|
screenListeners,
|
|
31
33
|
screenOptions,
|
|
32
34
|
screenLayout,
|
|
33
|
-
|
|
35
|
+
router,
|
|
34
36
|
...rest
|
|
35
37
|
}: DrawerNavigatorProps) {
|
|
36
38
|
const { state, descriptors, navigation, NavigationContent } =
|
|
@@ -41,17 +43,16 @@ function DrawerNavigator({
|
|
|
41
43
|
DrawerNavigationOptions,
|
|
42
44
|
DrawerNavigationEventMap
|
|
43
45
|
>(DrawerRouter, {
|
|
44
|
-
id,
|
|
45
46
|
initialRouteName,
|
|
46
47
|
defaultStatus,
|
|
47
48
|
backBehavior,
|
|
48
|
-
|
|
49
|
+
routeNamesChangeBehavior,
|
|
49
50
|
children,
|
|
50
51
|
layout,
|
|
51
52
|
screenListeners,
|
|
52
53
|
screenOptions,
|
|
53
54
|
screenLayout,
|
|
54
|
-
|
|
55
|
+
router,
|
|
55
56
|
});
|
|
56
57
|
|
|
57
58
|
return (
|
|
@@ -67,25 +68,41 @@ function DrawerNavigator({
|
|
|
67
68
|
);
|
|
68
69
|
}
|
|
69
70
|
|
|
71
|
+
type DrawerTypeBag<ParamList extends {}> = {
|
|
72
|
+
ParamList: ParamList;
|
|
73
|
+
State: DrawerNavigationState<ParamList>;
|
|
74
|
+
ScreenOptions: DrawerNavigationOptions;
|
|
75
|
+
EventMap: DrawerNavigationEventMap;
|
|
76
|
+
NavigationList: {
|
|
77
|
+
[RouteName in keyof ParamList]: DrawerNavigationProp<ParamList, RouteName>;
|
|
78
|
+
};
|
|
79
|
+
Navigator: typeof DrawerNavigator;
|
|
80
|
+
};
|
|
81
|
+
|
|
70
82
|
export function createDrawerNavigator<
|
|
71
83
|
const ParamList extends ParamListBase,
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
NavigationList: {
|
|
80
|
-
[RouteName in keyof ParamList]: DrawerNavigationProp<
|
|
81
|
-
ParamList,
|
|
82
|
-
RouteName,
|
|
83
|
-
NavigatorID
|
|
84
|
-
>;
|
|
85
|
-
};
|
|
86
|
-
Navigator: typeof DrawerNavigator;
|
|
87
|
-
},
|
|
88
|
-
const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
|
|
89
|
-
>(config?: Config): TypedNavigator<TypeBag, Config> {
|
|
84
|
+
>(): TypedNavigator<DrawerTypeBag<ParamList>, undefined>;
|
|
85
|
+
export function createDrawerNavigator<
|
|
86
|
+
const Config extends StaticConfig<DrawerTypeBag<ParamListBase>>,
|
|
87
|
+
>(
|
|
88
|
+
config: Config
|
|
89
|
+
): TypedNavigator<DrawerTypeBag<StaticParamList<{ config: Config }>>, Config>;
|
|
90
|
+
export function createDrawerNavigator(config?: unknown) {
|
|
90
91
|
return createNavigatorFactory(DrawerNavigator)(config);
|
|
91
92
|
}
|
|
93
|
+
|
|
94
|
+
export function createDrawerScreen<
|
|
95
|
+
const Linking extends StaticScreenConfigLinking,
|
|
96
|
+
const Screen extends StaticScreenConfigScreen,
|
|
97
|
+
>(
|
|
98
|
+
config: StaticScreenConfig<
|
|
99
|
+
Linking,
|
|
100
|
+
Screen,
|
|
101
|
+
DrawerNavigationState<ParamListBase>,
|
|
102
|
+
DrawerNavigationOptions,
|
|
103
|
+
DrawerNavigationEventMap,
|
|
104
|
+
DrawerNavigationProp<ParamListBase>
|
|
105
|
+
>
|
|
106
|
+
) {
|
|
107
|
+
return config;
|
|
108
|
+
}
|
package/src/types.tsx
CHANGED
|
@@ -12,13 +12,13 @@ import type {
|
|
|
12
12
|
RouteProp,
|
|
13
13
|
Theme,
|
|
14
14
|
} from '@react-navigation/native';
|
|
15
|
-
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
15
|
+
import type { ColorValue, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
16
16
|
import type { PanGesture } from 'react-native-gesture-handler';
|
|
17
17
|
|
|
18
18
|
export type Scene = {
|
|
19
19
|
route: Route<string>;
|
|
20
20
|
focused: boolean;
|
|
21
|
-
color?:
|
|
21
|
+
color?: ColorValue;
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export type Layout = { width: number; height: number };
|
|
@@ -62,18 +62,18 @@ export type DrawerNavigationOptions = HeaderOptions & {
|
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
64
|
* Title string of a screen displayed in the drawer
|
|
65
|
-
* or a function that given { focused: boolean, color:
|
|
65
|
+
* or a function that given { focused: boolean, color: ColorValue } returns a React.Node
|
|
66
66
|
* When undefined, scene title is used.
|
|
67
67
|
*/
|
|
68
68
|
drawerLabel?:
|
|
69
69
|
| string
|
|
70
|
-
| ((props: { color:
|
|
70
|
+
| ((props: { color: ColorValue; focused: boolean }) => React.ReactNode);
|
|
71
71
|
|
|
72
72
|
/**
|
|
73
|
-
* A function that given { focused: boolean, color:
|
|
73
|
+
* A function that given { focused: boolean, color: ColorValue } returns a React.Node to display an icon the drawer.
|
|
74
74
|
*/
|
|
75
75
|
drawerIcon?: (props: {
|
|
76
|
-
color:
|
|
76
|
+
color: ColorValue;
|
|
77
77
|
size: number;
|
|
78
78
|
focused: boolean;
|
|
79
79
|
}) => React.ReactNode;
|
|
@@ -81,22 +81,22 @@ export type DrawerNavigationOptions = HeaderOptions & {
|
|
|
81
81
|
/**
|
|
82
82
|
* Color for the icon and label in the active item in the drawer.
|
|
83
83
|
*/
|
|
84
|
-
drawerActiveTintColor?:
|
|
84
|
+
drawerActiveTintColor?: ColorValue;
|
|
85
85
|
|
|
86
86
|
/**
|
|
87
87
|
* Background color for the active item in the drawer.
|
|
88
88
|
*/
|
|
89
|
-
drawerActiveBackgroundColor?:
|
|
89
|
+
drawerActiveBackgroundColor?: ColorValue;
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
92
|
* Color for the icon and label in the inactive items in the drawer.
|
|
93
93
|
*/
|
|
94
|
-
drawerInactiveTintColor?:
|
|
94
|
+
drawerInactiveTintColor?: ColorValue;
|
|
95
95
|
|
|
96
96
|
/**
|
|
97
97
|
* Background color for the inactive items in the drawer.
|
|
98
98
|
*/
|
|
99
|
-
drawerInactiveBackgroundColor?:
|
|
99
|
+
drawerInactiveBackgroundColor?: ColorValue;
|
|
100
100
|
|
|
101
101
|
/**
|
|
102
102
|
* Whether label font should scale to respect Text Size accessibility settings.
|
|
@@ -159,7 +159,7 @@ export type DrawerNavigationOptions = HeaderOptions & {
|
|
|
159
159
|
* Color of the overlay to be displayed on top of the content view when drawer gets open.
|
|
160
160
|
* The opacity is animated from `0` to `1` when the drawer opens.
|
|
161
161
|
*/
|
|
162
|
-
|
|
162
|
+
overlayStyle?: StyleProp<ViewStyle>;
|
|
163
163
|
|
|
164
164
|
/**
|
|
165
165
|
* Accessibility label for the overlay. This is read by the screen reader when the user taps the overlay.
|
|
@@ -224,10 +224,6 @@ export type DrawerContentComponentProps = {
|
|
|
224
224
|
};
|
|
225
225
|
|
|
226
226
|
export type DrawerHeaderProps = {
|
|
227
|
-
/**
|
|
228
|
-
* Layout of the screen.
|
|
229
|
-
*/
|
|
230
|
-
layout: Layout;
|
|
231
227
|
/**
|
|
232
228
|
* Options for the current screen.
|
|
233
229
|
*/
|
|
@@ -278,31 +274,27 @@ export type DrawerNavigationHelpers = NavigationHelpers<
|
|
|
278
274
|
export type DrawerNavigationProp<
|
|
279
275
|
ParamList extends ParamListBase,
|
|
280
276
|
RouteName extends keyof ParamList = keyof ParamList,
|
|
281
|
-
NavigatorID extends string | undefined = undefined,
|
|
282
277
|
> = NavigationProp<
|
|
283
278
|
ParamList,
|
|
284
279
|
RouteName,
|
|
285
|
-
NavigatorID,
|
|
286
280
|
DrawerNavigationState<ParamList>,
|
|
287
281
|
DrawerNavigationOptions,
|
|
288
|
-
DrawerNavigationEventMap
|
|
289
|
-
>
|
|
290
|
-
|
|
282
|
+
DrawerNavigationEventMap,
|
|
283
|
+
DrawerActionHelpers<ParamList>
|
|
284
|
+
>;
|
|
291
285
|
|
|
292
286
|
export type DrawerScreenProps<
|
|
293
287
|
ParamList extends ParamListBase,
|
|
294
288
|
RouteName extends keyof ParamList = keyof ParamList,
|
|
295
|
-
NavigatorID extends string | undefined = undefined,
|
|
296
289
|
> = {
|
|
297
|
-
navigation: DrawerNavigationProp<ParamList, RouteName
|
|
290
|
+
navigation: DrawerNavigationProp<ParamList, RouteName>;
|
|
298
291
|
route: RouteProp<ParamList, RouteName>;
|
|
299
292
|
};
|
|
300
293
|
|
|
301
294
|
export type DrawerOptionsArgs<
|
|
302
295
|
ParamList extends ParamListBase,
|
|
303
296
|
RouteName extends keyof ParamList = keyof ParamList,
|
|
304
|
-
|
|
305
|
-
> = DrawerScreenProps<ParamList, RouteName, NavigatorID> & {
|
|
297
|
+
> = DrawerScreenProps<ParamList, RouteName> & {
|
|
306
298
|
theme: Theme;
|
|
307
299
|
};
|
|
308
300
|
|
|
@@ -338,7 +330,6 @@ export type DrawerProps = {
|
|
|
338
330
|
|
|
339
331
|
export type DrawerNavigatorProps = DefaultNavigatorOptions<
|
|
340
332
|
ParamListBase,
|
|
341
|
-
string | undefined,
|
|
342
333
|
DrawerNavigationState<ParamListBase>,
|
|
343
334
|
DrawerNavigationOptions,
|
|
344
335
|
DrawerNavigationEventMap,
|
package/src/views/DrawerItem.tsx
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { PlatformPressable, Text } from '@react-navigation/elements';
|
|
2
|
+
import { Color } from '@react-navigation/elements/internal';
|
|
2
3
|
import { type Route, useTheme } from '@react-navigation/native';
|
|
3
|
-
import Color from 'color';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import {
|
|
6
|
+
type ColorValue,
|
|
7
|
+
Platform,
|
|
6
8
|
type StyleProp,
|
|
7
9
|
StyleSheet,
|
|
8
10
|
type TextStyle,
|
|
@@ -24,14 +26,14 @@ type Props = {
|
|
|
24
26
|
*/
|
|
25
27
|
label:
|
|
26
28
|
| string
|
|
27
|
-
| ((props: { focused: boolean; color:
|
|
29
|
+
| ((props: { focused: boolean; color: ColorValue }) => React.ReactNode);
|
|
28
30
|
/**
|
|
29
31
|
* Icon to display for the `DrawerItem`.
|
|
30
32
|
*/
|
|
31
33
|
icon?: (props: {
|
|
32
34
|
focused: boolean;
|
|
33
35
|
size: number;
|
|
34
|
-
color:
|
|
36
|
+
color: ColorValue;
|
|
35
37
|
}) => React.ReactNode;
|
|
36
38
|
/**
|
|
37
39
|
* Whether to highlight the drawer item as active.
|
|
@@ -44,26 +46,26 @@ type Props = {
|
|
|
44
46
|
/**
|
|
45
47
|
* Color for the icon and label when the item is active.
|
|
46
48
|
*/
|
|
47
|
-
activeTintColor?:
|
|
49
|
+
activeTintColor?: ColorValue;
|
|
48
50
|
/**
|
|
49
51
|
* Color for the icon and label when the item is inactive.
|
|
50
52
|
*/
|
|
51
|
-
inactiveTintColor?:
|
|
53
|
+
inactiveTintColor?: ColorValue;
|
|
52
54
|
/**
|
|
53
55
|
* Background color for item when its active.
|
|
54
56
|
*/
|
|
55
|
-
activeBackgroundColor?:
|
|
57
|
+
activeBackgroundColor?: ColorValue;
|
|
56
58
|
/**
|
|
57
59
|
* Background color for item when its inactive.
|
|
58
60
|
*/
|
|
59
|
-
inactiveBackgroundColor?:
|
|
61
|
+
inactiveBackgroundColor?: ColorValue;
|
|
60
62
|
/**
|
|
61
63
|
* Color of the touchable effect on press.
|
|
62
64
|
* Only supported on Android.
|
|
63
65
|
*
|
|
64
66
|
* @platform android
|
|
65
67
|
*/
|
|
66
|
-
pressColor?:
|
|
68
|
+
pressColor?: ColorValue;
|
|
67
69
|
/**
|
|
68
70
|
* Opacity of the touchable effect on press.
|
|
69
71
|
* Only supported on iOS.
|
|
@@ -108,10 +110,8 @@ export function DrawerItem(props: Props) {
|
|
|
108
110
|
focused = false,
|
|
109
111
|
allowFontScaling,
|
|
110
112
|
activeTintColor = colors.primary,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
// eslint-disable-next-line @eslint-react/no-unstable-default-props
|
|
114
|
-
activeBackgroundColor = Color(activeTintColor).alpha(0.12).rgb().string(),
|
|
113
|
+
inactiveTintColor,
|
|
114
|
+
activeBackgroundColor,
|
|
115
115
|
inactiveBackgroundColor = 'transparent',
|
|
116
116
|
style,
|
|
117
117
|
onPress,
|
|
@@ -123,9 +123,15 @@ export function DrawerItem(props: Props) {
|
|
|
123
123
|
} = props;
|
|
124
124
|
|
|
125
125
|
const { borderRadius = 56 } = StyleSheet.flatten(style || {});
|
|
126
|
-
const color = focused
|
|
127
|
-
|
|
128
|
-
|
|
126
|
+
const color: ColorValue = focused
|
|
127
|
+
? activeTintColor
|
|
128
|
+
: (inactiveTintColor ??
|
|
129
|
+
Color(colors.text)?.alpha(0.68).string() ??
|
|
130
|
+
'rgba(0, 0, 0, 0.68)');
|
|
131
|
+
const backgroundColor: ColorValue = focused
|
|
132
|
+
? (activeBackgroundColor ??
|
|
133
|
+
Color(activeTintColor)?.alpha(0.12).string() ??
|
|
134
|
+
'rgba(0, 0, 0, 0.06)')
|
|
129
135
|
: inactiveBackgroundColor;
|
|
130
136
|
|
|
131
137
|
const iconNode = icon ? icon({ size: 24, focused, color }) : null;
|
|
@@ -144,8 +150,9 @@ export function DrawerItem(props: Props) {
|
|
|
144
150
|
aria-selected={focused}
|
|
145
151
|
pressColor={pressColor}
|
|
146
152
|
pressOpacity={pressOpacity}
|
|
147
|
-
hoverEffect={{ color }}
|
|
153
|
+
hoverEffect={typeof color === 'string' ? { color } : undefined}
|
|
148
154
|
href={href}
|
|
155
|
+
style={{ borderRadius }}
|
|
149
156
|
>
|
|
150
157
|
<View style={[styles.wrapper, { borderRadius }]}>
|
|
151
158
|
{iconNode}
|
|
@@ -171,7 +178,16 @@ export function DrawerItem(props: Props) {
|
|
|
171
178
|
const styles = StyleSheet.create({
|
|
172
179
|
container: {
|
|
173
180
|
borderCurve: 'continuous',
|
|
174
|
-
|
|
181
|
+
...Platform.select({
|
|
182
|
+
android: {
|
|
183
|
+
// Hide overflow to clip ripple effect
|
|
184
|
+
overflow: 'hidden',
|
|
185
|
+
},
|
|
186
|
+
default: {
|
|
187
|
+
// Don't hide overflow on web
|
|
188
|
+
// Otherwise the outline gets clipped
|
|
189
|
+
},
|
|
190
|
+
}),
|
|
175
191
|
},
|
|
176
192
|
wrapper: {
|
|
177
193
|
flexDirection: 'row',
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { HeaderButton } from '@react-navigation/elements';
|
|
2
|
+
import { DrawerActions, useNavigation } from '@react-navigation/native';
|
|
2
3
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
type ColorValue,
|
|
5
|
+
Image,
|
|
6
|
+
type ImageSourcePropType,
|
|
7
|
+
StyleSheet,
|
|
8
|
+
} from 'react-native';
|
|
8
9
|
|
|
9
|
-
import type { DrawerNavigationProp } from '../types';
|
|
10
10
|
import toggleDrawerIcon from './assets/toggle-drawer-icon.png';
|
|
11
11
|
|
|
12
12
|
type Props = {
|
|
13
13
|
accessibilityLabel?: string;
|
|
14
|
-
pressColor?:
|
|
14
|
+
pressColor?: ColorValue;
|
|
15
15
|
pressOpacity?: number;
|
|
16
|
-
tintColor?:
|
|
16
|
+
tintColor?: ColorValue;
|
|
17
17
|
imageSource?: ImageSourcePropType;
|
|
18
18
|
};
|
|
19
19
|
|
|
@@ -23,7 +23,7 @@ export function DrawerToggleButton({
|
|
|
23
23
|
imageSource = toggleDrawerIcon,
|
|
24
24
|
...rest
|
|
25
25
|
}: Props) {
|
|
26
|
-
const navigation = useNavigation
|
|
26
|
+
const navigation = useNavigation();
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
29
|
<HeaderButton
|
package/src/views/DrawerView.tsx
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
+
import { getHeaderTitle, Header } from '@react-navigation/elements';
|
|
1
2
|
import {
|
|
2
|
-
getHeaderTitle,
|
|
3
|
-
Header,
|
|
4
3
|
SafeAreaProviderCompat,
|
|
5
|
-
Screen,
|
|
6
|
-
|
|
7
|
-
} from '@react-navigation/elements';
|
|
4
|
+
Screen as ScreenContent,
|
|
5
|
+
} from '@react-navigation/elements/internal';
|
|
8
6
|
import {
|
|
9
7
|
DrawerActions,
|
|
10
8
|
type DrawerNavigationState,
|
|
@@ -17,6 +15,7 @@ import {
|
|
|
17
15
|
import * as React from 'react';
|
|
18
16
|
import { Platform, StyleSheet } from 'react-native';
|
|
19
17
|
import { Drawer } from 'react-native-drawer-layout';
|
|
18
|
+
import { Screen, ScreenContainer } from 'react-native-screens';
|
|
20
19
|
import useLatestCallback from 'use-latest-callback';
|
|
21
20
|
|
|
22
21
|
import type {
|
|
@@ -33,7 +32,6 @@ import { DrawerStatusContext } from '../utils/DrawerStatusContext';
|
|
|
33
32
|
import { getDrawerStatusFromState } from '../utils/getDrawerStatusFromState';
|
|
34
33
|
import { DrawerContent } from './DrawerContent';
|
|
35
34
|
import { DrawerToggleButton } from './DrawerToggleButton';
|
|
36
|
-
import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
|
|
37
35
|
|
|
38
36
|
type Props = DrawerNavigationConfig & {
|
|
39
37
|
defaultStatus: DrawerStatus;
|
|
@@ -69,12 +67,12 @@ function DrawerViewBase({
|
|
|
69
67
|
drawerType = Platform.select({ ios: 'slide', default: 'front' }),
|
|
70
68
|
configureGestureHandler,
|
|
71
69
|
keyboardDismissMode,
|
|
72
|
-
overlayColor = 'rgba(0, 0, 0, 0.5)',
|
|
73
70
|
swipeEdgeWidth,
|
|
74
71
|
swipeEnabled = Platform.OS !== 'web' &&
|
|
75
72
|
Platform.OS !== 'windows' &&
|
|
76
73
|
Platform.OS !== 'macos',
|
|
77
74
|
swipeMinDistance,
|
|
75
|
+
overlayStyle,
|
|
78
76
|
overlayAccessibilityLabel,
|
|
79
77
|
} = descriptors[focusedRouteKey].options;
|
|
80
78
|
|
|
@@ -108,8 +106,6 @@ function DrawerViewBase({
|
|
|
108
106
|
previousRouteKeyRef.current = focusedRouteKey;
|
|
109
107
|
}, [descriptors, focusedRouteKey, navigation, state.routes]);
|
|
110
108
|
|
|
111
|
-
const dimensions = useFrameSize((size) => size, true);
|
|
112
|
-
|
|
113
109
|
const { colors } = useTheme();
|
|
114
110
|
|
|
115
111
|
const drawerStatus = getDrawerStatusFromState(state);
|
|
@@ -213,7 +209,7 @@ function DrawerViewBase({
|
|
|
213
209
|
|
|
214
210
|
const renderSceneContent = () => {
|
|
215
211
|
return (
|
|
216
|
-
<
|
|
212
|
+
<ScreenContainer
|
|
217
213
|
enabled={detachInactiveScreens}
|
|
218
214
|
hasTwoStates
|
|
219
215
|
style={styles.content}
|
|
@@ -236,10 +232,9 @@ function DrawerViewBase({
|
|
|
236
232
|
|
|
237
233
|
const {
|
|
238
234
|
freezeOnBlur,
|
|
239
|
-
header = ({
|
|
235
|
+
header = ({ options }: DrawerHeaderProps) => (
|
|
240
236
|
<Header
|
|
241
237
|
{...options}
|
|
242
|
-
layout={layout}
|
|
243
238
|
title={getHeaderTitle(options, route.name)}
|
|
244
239
|
headerLeft={
|
|
245
240
|
drawerPosition === 'left' && options.headerLeft == null
|
|
@@ -260,15 +255,15 @@ function DrawerViewBase({
|
|
|
260
255
|
} = descriptor.options;
|
|
261
256
|
|
|
262
257
|
return (
|
|
263
|
-
<
|
|
258
|
+
<Screen
|
|
264
259
|
key={route.key}
|
|
265
260
|
style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
|
|
266
|
-
|
|
261
|
+
activityState={isFocused ? 2 : 0}
|
|
267
262
|
enabled={detachInactiveScreens}
|
|
268
263
|
freezeOnBlur={freezeOnBlur}
|
|
269
264
|
shouldFreeze={!isFocused && !isPreloaded}
|
|
270
265
|
>
|
|
271
|
-
<
|
|
266
|
+
<ScreenContent
|
|
272
267
|
focused={isFocused}
|
|
273
268
|
route={descriptor.route}
|
|
274
269
|
navigation={descriptor.navigation}
|
|
@@ -276,7 +271,6 @@ function DrawerViewBase({
|
|
|
276
271
|
headerStatusBarHeight={headerStatusBarHeight}
|
|
277
272
|
headerTransparent={headerTransparent}
|
|
278
273
|
header={header({
|
|
279
|
-
layout: dimensions,
|
|
280
274
|
route: descriptor.route,
|
|
281
275
|
navigation:
|
|
282
276
|
descriptor.navigation as DrawerNavigationProp<ParamListBase>,
|
|
@@ -285,11 +279,11 @@ function DrawerViewBase({
|
|
|
285
279
|
style={sceneStyle}
|
|
286
280
|
>
|
|
287
281
|
{descriptor.render()}
|
|
288
|
-
</
|
|
289
|
-
</
|
|
282
|
+
</ScreenContent>
|
|
283
|
+
</Screen>
|
|
290
284
|
);
|
|
291
285
|
})}
|
|
292
|
-
</
|
|
286
|
+
</ScreenContainer>
|
|
293
287
|
);
|
|
294
288
|
};
|
|
295
289
|
|
|
@@ -304,7 +298,6 @@ function DrawerViewBase({
|
|
|
304
298
|
onGestureCancel={handleGestureCancel}
|
|
305
299
|
onTransitionStart={handleTransitionStart}
|
|
306
300
|
onTransitionEnd={handleTransitionEnd}
|
|
307
|
-
layout={dimensions}
|
|
308
301
|
direction={direction}
|
|
309
302
|
configureGestureHandler={configureGestureHandler}
|
|
310
303
|
swipeEnabled={swipeEnabled}
|
|
@@ -346,7 +339,7 @@ function DrawerViewBase({
|
|
|
346
339
|
}),
|
|
347
340
|
drawerStyle,
|
|
348
341
|
]}
|
|
349
|
-
overlayStyle={
|
|
342
|
+
overlayStyle={overlayStyle}
|
|
350
343
|
renderDrawerContent={renderDrawerContent}
|
|
351
344
|
>
|
|
352
345
|
{renderSceneContent()}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { ResourceSavingView } from '@react-navigation/elements';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { View } from 'react-native';
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
let Screens;
|
|
8
|
-
try {
|
|
9
|
-
Screens = require('react-native-screens');
|
|
10
|
-
} catch (e) {
|
|
11
|
-
// Ignore
|
|
12
|
-
}
|
|
13
|
-
export const MaybeScreenContainer = ({
|
|
14
|
-
enabled,
|
|
15
|
-
...rest
|
|
16
|
-
}) => {
|
|
17
|
-
if (Screens?.screensEnabled?.()) {
|
|
18
|
-
return /*#__PURE__*/_jsx(Screens.ScreenContainer, {
|
|
19
|
-
enabled: enabled,
|
|
20
|
-
...rest
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
return /*#__PURE__*/_jsx(View, {
|
|
24
|
-
...rest
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
export function MaybeScreen({
|
|
28
|
-
visible,
|
|
29
|
-
children,
|
|
30
|
-
...rest
|
|
31
|
-
}) {
|
|
32
|
-
if (Screens?.screensEnabled?.()) {
|
|
33
|
-
return /*#__PURE__*/_jsx(Screens.Screen, {
|
|
34
|
-
activityState: visible ? 2 : 0,
|
|
35
|
-
...rest,
|
|
36
|
-
children: children
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
return /*#__PURE__*/_jsx(ResourceSavingView, {
|
|
40
|
-
visible: visible,
|
|
41
|
-
...rest,
|
|
42
|
-
children: children
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
//# sourceMappingURL=ScreenFallback.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ResourceSavingView","React","View","jsx","_jsx","Screens","require","e","MaybeScreenContainer","enabled","rest","screensEnabled","ScreenContainer","MaybeScreen","visible","children","Screen","activityState"],"sourceRoot":"../../../src","sources":["views/ScreenFallback.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,4BAA4B;AAC/D,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAEEC,IAAI,QAGC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWtB,IAAIC,OAA0D;AAE9D,IAAI;EACFA,OAAO,GAAGC,OAAO,CAAC,sBAAsB,CAAC;AAC3C,CAAC,CAAC,OAAOC,CAAC,EAAE;EACV;AAAA;AAGF,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EACnCC,OAAO;EACP,GAAGC;AAKL,CAAC,KAAK;EACJ,IAAIL,OAAO,EAAEM,cAAc,GAAG,CAAC,EAAE;IAC/B,oBAAOP,IAAA,CAACC,OAAO,CAACO,eAAe;MAACH,OAAO,EAAEA,OAAQ;MAAA,GAAKC;IAAI,CAAG,CAAC;EAChE;EAEA,oBAAON,IAAA,CAACF,IAAI;IAAA,GAAKQ;EAAI,CAAG,CAAC;AAC3B,CAAC;AAED,OAAO,SAASG,WAAWA,CAAC;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGL;AAAY,CAAC,EAAE;EACjE,IAAIL,OAAO,EAAEM,cAAc,GAAG,CAAC,EAAE;IAC/B,oBACEP,IAAA,CAACC,OAAO,CAACW,MAAM;MAACC,aAAa,EAAEH,OAAO,GAAG,CAAC,GAAG,CAAE;MAAA,GAAKJ,IAAI;MAAAK,QAAA,EACrDA;IAAQ,CACK,CAAC;EAErB;EAEA,oBACEX,IAAA,CAACJ,kBAAkB;IAACc,OAAO,EAAEA,OAAQ;IAAA,GAAKJ,IAAI;IAAAK,QAAA,EAC3CA;EAAQ,CACS,CAAC;AAEzB","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
|
|
3
|
-
type Props = {
|
|
4
|
-
visible: boolean;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
enabled: boolean;
|
|
7
|
-
freezeOnBlur?: boolean;
|
|
8
|
-
shouldFreeze: boolean;
|
|
9
|
-
style?: StyleProp<ViewStyle>;
|
|
10
|
-
};
|
|
11
|
-
export declare const MaybeScreenContainer: ({ enabled, ...rest }: ViewProps & {
|
|
12
|
-
enabled: boolean;
|
|
13
|
-
hasTwoStates: boolean;
|
|
14
|
-
children: React.ReactNode;
|
|
15
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export declare function MaybeScreen({ visible, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export {};
|
|
18
|
-
//# sourceMappingURL=ScreenFallback.d.ts.map
|