react-native-tab-view 4.0.8 → 4.0.10
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/typescript/src/Pager.android.d.ts.map +1 -0
- package/lib/typescript/src/Pager.d.ts.map +1 -0
- package/lib/typescript/src/Pager.ios.d.ts.map +1 -0
- package/lib/typescript/src/PagerViewAdapter.d.ts.map +1 -0
- package/lib/typescript/src/PanResponderAdapter.d.ts.map +1 -0
- package/lib/typescript/src/PlatformPressable.d.ts.map +1 -0
- package/lib/typescript/src/SceneMap.d.ts.map +1 -0
- package/lib/typescript/src/SceneView.d.ts.map +1 -0
- package/lib/typescript/src/TabBar.d.ts.map +1 -0
- package/lib/typescript/src/TabBarIndicator.d.ts.map +1 -0
- package/lib/typescript/src/TabBarItem.d.ts.map +1 -0
- package/lib/typescript/src/TabBarItemLabel.d.ts.map +1 -0
- package/lib/typescript/src/TabView.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts.map +1 -0
- package/lib/typescript/src/useAnimatedValue.d.ts.map +1 -0
- package/package.json +11 -23
- package/lib/commonjs/Pager.android.js +0 -13
- package/lib/commonjs/Pager.android.js.map +0 -1
- package/lib/commonjs/Pager.ios.js +0 -13
- package/lib/commonjs/Pager.ios.js.map +0 -1
- package/lib/commonjs/Pager.js +0 -13
- package/lib/commonjs/Pager.js.map +0 -1
- package/lib/commonjs/PagerViewAdapter.js +0 -133
- package/lib/commonjs/PagerViewAdapter.js.map +0 -1
- package/lib/commonjs/PanResponderAdapter.js +0 -207
- package/lib/commonjs/PanResponderAdapter.js.map +0 -1
- package/lib/commonjs/PlatformPressable.js +0 -65
- package/lib/commonjs/PlatformPressable.js.map +0 -1
- package/lib/commonjs/SceneMap.js +0 -30
- package/lib/commonjs/SceneMap.js.map +0 -1
- package/lib/commonjs/SceneView.js +0 -79
- package/lib/commonjs/SceneView.js.map +0 -1
- package/lib/commonjs/TabBar.js +0 -479
- package/lib/commonjs/TabBar.js.map +0 -1
- package/lib/commonjs/TabBarIndicator.js +0 -128
- package/lib/commonjs/TabBarIndicator.js.map +0 -1
- package/lib/commonjs/TabBarItem.js +0 -225
- package/lib/commonjs/TabBarItem.js.map +0 -1
- package/lib/commonjs/TabBarItemLabel.js +0 -38
- package/lib/commonjs/TabBarItemLabel.js.map +0 -1
- package/lib/commonjs/TabView.js +0 -146
- package/lib/commonjs/TabView.js.map +0 -1
- package/lib/commonjs/index.js +0 -41
- package/lib/commonjs/index.js.map +0 -1
- package/lib/commonjs/package.json +0 -1
- package/lib/commonjs/types.js +0 -6
- package/lib/commonjs/types.js.map +0 -1
- package/lib/commonjs/useAnimatedValue.js +0 -18
- package/lib/commonjs/useAnimatedValue.js.map +0 -1
- package/lib/typescript/commonjs/package.json +0 -1
- package/lib/typescript/commonjs/src/Pager.android.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/Pager.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/Pager.ios.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/PagerViewAdapter.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/PanResponderAdapter.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/PlatformPressable.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/SceneMap.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/SceneView.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/TabBar.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/TabBarIndicator.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/TabBarItem.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/TabBarItemLabel.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/TabView.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/index.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/types.d.ts.map +0 -1
- package/lib/typescript/commonjs/src/useAnimatedValue.d.ts.map +0 -1
- package/lib/typescript/module/src/Pager.android.d.ts +0 -2
- package/lib/typescript/module/src/Pager.android.d.ts.map +0 -1
- package/lib/typescript/module/src/Pager.d.ts +0 -2
- package/lib/typescript/module/src/Pager.d.ts.map +0 -1
- package/lib/typescript/module/src/Pager.ios.d.ts +0 -2
- package/lib/typescript/module/src/Pager.ios.d.ts.map +0 -1
- package/lib/typescript/module/src/PagerViewAdapter.d.ts +0 -15
- package/lib/typescript/module/src/PagerViewAdapter.d.ts.map +0 -1
- package/lib/typescript/module/src/PanResponderAdapter.d.ts +0 -16
- package/lib/typescript/module/src/PanResponderAdapter.d.ts.map +0 -1
- package/lib/typescript/module/src/PlatformPressable.d.ts +0 -13
- package/lib/typescript/module/src/PlatformPressable.d.ts.map +0 -1
- package/lib/typescript/module/src/SceneMap.d.ts +0 -10
- package/lib/typescript/module/src/SceneMap.d.ts.map +0 -1
- package/lib/typescript/module/src/SceneView.d.ts +0 -16
- package/lib/typescript/module/src/SceneView.d.ts.map +0 -1
- package/lib/typescript/module/src/TabBar.d.ts +0 -32
- package/lib/typescript/module/src/TabBar.d.ts.map +0 -1
- package/lib/typescript/module/src/TabBarIndicator.d.ts +0 -15
- package/lib/typescript/module/src/TabBarIndicator.d.ts.map +0 -1
- package/lib/typescript/module/src/TabBarItem.d.ts +0 -19
- package/lib/typescript/module/src/TabBarItem.d.ts.map +0 -1
- package/lib/typescript/module/src/TabBarItemLabel.d.ts +0 -11
- package/lib/typescript/module/src/TabBarItemLabel.d.ts.map +0 -1
- package/lib/typescript/module/src/TabView.d.ts +0 -30
- package/lib/typescript/module/src/TabView.d.ts.map +0 -1
- package/lib/typescript/module/src/index.d.ts +0 -11
- package/lib/typescript/module/src/index.d.ts.map +0 -1
- package/lib/typescript/module/src/types.d.ts +0 -70
- package/lib/typescript/module/src/types.d.ts.map +0 -1
- package/lib/typescript/module/src/useAnimatedValue.d.ts +0 -3
- package/lib/typescript/module/src/useAnimatedValue.d.ts.map +0 -1
- /package/lib/typescript/{module/package.json → package.json} +0 -0
- /package/lib/typescript/{commonjs/src → src}/Pager.android.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/Pager.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/Pager.ios.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/PagerViewAdapter.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/PanResponderAdapter.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/PlatformPressable.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/SceneMap.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/SceneView.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/TabBar.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/TabBarIndicator.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/TabBarItem.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/TabBarItemLabel.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/TabView.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/index.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/types.d.ts +0 -0
- /package/lib/typescript/{commonjs/src → src}/useAnimatedValue.d.ts +0 -0
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.PlatformPressable = PlatformPressable;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
const ANDROID_VERSION_LOLLIPOP = 21;
|
|
13
|
-
const ANDROID_SUPPORTS_RIPPLE = _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= ANDROID_VERSION_LOLLIPOP;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
|
|
17
|
-
*/
|
|
18
|
-
function PlatformPressable({
|
|
19
|
-
disabled,
|
|
20
|
-
android_ripple,
|
|
21
|
-
pressColor = 'rgba(0, 0, 0, .32)',
|
|
22
|
-
pressOpacity,
|
|
23
|
-
style,
|
|
24
|
-
onPress,
|
|
25
|
-
...rest
|
|
26
|
-
}) {
|
|
27
|
-
const handlePress = e => {
|
|
28
|
-
if (_reactNative.Platform.OS === 'web' && rest.href !== null) {
|
|
29
|
-
// @ts-expect-error: these properties exist on web, but not in React Native
|
|
30
|
-
const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
|
|
31
|
-
// @ts-expect-error: these properties exist on web, but not in React Native
|
|
32
|
-
const isLeftClick = e.button === null || e.button === 0; // only handle left clicks
|
|
33
|
-
const isSelfTarget = [undefined, null, '', 'self'].includes(
|
|
34
|
-
// @ts-expect-error: these properties exist on web, but not in React Native
|
|
35
|
-
e.currentTarget?.target); // let browser handle "target=_blank" etc.
|
|
36
|
-
|
|
37
|
-
if (!hasModifierKey && isLeftClick && isSelfTarget) {
|
|
38
|
-
e.preventDefault();
|
|
39
|
-
onPress?.(e);
|
|
40
|
-
}
|
|
41
|
-
} else {
|
|
42
|
-
onPress?.(e);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
46
|
-
android_ripple: ANDROID_SUPPORTS_RIPPLE ? {
|
|
47
|
-
color: pressColor,
|
|
48
|
-
...android_ripple
|
|
49
|
-
} : undefined,
|
|
50
|
-
style: ({
|
|
51
|
-
pressed
|
|
52
|
-
}) => [{
|
|
53
|
-
cursor: _reactNative.Platform.OS === 'web' || _reactNative.Platform.OS === 'ios' ?
|
|
54
|
-
// Pointer cursor on web
|
|
55
|
-
// Hover effect on iPad and visionOS
|
|
56
|
-
'pointer' : 'auto',
|
|
57
|
-
opacity: pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1
|
|
58
|
-
}, typeof style === 'function' ? style({
|
|
59
|
-
pressed
|
|
60
|
-
}) : style],
|
|
61
|
-
onPress: disabled ? undefined : handlePress,
|
|
62
|
-
...rest
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
//# sourceMappingURL=PlatformPressable.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ANDROID_VERSION_LOLLIPOP","ANDROID_SUPPORTS_RIPPLE","Platform","OS","Version","PlatformPressable","disabled","android_ripple","pressColor","pressOpacity","style","onPress","rest","handlePress","href","hasModifierKey","metaKey","altKey","ctrlKey","shiftKey","isLeftClick","button","isSelfTarget","undefined","includes","currentTarget","target","preventDefault","jsx","Pressable","color","pressed","cursor","opacity"],"sourceRoot":"../../src","sources":["PlatformPressable.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/commonjs/SceneMap.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SceneMap = SceneMap;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
10
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
-
const SceneComponent = /*#__PURE__*/React.memo(({
|
|
12
|
-
component,
|
|
13
|
-
...rest
|
|
14
|
-
}) => {
|
|
15
|
-
return /*#__PURE__*/React.createElement(component, rest);
|
|
16
|
-
});
|
|
17
|
-
SceneComponent.displayName = 'SceneComponent';
|
|
18
|
-
function SceneMap(scenes) {
|
|
19
|
-
return ({
|
|
20
|
-
route,
|
|
21
|
-
jumpTo,
|
|
22
|
-
position
|
|
23
|
-
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(SceneComponent, {
|
|
24
|
-
component: scenes[route.key],
|
|
25
|
-
route: route,
|
|
26
|
-
jumpTo: jumpTo,
|
|
27
|
-
position: position
|
|
28
|
-
}, route.key);
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=SceneMap.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SceneComponent","memo","component","rest","createElement","displayName","SceneMap","scenes","route","jumpTo","position","jsx","key"],"sourceRoot":"../../src","sources":["SceneMap.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ/B,MAAMW,cAAc,gBAAGxB,KAAK,CAACyB,IAAI,CAC/B,CAAiE;EAC/DC,SAAS;EACT,GAAGC;AACF,CAAC,KAAK;EACP,oBAAO3B,KAAK,CAAC4B,aAAa,CAACF,SAAS,EAAEC,IAAI,CAAC;AAC7C,CACF,CAAC;AAEDH,cAAc,CAACK,WAAW,GAAG,gBAAgB;AAEtC,SAASC,QAAQA,CAAIC,MAAiD,EAAE;EAC7E,OAAO,CAAC;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAqB,CAAC,kBAC7C,IAAA/B,WAAA,CAAAgC,GAAA,EAACX,cAAc;IAEbE,SAAS,EAAEK,MAAM,CAACC,KAAK,CAACI,GAAG,CAAE;IAC7BJ,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA;EAAS,GAJdF,KAAK,CAACI,GAKZ,CACF;AACH","ignoreList":[]}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SceneView = SceneView;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
function SceneView({
|
|
13
|
-
children,
|
|
14
|
-
navigationState,
|
|
15
|
-
lazy,
|
|
16
|
-
layout,
|
|
17
|
-
index,
|
|
18
|
-
lazyPreloadDistance,
|
|
19
|
-
addEnterListener,
|
|
20
|
-
style
|
|
21
|
-
}) {
|
|
22
|
-
const [isLoading, setIsLoading] = React.useState(Math.abs(navigationState.index - index) > lazyPreloadDistance);
|
|
23
|
-
if (isLoading && Math.abs(navigationState.index - index) <= lazyPreloadDistance) {
|
|
24
|
-
// Always render the route when it becomes focused
|
|
25
|
-
setIsLoading(false);
|
|
26
|
-
}
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
const handleEnter = value => {
|
|
29
|
-
// If we're entering the current route, we need to load it
|
|
30
|
-
if (value === index) {
|
|
31
|
-
setIsLoading(prevState => {
|
|
32
|
-
if (prevState) {
|
|
33
|
-
return false;
|
|
34
|
-
}
|
|
35
|
-
return prevState;
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
let unsubscribe;
|
|
40
|
-
let timer;
|
|
41
|
-
if (lazy && isLoading) {
|
|
42
|
-
// If lazy mode is enabled, listen to when we enter screens
|
|
43
|
-
unsubscribe = addEnterListener(handleEnter);
|
|
44
|
-
} else if (isLoading) {
|
|
45
|
-
// If lazy mode is not enabled, render the scene with a delay if not loaded already
|
|
46
|
-
// This improves the initial startup time as the scene is no longer blocking
|
|
47
|
-
timer = setTimeout(() => setIsLoading(false), 0);
|
|
48
|
-
}
|
|
49
|
-
return () => {
|
|
50
|
-
unsubscribe?.();
|
|
51
|
-
clearTimeout(timer);
|
|
52
|
-
};
|
|
53
|
-
}, [addEnterListener, index, isLoading, lazy]);
|
|
54
|
-
const focused = navigationState.index === index;
|
|
55
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
56
|
-
accessibilityElementsHidden: !focused,
|
|
57
|
-
importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
|
|
58
|
-
style: [styles.route,
|
|
59
|
-
// If we don't have the layout yet, make the focused screen fill the container
|
|
60
|
-
// This avoids delay before we are able to render pages side by side
|
|
61
|
-
layout.width ? {
|
|
62
|
-
width: layout.width
|
|
63
|
-
} : focused ? _reactNative.StyleSheet.absoluteFill : null, style],
|
|
64
|
-
children:
|
|
65
|
-
// Only render the route only if it's either focused or layout is available
|
|
66
|
-
// When layout is not available, we must not render unfocused routes
|
|
67
|
-
// so that the focused route can fill the screen
|
|
68
|
-
focused || layout.width ? children({
|
|
69
|
-
loading: isLoading
|
|
70
|
-
}) : null
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
const styles = _reactNative.StyleSheet.create({
|
|
74
|
-
route: {
|
|
75
|
-
flex: 1,
|
|
76
|
-
overflow: 'hidden'
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
//# sourceMappingURL=SceneView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SceneView","children","navigationState","lazy","layout","index","lazyPreloadDistance","addEnterListener","style","isLoading","setIsLoading","useState","Math","abs","useEffect","handleEnter","value","prevState","unsubscribe","timer","setTimeout","clearTimeout","focused","jsx","View","accessibilityElementsHidden","importantForAccessibility","styles","route","width","StyleSheet","absoluteFill","loading","create","flex","overflow"],"sourceRoot":"../../src","sources":["SceneView.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/commonjs/TabBar.js
DELETED
|
@@ -1,479 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.TabBar = TabBar;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var React = _react;
|
|
9
|
-
var _reactNative = require("react-native");
|
|
10
|
-
var _useLatestCallback = _interopRequireDefault(require("use-latest-callback"));
|
|
11
|
-
var _TabBarIndicator = require("./TabBarIndicator.js");
|
|
12
|
-
var _TabBarItem = require("./TabBarItem.js");
|
|
13
|
-
var _useAnimatedValue = require("./useAnimatedValue.js");
|
|
14
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
17
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
|
-
const useNativeDriver = _reactNative.Platform.OS !== 'web';
|
|
19
|
-
const Separator = ({
|
|
20
|
-
width
|
|
21
|
-
}) => {
|
|
22
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
23
|
-
style: {
|
|
24
|
-
width
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
};
|
|
28
|
-
const getFlattenedTabWidth = style => {
|
|
29
|
-
const tabStyle = _reactNative.StyleSheet.flatten(style);
|
|
30
|
-
return tabStyle?.width;
|
|
31
|
-
};
|
|
32
|
-
const getFlattenedPaddingStart = style => {
|
|
33
|
-
const flattenStyle = _reactNative.StyleSheet.flatten(style);
|
|
34
|
-
return flattenStyle ? flattenStyle.paddingLeft || flattenStyle.paddingStart || flattenStyle.paddingHorizontal || 0 : 0;
|
|
35
|
-
};
|
|
36
|
-
const getFlattenedPaddingEnd = style => {
|
|
37
|
-
const flattenStyle = _reactNative.StyleSheet.flatten(style);
|
|
38
|
-
return flattenStyle ? flattenStyle.paddingRight || flattenStyle.paddingEnd || flattenStyle.paddingHorizontal || 0 : 0;
|
|
39
|
-
};
|
|
40
|
-
const convertPaddingPercentToSize = (value, layout) => {
|
|
41
|
-
switch (typeof value) {
|
|
42
|
-
case 'number':
|
|
43
|
-
return value;
|
|
44
|
-
case 'string':
|
|
45
|
-
if (value.endsWith('%')) {
|
|
46
|
-
const width = parseFloat(value);
|
|
47
|
-
if (Number.isFinite(width)) {
|
|
48
|
-
return layout.width * (width / 100);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return 0;
|
|
53
|
-
};
|
|
54
|
-
const getComputedTabWidth = (index, layout, routes, scrollEnabled, tabWidths, flattenedWidth, flattenedPaddingStart, flattenedPaddingEnd, gap) => {
|
|
55
|
-
if (flattenedWidth === 'auto') {
|
|
56
|
-
return tabWidths[routes[index].key] || 0;
|
|
57
|
-
}
|
|
58
|
-
switch (typeof flattenedWidth) {
|
|
59
|
-
case 'number':
|
|
60
|
-
return flattenedWidth;
|
|
61
|
-
case 'string':
|
|
62
|
-
if (flattenedWidth.endsWith('%')) {
|
|
63
|
-
const width = parseFloat(flattenedWidth);
|
|
64
|
-
if (Number.isFinite(width)) {
|
|
65
|
-
return layout.width * (width / 100);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
if (scrollEnabled) {
|
|
70
|
-
return layout.width / 5 * 2;
|
|
71
|
-
}
|
|
72
|
-
const gapTotalWidth = (gap ?? 0) * (routes.length - 1);
|
|
73
|
-
const paddingTotalWidth = convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout);
|
|
74
|
-
return (layout.width - gapTotalWidth - paddingTotalWidth) / routes.length;
|
|
75
|
-
};
|
|
76
|
-
const getMaxScrollDistance = (tabBarWidth, layoutWidth) => tabBarWidth - layoutWidth;
|
|
77
|
-
const getTranslateX = (scrollAmount, maxScrollDistance, direction) => _reactNative.Animated.multiply(_reactNative.Platform.OS === 'android' && direction === 'rtl' ? _reactNative.Animated.add(maxScrollDistance, _reactNative.Animated.multiply(scrollAmount, -1)) : scrollAmount, direction === 'rtl' ? 1 : -1);
|
|
78
|
-
const getTabBarWidth = ({
|
|
79
|
-
navigationState,
|
|
80
|
-
layout,
|
|
81
|
-
gap,
|
|
82
|
-
scrollEnabled,
|
|
83
|
-
flattenedTabWidth,
|
|
84
|
-
flattenedPaddingStart,
|
|
85
|
-
flattenedPaddingEnd,
|
|
86
|
-
tabWidths
|
|
87
|
-
}) => {
|
|
88
|
-
const {
|
|
89
|
-
routes
|
|
90
|
-
} = navigationState;
|
|
91
|
-
const paddingsWidth = Math.max(0, convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout));
|
|
92
|
-
return routes.reduce((acc, _, i) => acc + (i > 0 ? gap ?? 0 : 0) + getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingStart, flattenedPaddingEnd, gap), paddingsWidth);
|
|
93
|
-
};
|
|
94
|
-
const normalizeScrollValue = ({
|
|
95
|
-
layout,
|
|
96
|
-
navigationState,
|
|
97
|
-
gap,
|
|
98
|
-
scrollEnabled,
|
|
99
|
-
tabWidths,
|
|
100
|
-
value,
|
|
101
|
-
flattenedTabWidth,
|
|
102
|
-
flattenedPaddingStart,
|
|
103
|
-
flattenedPaddingEnd,
|
|
104
|
-
direction
|
|
105
|
-
}) => {
|
|
106
|
-
const tabBarWidth = getTabBarWidth({
|
|
107
|
-
layout,
|
|
108
|
-
navigationState,
|
|
109
|
-
tabWidths,
|
|
110
|
-
gap,
|
|
111
|
-
scrollEnabled,
|
|
112
|
-
flattenedTabWidth,
|
|
113
|
-
flattenedPaddingStart,
|
|
114
|
-
flattenedPaddingEnd
|
|
115
|
-
});
|
|
116
|
-
const maxDistance = getMaxScrollDistance(tabBarWidth, layout.width);
|
|
117
|
-
const scrollValue = Math.max(Math.min(value, maxDistance), 0);
|
|
118
|
-
if (_reactNative.Platform.OS === 'android' && direction === 'rtl') {
|
|
119
|
-
// On Android, scroll value is not applied in reverse in RTL
|
|
120
|
-
// so we need to manually adjust it to apply correct value
|
|
121
|
-
return maxDistance - scrollValue;
|
|
122
|
-
}
|
|
123
|
-
return scrollValue;
|
|
124
|
-
};
|
|
125
|
-
const getScrollAmount = ({
|
|
126
|
-
layout,
|
|
127
|
-
navigationState,
|
|
128
|
-
gap,
|
|
129
|
-
scrollEnabled,
|
|
130
|
-
flattenedTabWidth,
|
|
131
|
-
tabWidths,
|
|
132
|
-
flattenedPaddingStart,
|
|
133
|
-
flattenedPaddingEnd,
|
|
134
|
-
direction
|
|
135
|
-
}) => {
|
|
136
|
-
const paddingInitial = direction === 'rtl' ? convertPaddingPercentToSize(flattenedPaddingEnd, layout) : convertPaddingPercentToSize(flattenedPaddingStart, layout);
|
|
137
|
-
const centerDistance = Array.from({
|
|
138
|
-
length: navigationState.index + 1
|
|
139
|
-
}).reduce((total, _, i) => {
|
|
140
|
-
const tabWidth = getComputedTabWidth(i, layout, navigationState.routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingStart, flattenedPaddingEnd, gap);
|
|
141
|
-
|
|
142
|
-
// To get the current index centered we adjust scroll amount by width of indexes
|
|
143
|
-
// 0 through (i - 1) and add half the width of current index i
|
|
144
|
-
return total + (i > 0 ? gap ?? 0 : 0) + (navigationState.index === i ? tabWidth / 2 : tabWidth);
|
|
145
|
-
}, paddingInitial);
|
|
146
|
-
const scrollAmount = centerDistance - layout.width / 2;
|
|
147
|
-
return normalizeScrollValue({
|
|
148
|
-
layout,
|
|
149
|
-
navigationState,
|
|
150
|
-
tabWidths,
|
|
151
|
-
value: scrollAmount,
|
|
152
|
-
gap,
|
|
153
|
-
scrollEnabled,
|
|
154
|
-
flattenedTabWidth,
|
|
155
|
-
flattenedPaddingStart,
|
|
156
|
-
flattenedPaddingEnd,
|
|
157
|
-
direction
|
|
158
|
-
});
|
|
159
|
-
};
|
|
160
|
-
const getLabelTextDefault = ({
|
|
161
|
-
route
|
|
162
|
-
}) => route.title;
|
|
163
|
-
const getAccessibleDefault = ({
|
|
164
|
-
route
|
|
165
|
-
}) => typeof route.accessible !== 'undefined' ? route.accessible : true;
|
|
166
|
-
const getAccessibilityLabelDefault = ({
|
|
167
|
-
route
|
|
168
|
-
}) => typeof route.accessibilityLabel === 'string' ? route.accessibilityLabel : typeof route.title === 'string' ? route.title : undefined;
|
|
169
|
-
const renderIndicatorDefault = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabBarIndicator.TabBarIndicator, {
|
|
170
|
-
...props
|
|
171
|
-
});
|
|
172
|
-
const getTestIdDefault = ({
|
|
173
|
-
route
|
|
174
|
-
}) => route.testID;
|
|
175
|
-
|
|
176
|
-
// How many items measurements should we update per batch.
|
|
177
|
-
// Defaults to 10, since that's whats FlatList is using in initialNumToRender.
|
|
178
|
-
const MEASURE_PER_BATCH = 10;
|
|
179
|
-
function TabBar({
|
|
180
|
-
renderIndicator = renderIndicatorDefault,
|
|
181
|
-
gap = 0,
|
|
182
|
-
scrollEnabled,
|
|
183
|
-
jumpTo,
|
|
184
|
-
navigationState,
|
|
185
|
-
position,
|
|
186
|
-
activeColor,
|
|
187
|
-
bounces,
|
|
188
|
-
contentContainerStyle,
|
|
189
|
-
inactiveColor,
|
|
190
|
-
indicatorContainerStyle,
|
|
191
|
-
indicatorStyle,
|
|
192
|
-
onTabLongPress,
|
|
193
|
-
onTabPress,
|
|
194
|
-
pressColor,
|
|
195
|
-
pressOpacity,
|
|
196
|
-
direction = _reactNative.I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
|
|
197
|
-
renderTabBarItem,
|
|
198
|
-
style,
|
|
199
|
-
tabStyle,
|
|
200
|
-
layout: propLayout,
|
|
201
|
-
testID,
|
|
202
|
-
android_ripple,
|
|
203
|
-
options
|
|
204
|
-
}) {
|
|
205
|
-
const [layout, setLayout] = React.useState(propLayout ?? {
|
|
206
|
-
width: 0,
|
|
207
|
-
height: 0
|
|
208
|
-
});
|
|
209
|
-
const [tabWidths, setTabWidths] = React.useState({});
|
|
210
|
-
const flatListRef = React.useRef(null);
|
|
211
|
-
const isFirst = React.useRef(true);
|
|
212
|
-
const scrollAmount = (0, _useAnimatedValue.useAnimatedValue)(0);
|
|
213
|
-
const measuredTabWidths = React.useRef({});
|
|
214
|
-
const {
|
|
215
|
-
routes
|
|
216
|
-
} = navigationState;
|
|
217
|
-
const flattenedTabWidth = getFlattenedTabWidth(tabStyle);
|
|
218
|
-
const isWidthDynamic = flattenedTabWidth === 'auto';
|
|
219
|
-
const flattenedPaddingEnd = getFlattenedPaddingEnd(contentContainerStyle);
|
|
220
|
-
const flattenedPaddingStart = getFlattenedPaddingStart(contentContainerStyle);
|
|
221
|
-
const scrollOffset = getScrollAmount({
|
|
222
|
-
layout,
|
|
223
|
-
navigationState,
|
|
224
|
-
tabWidths,
|
|
225
|
-
gap,
|
|
226
|
-
scrollEnabled,
|
|
227
|
-
flattenedTabWidth,
|
|
228
|
-
flattenedPaddingStart,
|
|
229
|
-
flattenedPaddingEnd,
|
|
230
|
-
direction
|
|
231
|
-
});
|
|
232
|
-
const hasMeasuredTabWidths = Boolean(layout.width) && routes.slice(0, navigationState.index).every(r => typeof tabWidths[r.key] === 'number');
|
|
233
|
-
React.useEffect(() => {
|
|
234
|
-
if (isFirst.current) {
|
|
235
|
-
isFirst.current = false;
|
|
236
|
-
return;
|
|
237
|
-
}
|
|
238
|
-
if (isWidthDynamic && !hasMeasuredTabWidths) {
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
if (scrollEnabled) {
|
|
242
|
-
flatListRef.current?.scrollToOffset({
|
|
243
|
-
offset: scrollOffset,
|
|
244
|
-
animated: true
|
|
245
|
-
});
|
|
246
|
-
}
|
|
247
|
-
}, [hasMeasuredTabWidths, isWidthDynamic, scrollEnabled, scrollOffset]);
|
|
248
|
-
const handleLayout = e => {
|
|
249
|
-
const {
|
|
250
|
-
height,
|
|
251
|
-
width
|
|
252
|
-
} = e.nativeEvent.layout;
|
|
253
|
-
setLayout(layout => layout.width === width && layout.height === height ? layout : {
|
|
254
|
-
width,
|
|
255
|
-
height
|
|
256
|
-
});
|
|
257
|
-
};
|
|
258
|
-
const tabBarWidth = getTabBarWidth({
|
|
259
|
-
layout,
|
|
260
|
-
navigationState,
|
|
261
|
-
tabWidths,
|
|
262
|
-
gap,
|
|
263
|
-
scrollEnabled,
|
|
264
|
-
flattenedTabWidth,
|
|
265
|
-
flattenedPaddingStart,
|
|
266
|
-
flattenedPaddingEnd
|
|
267
|
-
});
|
|
268
|
-
const separatorsWidth = Math.max(0, routes.length - 1) * gap;
|
|
269
|
-
const paddingsWidth = Math.max(0, convertPaddingPercentToSize(flattenedPaddingStart, layout) + convertPaddingPercentToSize(flattenedPaddingEnd, layout));
|
|
270
|
-
const translateX = React.useMemo(() => getTranslateX(scrollAmount, getMaxScrollDistance(tabBarWidth, layout.width), direction), [direction, layout.width, scrollAmount, tabBarWidth]);
|
|
271
|
-
const renderItem = React.useCallback(({
|
|
272
|
-
item: route,
|
|
273
|
-
index
|
|
274
|
-
}) => {
|
|
275
|
-
const {
|
|
276
|
-
testID = getTestIdDefault({
|
|
277
|
-
route
|
|
278
|
-
}),
|
|
279
|
-
labelText = getLabelTextDefault({
|
|
280
|
-
route
|
|
281
|
-
}),
|
|
282
|
-
accessible = getAccessibleDefault({
|
|
283
|
-
route
|
|
284
|
-
}),
|
|
285
|
-
accessibilityLabel = getAccessibilityLabelDefault({
|
|
286
|
-
route
|
|
287
|
-
}),
|
|
288
|
-
...rest
|
|
289
|
-
} = options?.[route.key] ?? {};
|
|
290
|
-
const onLayout = isWidthDynamic ? e => {
|
|
291
|
-
measuredTabWidths.current[route.key] = e.nativeEvent.layout.width;
|
|
292
|
-
|
|
293
|
-
// When we have measured widths for all of the tabs, we should updates the state
|
|
294
|
-
// We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
|
|
295
|
-
// If we have more than 10 routes divide updating tabWidths into multiple batches. Here we update only first batch of 10 items.
|
|
296
|
-
if (routes.length > MEASURE_PER_BATCH && index === MEASURE_PER_BATCH && routes.slice(0, MEASURE_PER_BATCH).every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
|
|
297
|
-
setTabWidths({
|
|
298
|
-
...measuredTabWidths.current
|
|
299
|
-
});
|
|
300
|
-
} else if (routes.every(r => typeof measuredTabWidths.current[r.key] === 'number')) {
|
|
301
|
-
// When we have measured widths for all of the tabs, we should updates the state
|
|
302
|
-
// We avoid doing separate setState for each layout since it triggers multiple renders and slows down app
|
|
303
|
-
setTabWidths({
|
|
304
|
-
...measuredTabWidths.current
|
|
305
|
-
});
|
|
306
|
-
}
|
|
307
|
-
} : undefined;
|
|
308
|
-
const onPress = () => {
|
|
309
|
-
const event = {
|
|
310
|
-
route,
|
|
311
|
-
defaultPrevented: false,
|
|
312
|
-
preventDefault: () => {
|
|
313
|
-
event.defaultPrevented = true;
|
|
314
|
-
}
|
|
315
|
-
};
|
|
316
|
-
onTabPress?.(event);
|
|
317
|
-
if (event.defaultPrevented) {
|
|
318
|
-
return;
|
|
319
|
-
}
|
|
320
|
-
jumpTo(route.key);
|
|
321
|
-
};
|
|
322
|
-
const onLongPress = () => onTabLongPress?.({
|
|
323
|
-
route
|
|
324
|
-
});
|
|
325
|
-
|
|
326
|
-
// Calculate the default width for tab for FlatList to work
|
|
327
|
-
const defaultTabWidth = !isWidthDynamic ? getComputedTabWidth(index, layout, routes, scrollEnabled, tabWidths, getFlattenedTabWidth(tabStyle), getFlattenedPaddingEnd(contentContainerStyle), getFlattenedPaddingStart(contentContainerStyle), gap) : undefined;
|
|
328
|
-
const props = {
|
|
329
|
-
...rest,
|
|
330
|
-
key: route.key,
|
|
331
|
-
position,
|
|
332
|
-
route,
|
|
333
|
-
navigationState,
|
|
334
|
-
testID,
|
|
335
|
-
labelText,
|
|
336
|
-
accessible,
|
|
337
|
-
accessibilityLabel,
|
|
338
|
-
activeColor,
|
|
339
|
-
inactiveColor,
|
|
340
|
-
pressColor,
|
|
341
|
-
pressOpacity,
|
|
342
|
-
onLayout,
|
|
343
|
-
onPress,
|
|
344
|
-
onLongPress,
|
|
345
|
-
style: tabStyle,
|
|
346
|
-
defaultTabWidth,
|
|
347
|
-
android_ripple
|
|
348
|
-
};
|
|
349
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
350
|
-
children: [gap > 0 && index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, {
|
|
351
|
-
width: gap
|
|
352
|
-
}) : null, renderTabBarItem ? renderTabBarItem(props) : /*#__PURE__*/(0, _react.createElement)(_TabBarItem.TabBarItem, {
|
|
353
|
-
...props,
|
|
354
|
-
key: props.key
|
|
355
|
-
})]
|
|
356
|
-
});
|
|
357
|
-
}, [position, navigationState, options, activeColor, inactiveColor, pressColor, pressOpacity, isWidthDynamic, tabStyle, layout, routes, scrollEnabled, tabWidths, contentContainerStyle, gap, android_ripple, renderTabBarItem, onTabPress, jumpTo, onTabLongPress]);
|
|
358
|
-
const keyExtractor = React.useCallback(item => item.key, []);
|
|
359
|
-
const contentContainerStyleMemoized = React.useMemo(() => [styles.tabContent, scrollEnabled ? {
|
|
360
|
-
width: tabBarWidth
|
|
361
|
-
} : null, contentContainerStyle], [contentContainerStyle, scrollEnabled, tabBarWidth]);
|
|
362
|
-
const handleScroll = React.useMemo(() => _reactNative.Animated.event([{
|
|
363
|
-
nativeEvent: {
|
|
364
|
-
contentOffset: {
|
|
365
|
-
x: scrollAmount
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
}], {
|
|
369
|
-
useNativeDriver
|
|
370
|
-
}), [scrollAmount]);
|
|
371
|
-
const handleViewableItemsChanged = (0, _useLatestCallback.default)(({
|
|
372
|
-
changed
|
|
373
|
-
}) => {
|
|
374
|
-
if (routes.length <= MEASURE_PER_BATCH) {
|
|
375
|
-
return;
|
|
376
|
-
}
|
|
377
|
-
// Get next vievable item
|
|
378
|
-
const item = changed[changed.length - 1];
|
|
379
|
-
const index = item?.index || 0;
|
|
380
|
-
if (item.isViewable && (index % 10 === 0 || index === navigationState.index || index === routes.length - 1)) {
|
|
381
|
-
setTabWidths({
|
|
382
|
-
...measuredTabWidths.current
|
|
383
|
-
});
|
|
384
|
-
}
|
|
385
|
-
});
|
|
386
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
|
|
387
|
-
onLayout: handleLayout,
|
|
388
|
-
style: [styles.tabBar, style],
|
|
389
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
390
|
-
pointerEvents: "none",
|
|
391
|
-
style: [styles.indicatorContainer, scrollEnabled ? {
|
|
392
|
-
transform: [{
|
|
393
|
-
translateX
|
|
394
|
-
}]
|
|
395
|
-
} : null, scrollEnabled ? {
|
|
396
|
-
width: tabBarWidth
|
|
397
|
-
} : null, indicatorContainerStyle],
|
|
398
|
-
children: renderIndicator({
|
|
399
|
-
position,
|
|
400
|
-
layout,
|
|
401
|
-
navigationState,
|
|
402
|
-
jumpTo,
|
|
403
|
-
direction,
|
|
404
|
-
width: isWidthDynamic ? 'auto' : Math.max(0, (tabBarWidth - separatorsWidth - paddingsWidth) / routes.length),
|
|
405
|
-
style: [indicatorStyle, {
|
|
406
|
-
start: flattenedPaddingStart,
|
|
407
|
-
end: flattenedPaddingEnd
|
|
408
|
-
}],
|
|
409
|
-
getTabWidth: i => getComputedTabWidth(i, layout, routes, scrollEnabled, tabWidths, flattenedTabWidth, flattenedPaddingEnd, flattenedPaddingStart, gap),
|
|
410
|
-
gap
|
|
411
|
-
})
|
|
412
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
413
|
-
style: styles.scroll,
|
|
414
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.FlatList, {
|
|
415
|
-
data: routes,
|
|
416
|
-
keyExtractor: keyExtractor,
|
|
417
|
-
horizontal: true,
|
|
418
|
-
accessibilityRole: "tablist",
|
|
419
|
-
keyboardShouldPersistTaps: "handled",
|
|
420
|
-
scrollEnabled: scrollEnabled,
|
|
421
|
-
bounces: bounces,
|
|
422
|
-
initialNumToRender: MEASURE_PER_BATCH,
|
|
423
|
-
onViewableItemsChanged: handleViewableItemsChanged,
|
|
424
|
-
alwaysBounceHorizontal: false,
|
|
425
|
-
scrollsToTop: false,
|
|
426
|
-
showsHorizontalScrollIndicator: false,
|
|
427
|
-
showsVerticalScrollIndicator: false,
|
|
428
|
-
automaticallyAdjustContentInsets: false,
|
|
429
|
-
overScrollMode: "never",
|
|
430
|
-
contentContainerStyle: contentContainerStyleMemoized,
|
|
431
|
-
scrollEventThrottle: 16,
|
|
432
|
-
renderItem: renderItem,
|
|
433
|
-
onScroll: handleScroll,
|
|
434
|
-
ref: flatListRef,
|
|
435
|
-
testID: testID
|
|
436
|
-
})
|
|
437
|
-
})]
|
|
438
|
-
});
|
|
439
|
-
}
|
|
440
|
-
const styles = _reactNative.StyleSheet.create({
|
|
441
|
-
scroll: {
|
|
442
|
-
overflow: _reactNative.Platform.select({
|
|
443
|
-
default: 'scroll',
|
|
444
|
-
web: undefined
|
|
445
|
-
})
|
|
446
|
-
},
|
|
447
|
-
tabBar: {
|
|
448
|
-
zIndex: 1,
|
|
449
|
-
backgroundColor: '#2196f3',
|
|
450
|
-
elevation: 4,
|
|
451
|
-
..._reactNative.Platform.select({
|
|
452
|
-
default: {
|
|
453
|
-
shadowColor: 'black',
|
|
454
|
-
shadowOpacity: 0.1,
|
|
455
|
-
shadowRadius: _reactNative.StyleSheet.hairlineWidth,
|
|
456
|
-
shadowOffset: {
|
|
457
|
-
height: _reactNative.StyleSheet.hairlineWidth,
|
|
458
|
-
width: 0
|
|
459
|
-
}
|
|
460
|
-
},
|
|
461
|
-
web: {
|
|
462
|
-
boxShadow: '0 1px 1px rgba(0, 0, 0, 0.1)'
|
|
463
|
-
}
|
|
464
|
-
})
|
|
465
|
-
},
|
|
466
|
-
tabContent: {
|
|
467
|
-
flexGrow: 1,
|
|
468
|
-
flexDirection: 'row',
|
|
469
|
-
flexWrap: 'nowrap'
|
|
470
|
-
},
|
|
471
|
-
indicatorContainer: {
|
|
472
|
-
position: 'absolute',
|
|
473
|
-
top: 0,
|
|
474
|
-
start: 0,
|
|
475
|
-
end: 0,
|
|
476
|
-
bottom: 0
|
|
477
|
-
}
|
|
478
|
-
});
|
|
479
|
-
//# sourceMappingURL=TabBar.js.map
|