@react-navigation/material-top-tabs 7.7.2 → 7.8.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/views/MaterialTopTabBar.js +56 -25
- package/lib/module/views/MaterialTopTabBar.js.map +1 -1
- package/lib/typescript/src/types.d.ts +22 -1
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/views/MaterialTopTabBar.d.ts +2 -1
- package/lib/typescript/src/views/MaterialTopTabBar.d.ts.map +1 -1
- package/package.json +7 -6
- package/src/types.tsx +31 -2
- package/src/views/MaterialTopTabBar.tsx +114 -49
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
import { Text } from '@react-navigation/elements';
|
|
4
4
|
import { useLinkBuilder, useLocale, useTheme } from '@react-navigation/native';
|
|
5
5
|
import Color from 'color';
|
|
6
|
+
import * as React from 'react';
|
|
6
7
|
import { StyleSheet } from 'react-native';
|
|
7
8
|
import { TabBar, TabBarIndicator } from 'react-native-tab-view';
|
|
9
|
+
import useLatestCallback from 'use-latest-callback';
|
|
8
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
11
|
const renderLabelDefault = ({
|
|
10
12
|
color,
|
|
@@ -38,7 +40,8 @@ export function MaterialTopTabBar({
|
|
|
38
40
|
const focusedOptions = descriptors[state.routes[state.index].key].options;
|
|
39
41
|
const activeColor = focusedOptions.tabBarActiveTintColor ?? colors.text;
|
|
40
42
|
const inactiveColor = focusedOptions.tabBarInactiveTintColor ?? Color(activeColor).alpha(0.5).rgb().string();
|
|
41
|
-
const
|
|
43
|
+
const optionsCache = React.useRef({});
|
|
44
|
+
const nextOptions = Object.fromEntries(state.routes.map(route => {
|
|
42
45
|
const {
|
|
43
46
|
options
|
|
44
47
|
} = descriptors[route.key];
|
|
@@ -54,8 +57,15 @@ export function MaterialTopTabBar({
|
|
|
54
57
|
tabBarAllowFontScaling,
|
|
55
58
|
tabBarLabelStyle
|
|
56
59
|
} = options;
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
const focused = state.routes[state.index].key === route.key;
|
|
61
|
+
const href = buildHref(route.name, route.params);
|
|
62
|
+
const previous = optionsCache.current[route.key];
|
|
63
|
+
const deps = [href, route.name, title, tabBarLabel, tabBarButtonTestID, tabBarAccessibilityLabel, tabBarBadge, tabBarShowIcon, tabBarShowLabel, tabBarIcon, tabBarAllowFontScaling, tabBarLabelStyle, typeof tabBarLabel === 'function' && focused];
|
|
64
|
+
if (previous && Object.hasOwn(optionsCache.current, route.key) && previous.deps.length === deps.length && deps.every((dep, index) => Object.is(dep, previous.deps[index]))) {
|
|
65
|
+
return [route.key, previous];
|
|
66
|
+
}
|
|
67
|
+
const tabOptions = {
|
|
68
|
+
href,
|
|
59
69
|
testID: tabBarButtonTestID,
|
|
60
70
|
accessibilityLabel: tabBarAccessibilityLabel,
|
|
61
71
|
badge: tabBarBadge,
|
|
@@ -64,19 +74,57 @@ export function MaterialTopTabBar({
|
|
|
64
74
|
labelText,
|
|
65
75
|
color
|
|
66
76
|
}) => tabBarLabel({
|
|
67
|
-
focused
|
|
77
|
+
focused,
|
|
68
78
|
color,
|
|
69
79
|
children: labelText ?? route.name
|
|
70
80
|
}) : renderLabelDefault,
|
|
71
81
|
labelAllowFontScaling: tabBarAllowFontScaling,
|
|
72
82
|
labelStyle: tabBarLabelStyle,
|
|
73
|
-
labelText:
|
|
83
|
+
labelText: tabBarShowLabel === false ? undefined : typeof tabBarLabel === 'string' ? tabBarLabel : title !== undefined ? title : route.name
|
|
84
|
+
};
|
|
85
|
+
return [route.key, {
|
|
86
|
+
deps,
|
|
87
|
+
options: tabOptions
|
|
74
88
|
}];
|
|
75
89
|
}));
|
|
90
|
+
React.useInsertionEffect(() => {
|
|
91
|
+
optionsCache.current = nextOptions;
|
|
92
|
+
});
|
|
93
|
+
const onTabPress = useLatestCallback(({
|
|
94
|
+
route,
|
|
95
|
+
preventDefault
|
|
96
|
+
}) => {
|
|
97
|
+
const {
|
|
98
|
+
tabBarRepeatedPressBehavior
|
|
99
|
+
} = descriptors[route.key]?.options ?? {};
|
|
100
|
+
const isRepeatedPress = state.routes[state.index].key === route.key;
|
|
101
|
+
const event = navigation.emit({
|
|
102
|
+
type: 'tabPress',
|
|
103
|
+
target: route.key,
|
|
104
|
+
canPreventDefault: true,
|
|
105
|
+
data: {
|
|
106
|
+
behavior: {
|
|
107
|
+
scrollToTop: isRepeatedPress && tabBarRepeatedPressBehavior?.scrollToTop !== false,
|
|
108
|
+
popToTop: isRepeatedPress && tabBarRepeatedPressBehavior?.popToTop !== false
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
if (event.defaultPrevented) {
|
|
113
|
+
preventDefault();
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
const onTabLongPress = useLatestCallback(({
|
|
117
|
+
route
|
|
118
|
+
}) => navigation.emit({
|
|
119
|
+
type: 'tabLongPress',
|
|
120
|
+
target: route.key
|
|
121
|
+
}));
|
|
76
122
|
return /*#__PURE__*/_jsx(TabBar, {
|
|
77
123
|
...rest,
|
|
78
124
|
navigationState: state,
|
|
79
|
-
options:
|
|
125
|
+
options: Object.fromEntries(Object.entries(nextOptions).map(([key, {
|
|
126
|
+
options
|
|
127
|
+
}]) => [key, options])),
|
|
80
128
|
direction: direction,
|
|
81
129
|
scrollEnabled: focusedOptions.tabBarScrollEnabled,
|
|
82
130
|
bounces: focusedOptions.tabBarBounces,
|
|
@@ -95,25 +143,8 @@ export function MaterialTopTabBar({
|
|
|
95
143
|
style: [{
|
|
96
144
|
backgroundColor: colors.card
|
|
97
145
|
}, focusedOptions.tabBarStyle],
|
|
98
|
-
onTabPress:
|
|
99
|
-
|
|
100
|
-
preventDefault
|
|
101
|
-
}) => {
|
|
102
|
-
const event = navigation.emit({
|
|
103
|
-
type: 'tabPress',
|
|
104
|
-
target: route.key,
|
|
105
|
-
canPreventDefault: true
|
|
106
|
-
});
|
|
107
|
-
if (event.defaultPrevented) {
|
|
108
|
-
preventDefault();
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
onTabLongPress: ({
|
|
112
|
-
route
|
|
113
|
-
}) => navigation.emit({
|
|
114
|
-
type: 'tabLongPress',
|
|
115
|
-
target: route.key
|
|
116
|
-
}),
|
|
146
|
+
onTabPress: onTabPress,
|
|
147
|
+
onTabLongPress: onTabLongPress,
|
|
117
148
|
renderIndicator: ({
|
|
118
149
|
navigationState: state,
|
|
119
150
|
...rest
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Text","useLinkBuilder","useLocale","useTheme","Color","StyleSheet","TabBar","TabBarIndicator","jsx","_jsx","renderLabelDefault","color","labelText","style","allowFontScaling","styles","label","children","MaterialTopTabBar","state","navigation","descriptors","rest","colors","direction","buildHref","focusedOptions","routes","index","key","options","activeColor","tabBarActiveTintColor","text","inactiveColor","tabBarInactiveTintColor","alpha","rgb","string","
|
|
1
|
+
{"version":3,"names":["Text","useLinkBuilder","useLocale","useTheme","Color","React","StyleSheet","TabBar","TabBarIndicator","useLatestCallback","jsx","_jsx","renderLabelDefault","color","labelText","style","allowFontScaling","styles","label","children","MaterialTopTabBar","state","navigation","descriptors","rest","colors","direction","buildHref","focusedOptions","routes","index","key","options","activeColor","tabBarActiveTintColor","text","inactiveColor","tabBarInactiveTintColor","alpha","rgb","string","optionsCache","useRef","nextOptions","Object","fromEntries","map","route","title","tabBarLabel","tabBarButtonTestID","tabBarAccessibilityLabel","tabBarBadge","tabBarShowIcon","tabBarShowLabel","tabBarIcon","tabBarAllowFontScaling","tabBarLabelStyle","focused","href","name","params","previous","current","deps","hasOwn","length","every","dep","is","tabOptions","testID","accessibilityLabel","badge","icon","undefined","labelAllowFontScaling","labelStyle","useInsertionEffect","onTabPress","preventDefault","tabBarRepeatedPressBehavior","isRepeatedPress","event","emit","type","target","canPreventDefault","data","behavior","scrollToTop","popToTop","defaultPrevented","onTabLongPress","navigationState","entries","scrollEnabled","tabBarScrollEnabled","bounces","tabBarBounces","pressColor","tabBarPressColor","pressOpacity","tabBarPressOpacity","tabStyle","tabBarItemStyle","indicatorStyle","backgroundColor","primary","tabBarIndicatorStyle","gap","tabBarGap","android_ripple","tabBarAndroidRipple","indicatorContainerStyle","tabBarIndicatorContainerStyle","contentContainerStyle","tabBarContentContainerStyle","card","tabBarStyle","renderIndicator","tabBarIndicator","create","textAlign","fontSize","margin"],"sourceRoot":"../../../src","sources":["views/MaterialTopTabBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,9 +5,18 @@ import type { SceneRendererProps, TabBar, TabViewProps } from 'react-native-tab-
|
|
|
5
5
|
export type MaterialTopTabNavigationEventMap = {
|
|
6
6
|
/**
|
|
7
7
|
* Event which fires on tapping on the tab in the tab bar.
|
|
8
|
+
*
|
|
9
|
+
* When present, `data.behavior` specifies how consumers should handle the tab press:
|
|
10
|
+
* - `scrollToTop`: whether the content should scroll to top.
|
|
11
|
+
* - `popToTop`: whether a nested stack should pop to top.
|
|
8
12
|
*/
|
|
9
13
|
tabPress: {
|
|
10
|
-
data:
|
|
14
|
+
data: {
|
|
15
|
+
behavior: {
|
|
16
|
+
scrollToTop: boolean;
|
|
17
|
+
popToTop: boolean;
|
|
18
|
+
};
|
|
19
|
+
} | undefined;
|
|
11
20
|
canPreventDefault: true;
|
|
12
21
|
};
|
|
13
22
|
/**
|
|
@@ -152,6 +161,18 @@ export type MaterialTopTabNavigationOptions = {
|
|
|
152
161
|
* Default: `{ borderless: true }`
|
|
153
162
|
*/
|
|
154
163
|
tabBarAndroidRipple?: PressableAndroidRippleConfig;
|
|
164
|
+
/**
|
|
165
|
+
* Behavior when pressing the tab in the tab bar while it's already focused.
|
|
166
|
+
*
|
|
167
|
+
* - `scrollToTop`: scroll the first scroll view in the screen to top
|
|
168
|
+
* - `popToTop`: pop a nested stack to its first screen
|
|
169
|
+
*
|
|
170
|
+
* Both default to `true`.
|
|
171
|
+
*/
|
|
172
|
+
tabBarRepeatedPressBehavior?: {
|
|
173
|
+
scrollToTop?: boolean;
|
|
174
|
+
popToTop?: boolean;
|
|
175
|
+
} | undefined;
|
|
155
176
|
/**
|
|
156
177
|
* Whether to enable swipe gestures when this screen is focused.
|
|
157
178
|
* Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,KAAK,EACN,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,QAAQ,EACR,4BAA4B,EAC5B,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,YAAY,EACb,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,gCAAgC,GAAG;IAC7C
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import type { MaterialTopTabBarProps } from '../types.js';
|
|
2
|
-
export declare function MaterialTopTabBar({ state, navigation, descriptors, ...rest }: MaterialTopTabBarProps):
|
|
3
|
+
export declare function MaterialTopTabBar({ state, navigation, descriptors, ...rest }: MaterialTopTabBarProps): React.JSX.Element;
|
|
3
4
|
//# sourceMappingURL=MaterialTopTabBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaterialTopTabBar.d.ts","sourceRoot":"","sources":["../../../../src/views/MaterialTopTabBar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MaterialTopTabBar.d.ts","sourceRoot":"","sources":["../../../../src/views/MaterialTopTabBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAU,CAAC;AA2BvD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,UAAU,EACV,WAAW,EACX,GAAG,IAAI,EACR,EAAE,sBAAsB,qBA2KxB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/material-top-tabs",
|
|
3
3
|
"description": "Integration for the animated tab view component from react-native-tab-view",
|
|
4
|
-
"version": "7.
|
|
4
|
+
"version": "7.8.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -46,13 +46,14 @@
|
|
|
46
46
|
"clean": "del lib"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@react-navigation/elements": "^2.9.
|
|
49
|
+
"@react-navigation/elements": "^2.9.44",
|
|
50
50
|
"color": "^4.2.3",
|
|
51
|
-
"react-native-tab-view": "^4.3.
|
|
51
|
+
"react-native-tab-view": "^4.3.3",
|
|
52
|
+
"use-latest-callback": "^0.2.4"
|
|
52
53
|
},
|
|
53
54
|
"devDependencies": {
|
|
54
55
|
"@jest/globals": "^30.0.0",
|
|
55
|
-
"@react-navigation/native": "^7.
|
|
56
|
+
"@react-navigation/native": "^7.5.0",
|
|
56
57
|
"@testing-library/react-native": "^13.2.1",
|
|
57
58
|
"@types/react": "~19.2.4",
|
|
58
59
|
"del-cli": "^6.0.0",
|
|
@@ -65,7 +66,7 @@
|
|
|
65
66
|
"typescript": "~6.0.3"
|
|
66
67
|
},
|
|
67
68
|
"peerDependencies": {
|
|
68
|
-
"@react-navigation/native": "^7.
|
|
69
|
+
"@react-navigation/native": "^7.5.0",
|
|
69
70
|
"react": ">= 18.2.0",
|
|
70
71
|
"react-native": "*",
|
|
71
72
|
"react-native-pager-view": ">= 6.0.0",
|
|
@@ -89,5 +90,5 @@
|
|
|
89
90
|
]
|
|
90
91
|
]
|
|
91
92
|
},
|
|
92
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "47f787dc7580c092238e17af8a86cad32573bd32"
|
|
93
94
|
}
|
package/src/types.tsx
CHANGED
|
@@ -28,8 +28,22 @@ import type {
|
|
|
28
28
|
export type MaterialTopTabNavigationEventMap = {
|
|
29
29
|
/**
|
|
30
30
|
* Event which fires on tapping on the tab in the tab bar.
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
*
|
|
32
|
+
* When present, `data.behavior` specifies how consumers should handle the tab press:
|
|
33
|
+
* - `scrollToTop`: whether the content should scroll to top.
|
|
34
|
+
* - `popToTop`: whether a nested stack should pop to top.
|
|
35
|
+
*/
|
|
36
|
+
tabPress: {
|
|
37
|
+
data:
|
|
38
|
+
| {
|
|
39
|
+
behavior: {
|
|
40
|
+
scrollToTop: boolean;
|
|
41
|
+
popToTop: boolean;
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
| undefined;
|
|
45
|
+
canPreventDefault: true;
|
|
46
|
+
};
|
|
33
47
|
/**
|
|
34
48
|
* Event which fires on long press on the tab in the tab bar.
|
|
35
49
|
*/
|
|
@@ -226,6 +240,21 @@ export type MaterialTopTabNavigationOptions = {
|
|
|
226
240
|
*/
|
|
227
241
|
tabBarAndroidRipple?: PressableAndroidRippleConfig;
|
|
228
242
|
|
|
243
|
+
/**
|
|
244
|
+
* Behavior when pressing the tab in the tab bar while it's already focused.
|
|
245
|
+
*
|
|
246
|
+
* - `scrollToTop`: scroll the first scroll view in the screen to top
|
|
247
|
+
* - `popToTop`: pop a nested stack to its first screen
|
|
248
|
+
*
|
|
249
|
+
* Both default to `true`.
|
|
250
|
+
*/
|
|
251
|
+
tabBarRepeatedPressBehavior?:
|
|
252
|
+
| {
|
|
253
|
+
scrollToTop?: boolean;
|
|
254
|
+
popToTop?: boolean;
|
|
255
|
+
}
|
|
256
|
+
| undefined;
|
|
257
|
+
|
|
229
258
|
/**
|
|
230
259
|
* Whether to enable swipe gestures when this screen is focused.
|
|
231
260
|
* Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
|
|
@@ -7,13 +7,16 @@ import {
|
|
|
7
7
|
useTheme,
|
|
8
8
|
} from '@react-navigation/native';
|
|
9
9
|
import Color from 'color';
|
|
10
|
+
import * as React from 'react';
|
|
10
11
|
import { StyleSheet } from 'react-native';
|
|
11
12
|
import {
|
|
12
13
|
type Route,
|
|
13
14
|
TabBar,
|
|
14
15
|
TabBarIndicator,
|
|
16
|
+
type TabBarProps,
|
|
15
17
|
type TabDescriptor,
|
|
16
18
|
} from 'react-native-tab-view';
|
|
19
|
+
import useLatestCallback from 'use-latest-callback';
|
|
17
20
|
|
|
18
21
|
import type { MaterialTopTabBarProps } from '../types';
|
|
19
22
|
|
|
@@ -21,6 +24,11 @@ type MaterialLabelProps = Parameters<
|
|
|
21
24
|
NonNullable<TabDescriptor<Route>['label']>
|
|
22
25
|
>[0];
|
|
23
26
|
|
|
27
|
+
type CachedOptions = {
|
|
28
|
+
deps: readonly unknown[];
|
|
29
|
+
options: TabDescriptor<Route>;
|
|
30
|
+
};
|
|
31
|
+
|
|
24
32
|
const renderLabelDefault = ({
|
|
25
33
|
color,
|
|
26
34
|
labelText,
|
|
@@ -54,7 +62,9 @@ export function MaterialTopTabBar({
|
|
|
54
62
|
focusedOptions.tabBarInactiveTintColor ??
|
|
55
63
|
Color(activeColor).alpha(0.5).rgb().string();
|
|
56
64
|
|
|
57
|
-
const
|
|
65
|
+
const optionsCache = React.useRef<Record<string, CachedOptions>>({});
|
|
66
|
+
|
|
67
|
+
const nextOptions = Object.fromEntries<CachedOptions>(
|
|
58
68
|
state.routes.map((route) => {
|
|
59
69
|
const { options } = descriptors[route.key];
|
|
60
70
|
|
|
@@ -71,37 +81,105 @@ export function MaterialTopTabBar({
|
|
|
71
81
|
tabBarLabelStyle,
|
|
72
82
|
} = options;
|
|
73
83
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
: renderLabelDefault,
|
|
93
|
-
labelAllowFontScaling: tabBarAllowFontScaling,
|
|
94
|
-
labelStyle: tabBarLabelStyle,
|
|
95
|
-
labelText:
|
|
96
|
-
options.tabBarShowLabel === false
|
|
97
|
-
? undefined
|
|
98
|
-
: typeof tabBarLabel === 'string'
|
|
99
|
-
? tabBarLabel
|
|
100
|
-
: title !== undefined
|
|
101
|
-
? title
|
|
102
|
-
: route.name,
|
|
103
|
-
},
|
|
84
|
+
const focused = state.routes[state.index].key === route.key;
|
|
85
|
+
const href = buildHref(route.name, route.params);
|
|
86
|
+
const previous = optionsCache.current[route.key];
|
|
87
|
+
|
|
88
|
+
const deps = [
|
|
89
|
+
href,
|
|
90
|
+
route.name,
|
|
91
|
+
title,
|
|
92
|
+
tabBarLabel,
|
|
93
|
+
tabBarButtonTestID,
|
|
94
|
+
tabBarAccessibilityLabel,
|
|
95
|
+
tabBarBadge,
|
|
96
|
+
tabBarShowIcon,
|
|
97
|
+
tabBarShowLabel,
|
|
98
|
+
tabBarIcon,
|
|
99
|
+
tabBarAllowFontScaling,
|
|
100
|
+
tabBarLabelStyle,
|
|
101
|
+
typeof tabBarLabel === 'function' && focused,
|
|
104
102
|
];
|
|
103
|
+
|
|
104
|
+
if (
|
|
105
|
+
previous &&
|
|
106
|
+
Object.hasOwn(optionsCache.current, route.key) &&
|
|
107
|
+
previous.deps.length === deps.length &&
|
|
108
|
+
deps.every((dep, index) => Object.is(dep, previous.deps[index]))
|
|
109
|
+
) {
|
|
110
|
+
return [route.key, previous];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const tabOptions: TabDescriptor<Route> = {
|
|
114
|
+
href,
|
|
115
|
+
testID: tabBarButtonTestID,
|
|
116
|
+
accessibilityLabel: tabBarAccessibilityLabel,
|
|
117
|
+
badge: tabBarBadge,
|
|
118
|
+
icon: tabBarShowIcon === false ? undefined : tabBarIcon,
|
|
119
|
+
label:
|
|
120
|
+
tabBarShowLabel === false
|
|
121
|
+
? undefined
|
|
122
|
+
: typeof tabBarLabel === 'function'
|
|
123
|
+
? ({ labelText, color }: MaterialLabelProps) =>
|
|
124
|
+
tabBarLabel({
|
|
125
|
+
focused,
|
|
126
|
+
color,
|
|
127
|
+
children: labelText ?? route.name,
|
|
128
|
+
})
|
|
129
|
+
: renderLabelDefault,
|
|
130
|
+
labelAllowFontScaling: tabBarAllowFontScaling,
|
|
131
|
+
labelStyle: tabBarLabelStyle,
|
|
132
|
+
labelText:
|
|
133
|
+
tabBarShowLabel === false
|
|
134
|
+
? undefined
|
|
135
|
+
: typeof tabBarLabel === 'string'
|
|
136
|
+
? tabBarLabel
|
|
137
|
+
: title !== undefined
|
|
138
|
+
? title
|
|
139
|
+
: route.name,
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
return [route.key, { deps, options: tabOptions }];
|
|
143
|
+
})
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
React.useInsertionEffect(() => {
|
|
147
|
+
optionsCache.current = nextOptions;
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const onTabPress = useLatestCallback<
|
|
151
|
+
NonNullable<TabBarProps<Route>['onTabPress']>
|
|
152
|
+
>(({ route, preventDefault }) => {
|
|
153
|
+
const { tabBarRepeatedPressBehavior } =
|
|
154
|
+
descriptors[route.key]?.options ?? {};
|
|
155
|
+
const isRepeatedPress = state.routes[state.index].key === route.key;
|
|
156
|
+
|
|
157
|
+
const event = navigation.emit({
|
|
158
|
+
type: 'tabPress',
|
|
159
|
+
target: route.key,
|
|
160
|
+
canPreventDefault: true,
|
|
161
|
+
data: {
|
|
162
|
+
behavior: {
|
|
163
|
+
scrollToTop:
|
|
164
|
+
isRepeatedPress &&
|
|
165
|
+
tabBarRepeatedPressBehavior?.scrollToTop !== false,
|
|
166
|
+
popToTop:
|
|
167
|
+
isRepeatedPress && tabBarRepeatedPressBehavior?.popToTop !== false,
|
|
168
|
+
},
|
|
169
|
+
},
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
if (event.defaultPrevented) {
|
|
173
|
+
preventDefault();
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
const onTabLongPress = useLatestCallback<
|
|
178
|
+
NonNullable<TabBarProps<Route>['onTabLongPress']>
|
|
179
|
+
>(({ route }) =>
|
|
180
|
+
navigation.emit({
|
|
181
|
+
type: 'tabLongPress',
|
|
182
|
+
target: route.key,
|
|
105
183
|
})
|
|
106
184
|
);
|
|
107
185
|
|
|
@@ -109,7 +187,9 @@ export function MaterialTopTabBar({
|
|
|
109
187
|
<TabBar
|
|
110
188
|
{...rest}
|
|
111
189
|
navigationState={state}
|
|
112
|
-
options={
|
|
190
|
+
options={Object.fromEntries(
|
|
191
|
+
Object.entries(nextOptions).map(([key, { options }]) => [key, options])
|
|
192
|
+
)}
|
|
113
193
|
direction={direction}
|
|
114
194
|
scrollEnabled={focusedOptions.tabBarScrollEnabled}
|
|
115
195
|
bounces={focusedOptions.tabBarBounces}
|
|
@@ -127,23 +207,8 @@ export function MaterialTopTabBar({
|
|
|
127
207
|
indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
|
|
128
208
|
contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
|
|
129
209
|
style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}
|
|
130
|
-
onTabPress={
|
|
131
|
-
|
|
132
|
-
type: 'tabPress',
|
|
133
|
-
target: route.key,
|
|
134
|
-
canPreventDefault: true,
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
if (event.defaultPrevented) {
|
|
138
|
-
preventDefault();
|
|
139
|
-
}
|
|
140
|
-
}}
|
|
141
|
-
onTabLongPress={({ route }) =>
|
|
142
|
-
navigation.emit({
|
|
143
|
-
type: 'tabLongPress',
|
|
144
|
-
target: route.key,
|
|
145
|
-
})
|
|
146
|
-
}
|
|
210
|
+
onTabPress={onTabPress}
|
|
211
|
+
onTabLongPress={onTabLongPress}
|
|
147
212
|
renderIndicator={({ navigationState: state, ...rest }) => {
|
|
148
213
|
return focusedOptions.tabBarIndicator ? (
|
|
149
214
|
focusedOptions.tabBarIndicator({
|