react-native-tab-view 4.3.3 → 4.3.4
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.
|
@@ -5,6 +5,7 @@ import { Animated, Easing, Platform, StyleSheet } from 'react-native';
|
|
|
5
5
|
import { useAnimatedValue } from "./useAnimatedValue.js";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
const useNativeDriver = Platform.OS !== 'web';
|
|
8
|
+
const isArrayEqual = (a, b) => a.length === b.length && a.every((it, index) => Object.is(it, b[index]));
|
|
8
9
|
const calculateSize = (value, referenceWidth) => {
|
|
9
10
|
if (typeof value === 'number') {
|
|
10
11
|
return value;
|
|
@@ -33,9 +34,8 @@ const getIndicatorWidth = (tabWidth, width, style, direction) => {
|
|
|
33
34
|
}
|
|
34
35
|
return width;
|
|
35
36
|
};
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
const outputRange = routes.map((_, i) => {
|
|
37
|
+
const getTranslateXOutputRange = (routes, getTabWidth, gap, getWidth) => {
|
|
38
|
+
return routes.map((_, i) => {
|
|
39
39
|
let sumTabWidth = 0;
|
|
40
40
|
for (let j = 0; j < i; j++) {
|
|
41
41
|
sumTabWidth += getTabWidth(j);
|
|
@@ -47,12 +47,6 @@ const getTranslateX = (position, routes, getTabWidth, direction, gap, getWidth)
|
|
|
47
47
|
}
|
|
48
48
|
return tabOffset + getTabWidth(i) / 2 - indicatorWidth / 2;
|
|
49
49
|
});
|
|
50
|
-
const translateX = position.interpolate({
|
|
51
|
-
inputRange,
|
|
52
|
-
outputRange,
|
|
53
|
-
extrapolate: 'clamp'
|
|
54
|
-
});
|
|
55
|
-
return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
|
|
56
50
|
};
|
|
57
51
|
export function TabBarIndicator({
|
|
58
52
|
getTabWidth,
|
|
@@ -110,23 +104,39 @@ export function TabBarIndicator({
|
|
|
110
104
|
const {
|
|
111
105
|
routes
|
|
112
106
|
} = navigationState;
|
|
107
|
+
const computedTranslateXOutputRange = layout.width && routes.length > 1 ? getTranslateXOutputRange(routes, getTabWidth, gap, index => getCenteredIndicatorWidth(getTabWidth(index))) : [];
|
|
108
|
+
const computedScaleXOutputRange = width === 'auto' && constantIndicatorWidth == null ? routes.map((_, i) => {
|
|
109
|
+
const tabW = getTabWidth(i);
|
|
110
|
+
return calculateSize(flattenedStyle?.width, tabW) ?? getIndicatorWidthWithMargins(tabW, flattenedStyle, direction);
|
|
111
|
+
}) : [];
|
|
112
|
+
|
|
113
|
+
// Keep the output ranges referentially stable while the values are the same
|
|
114
|
+
// So that the interpolations below aren't recreated on every render
|
|
115
|
+
const [translateXOutputRange, setTranslateXOutputRange] = React.useState(computedTranslateXOutputRange);
|
|
116
|
+
const [scaleXOutputRange, setScaleXOutputRange] = React.useState(computedScaleXOutputRange);
|
|
117
|
+
if (!isArrayEqual(translateXOutputRange, computedTranslateXOutputRange)) {
|
|
118
|
+
setTranslateXOutputRange(computedTranslateXOutputRange);
|
|
119
|
+
}
|
|
120
|
+
if (!isArrayEqual(scaleXOutputRange, computedScaleXOutputRange)) {
|
|
121
|
+
setScaleXOutputRange(computedScaleXOutputRange);
|
|
122
|
+
}
|
|
123
|
+
const translateX = React.useMemo(() => translateXOutputRange.length ? Animated.multiply(position.interpolate({
|
|
124
|
+
inputRange: translateXOutputRange.map((_, i) => i),
|
|
125
|
+
outputRange: translateXOutputRange,
|
|
126
|
+
extrapolate: 'clamp'
|
|
127
|
+
}), direction === 'rtl' ? -1 : 1) : 0, [direction, position, translateXOutputRange]);
|
|
128
|
+
const scaleX = React.useMemo(() => scaleXOutputRange.length > 1 ? position.interpolate({
|
|
129
|
+
inputRange: scaleXOutputRange.map((_, i) => i),
|
|
130
|
+
outputRange: scaleXOutputRange,
|
|
131
|
+
extrapolate: 'clamp'
|
|
132
|
+
}) : scaleXOutputRange[0], [position, scaleXOutputRange]);
|
|
113
133
|
const transform = [];
|
|
114
|
-
const translateX = layout.width && routes.length > 1 ? getTranslateX(position, routes, getTabWidth, direction, gap, index => getCenteredIndicatorWidth(getTabWidth(index))) : 0;
|
|
115
134
|
transform.push({
|
|
116
135
|
translateX
|
|
117
136
|
});
|
|
118
137
|
if (width === 'auto' && constantIndicatorWidth == null) {
|
|
119
|
-
const inputRange = routes.map((_, i) => i);
|
|
120
|
-
const outputRange = inputRange.map(i => {
|
|
121
|
-
const tabW = getTabWidth(i);
|
|
122
|
-
return calculateSize(flattenedStyle?.width, tabW) ?? getIndicatorWidthWithMargins(tabW, flattenedStyle, direction);
|
|
123
|
-
});
|
|
124
138
|
transform.push({
|
|
125
|
-
scaleX
|
|
126
|
-
inputRange,
|
|
127
|
-
outputRange,
|
|
128
|
-
extrapolate: 'clamp'
|
|
129
|
-
}) : outputRange[0]
|
|
139
|
+
scaleX
|
|
130
140
|
}, {
|
|
131
141
|
translateX: direction === 'rtl' ? -0.5 : 0.5
|
|
132
142
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Animated","Easing","Platform","StyleSheet","useAnimatedValue","jsx","_jsx","useNativeDriver","OS","calculateSize","value","referenceWidth","endsWith","parsed","parseFloat","Number","isFinite","undefined","getIndicatorWidthWithMargins","width","style","direction","marginHorizontal","margin","leftMargin","marginStart","marginEnd","marginLeft","rightMargin","marginRight","Math","max","getIndicatorWidth","tabWidth","customWidth","
|
|
1
|
+
{"version":3,"names":["React","Animated","Easing","Platform","StyleSheet","useAnimatedValue","jsx","_jsx","useNativeDriver","OS","isArrayEqual","a","b","length","every","it","index","Object","is","calculateSize","value","referenceWidth","endsWith","parsed","parseFloat","Number","isFinite","undefined","getIndicatorWidthWithMargins","width","style","direction","marginHorizontal","margin","leftMargin","marginStart","marginEnd","marginLeft","rightMargin","marginRight","Math","max","getIndicatorWidth","tabWidth","customWidth","getTranslateXOutputRange","routes","getTabWidth","gap","getWidth","map","_","i","sumTabWidth","j","indicatorWidth","tabOffset","TabBarIndicator","layout","navigationState","position","children","isIndicatorShown","useRef","isWidthDynamic","flattenedStyle","flatten","hasCustomIndicatorWidth","constantIndicatorWidth","isCentered","getCenteredIndicatorWidth","opacity","indicatorVisible","slice","r","useEffect","fadeInIndicator","current","timing","toValue","duration","easing","in","linear","start","finished","stopAnimation","computedTranslateXOutputRange","computedScaleXOutputRange","tabW","translateXOutputRange","setTranslateXOutputRange","useState","scaleXOutputRange","setScaleXOutputRange","translateX","useMemo","multiply","interpolate","inputRange","outputRange","extrapolate","scaleX","transform","push","styleList","translate","offset","add","right","left","finalStyle","rest","View","styles","indicator","create","backgroundColor","bottom","end","height"],"sourceRoot":"../../src","sources":["TabBarIndicator.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/TabBarIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,YAAS,CAAC;AAGjB,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;
|
|
1
|
+
{"version":3,"file":"TabBarIndicator.d.ts","sourceRoot":"","sources":["../../../src/TabBarIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,YAAS,CAAC;AAGjB,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,MAAM,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA8FF,wBAAgB,eAAe,CAAC,CAAC,SAAS,KAAK,EAAE,EAC/C,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,EACH,KAAK,EACL,QAAQ,GACT,EAAE,KAAK,CAAC,CAAC,CAAC,qBAwNV"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-tab-view",
|
|
3
3
|
"description": "Tab view component for React Native",
|
|
4
|
-
"version": "4.3.
|
|
4
|
+
"version": "4.3.4",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
]
|
|
81
81
|
]
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "379552aab1a143b61058ab572450cbfb363bff77"
|
|
84
84
|
}
|
package/src/TabBarIndicator.tsx
CHANGED
|
@@ -30,6 +30,9 @@ export type Props<T extends Route> = SceneRendererProps & {
|
|
|
30
30
|
|
|
31
31
|
const useNativeDriver = Platform.OS !== 'web';
|
|
32
32
|
|
|
33
|
+
const isArrayEqual = (a: unknown[], b: unknown[]) =>
|
|
34
|
+
a.length === b.length && a.every((it, index) => Object.is(it, b[index]));
|
|
35
|
+
|
|
33
36
|
const calculateSize = (
|
|
34
37
|
value: ViewStyle['width'] | undefined,
|
|
35
38
|
referenceWidth: number
|
|
@@ -93,16 +96,13 @@ const getIndicatorWidth = (
|
|
|
93
96
|
return width;
|
|
94
97
|
};
|
|
95
98
|
|
|
96
|
-
const
|
|
97
|
-
position: Animated.AnimatedInterpolation<number>,
|
|
99
|
+
const getTranslateXOutputRange = (
|
|
98
100
|
routes: Route[],
|
|
99
101
|
getTabWidth: GetTabWidth,
|
|
100
|
-
direction: LocaleDirection,
|
|
101
102
|
gap?: number,
|
|
102
103
|
getWidth?: (index: number) => number | undefined
|
|
103
104
|
) => {
|
|
104
|
-
|
|
105
|
-
const outputRange = routes.map((_, i) => {
|
|
105
|
+
return routes.map((_, i) => {
|
|
106
106
|
let sumTabWidth = 0;
|
|
107
107
|
|
|
108
108
|
for (let j = 0; j < i; j++) {
|
|
@@ -118,14 +118,6 @@ const getTranslateX = (
|
|
|
118
118
|
|
|
119
119
|
return tabOffset + getTabWidth(i) / 2 - indicatorWidth / 2;
|
|
120
120
|
});
|
|
121
|
-
|
|
122
|
-
const translateX = position.interpolate({
|
|
123
|
-
inputRange,
|
|
124
|
-
outputRange,
|
|
125
|
-
extrapolate: 'clamp',
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
return Animated.multiply(translateX, direction === 'rtl' ? -1 : 1);
|
|
129
121
|
};
|
|
130
122
|
|
|
131
123
|
export function TabBarIndicator<T extends Route>({
|
|
@@ -206,39 +198,76 @@ export function TabBarIndicator<T extends Route>({
|
|
|
206
198
|
|
|
207
199
|
const { routes } = navigationState;
|
|
208
200
|
|
|
209
|
-
const
|
|
210
|
-
|
|
211
|
-
const translateX =
|
|
201
|
+
const computedTranslateXOutputRange =
|
|
212
202
|
layout.width && routes.length > 1
|
|
213
|
-
?
|
|
203
|
+
? getTranslateXOutputRange(routes, getTabWidth, gap, (index) =>
|
|
214
204
|
getCenteredIndicatorWidth(getTabWidth(index))
|
|
215
205
|
)
|
|
216
|
-
:
|
|
206
|
+
: [];
|
|
207
|
+
|
|
208
|
+
const computedScaleXOutputRange =
|
|
209
|
+
width === 'auto' && constantIndicatorWidth == null
|
|
210
|
+
? routes.map((_, i) => {
|
|
211
|
+
const tabW = getTabWidth(i);
|
|
212
|
+
|
|
213
|
+
return (
|
|
214
|
+
calculateSize(flattenedStyle?.width, tabW) ??
|
|
215
|
+
getIndicatorWidthWithMargins(tabW, flattenedStyle, direction)
|
|
216
|
+
);
|
|
217
|
+
})
|
|
218
|
+
: [];
|
|
219
|
+
|
|
220
|
+
// Keep the output ranges referentially stable while the values are the same
|
|
221
|
+
// So that the interpolations below aren't recreated on every render
|
|
222
|
+
const [translateXOutputRange, setTranslateXOutputRange] = React.useState(
|
|
223
|
+
computedTranslateXOutputRange
|
|
224
|
+
);
|
|
225
|
+
const [scaleXOutputRange, setScaleXOutputRange] = React.useState(
|
|
226
|
+
computedScaleXOutputRange
|
|
227
|
+
);
|
|
217
228
|
|
|
218
|
-
|
|
229
|
+
if (!isArrayEqual(translateXOutputRange, computedTranslateXOutputRange)) {
|
|
230
|
+
setTranslateXOutputRange(computedTranslateXOutputRange);
|
|
231
|
+
}
|
|
219
232
|
|
|
220
|
-
if (
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
233
|
+
if (!isArrayEqual(scaleXOutputRange, computedScaleXOutputRange)) {
|
|
234
|
+
setScaleXOutputRange(computedScaleXOutputRange);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
const translateX = React.useMemo(
|
|
238
|
+
() =>
|
|
239
|
+
translateXOutputRange.length
|
|
240
|
+
? Animated.multiply(
|
|
241
|
+
position.interpolate({
|
|
242
|
+
inputRange: translateXOutputRange.map((_, i) => i),
|
|
243
|
+
outputRange: translateXOutputRange,
|
|
244
|
+
extrapolate: 'clamp',
|
|
245
|
+
}),
|
|
246
|
+
direction === 'rtl' ? -1 : 1
|
|
247
|
+
)
|
|
248
|
+
: 0,
|
|
249
|
+
[direction, position, translateXOutputRange]
|
|
250
|
+
);
|
|
224
251
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
252
|
+
const scaleX = React.useMemo(
|
|
253
|
+
() =>
|
|
254
|
+
scaleXOutputRange.length > 1
|
|
255
|
+
? position.interpolate({
|
|
256
|
+
inputRange: scaleXOutputRange.map((_, i) => i),
|
|
257
|
+
outputRange: scaleXOutputRange,
|
|
258
|
+
extrapolate: 'clamp',
|
|
259
|
+
})
|
|
260
|
+
: scaleXOutputRange[0],
|
|
261
|
+
[position, scaleXOutputRange]
|
|
262
|
+
);
|
|
263
|
+
|
|
264
|
+
const transform = [];
|
|
230
265
|
|
|
266
|
+
transform.push({ translateX });
|
|
267
|
+
|
|
268
|
+
if (width === 'auto' && constantIndicatorWidth == null) {
|
|
231
269
|
transform.push(
|
|
232
|
-
{
|
|
233
|
-
scaleX:
|
|
234
|
-
routes.length > 1
|
|
235
|
-
? position.interpolate({
|
|
236
|
-
inputRange,
|
|
237
|
-
outputRange,
|
|
238
|
-
extrapolate: 'clamp',
|
|
239
|
-
})
|
|
240
|
-
: outputRange[0],
|
|
241
|
-
},
|
|
270
|
+
{ scaleX },
|
|
242
271
|
{ translateX: direction === 'rtl' ? -0.5 : 0.5 }
|
|
243
272
|
);
|
|
244
273
|
}
|