react-native-tab-view 5.0.0-alpha.0 → 5.0.0-alpha.2
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/SceneView.js +13 -1
- package/lib/module/SceneView.js.map +1 -1
- package/lib/module/TabView.js.map +1 -1
- package/lib/typescript/src/SceneView.d.ts.map +1 -1
- package/lib/typescript/src/TabView.d.ts +94 -0
- package/lib/typescript/src/TabView.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/SceneView.tsx +27 -2
- package/src/TabView.tsx +94 -0
package/lib/module/SceneView.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { StyleSheet, View } from 'react-native';
|
|
4
|
+
import { Platform, StyleSheet, View } from 'react-native';
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export function SceneView({
|
|
7
7
|
children,
|
|
@@ -46,7 +46,19 @@ export function SceneView({
|
|
|
46
46
|
clearTimeout(timer);
|
|
47
47
|
};
|
|
48
48
|
}, [subscribe, index, isLoading, lazy]);
|
|
49
|
+
const ref = React.useRef(null);
|
|
50
|
+
React.useLayoutEffect(() => {
|
|
51
|
+
const element = ref.current;
|
|
52
|
+
if (Platform.OS === 'web' && typeof HTMLElement !== 'undefined' && element && element instanceof HTMLElement) {
|
|
53
|
+
if (isFocused) {
|
|
54
|
+
element.removeAttribute('inert');
|
|
55
|
+
} else {
|
|
56
|
+
element.setAttribute('inert', '');
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}, [isFocused]);
|
|
49
60
|
return /*#__PURE__*/_jsx(View, {
|
|
61
|
+
ref: ref,
|
|
50
62
|
"aria-hidden": !isFocused,
|
|
51
63
|
style: [styles.route, style],
|
|
52
64
|
children: children({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","jsx","_jsx","SceneView","children","navigationState","lazy","index","lazyPreloadDistance","subscribe","style","isFocused","isLoaded","Math","abs","isLoading","setIsLoading","useState","useEffect","unsubscribe","timer","event","type","prevState","setTimeout","clearTimeout","styles","route","loading","create","flex","overflow"],"sourceRoot":"../../src","sources":["SceneView.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,
|
|
1
|
+
{"version":3,"names":["React","Platform","StyleSheet","View","jsx","_jsx","SceneView","children","navigationState","lazy","index","lazyPreloadDistance","subscribe","style","isFocused","isLoaded","Math","abs","isLoading","setIsLoading","useState","useEffect","unsubscribe","timer","event","type","prevState","setTimeout","clearTimeout","ref","useRef","useLayoutEffect","element","current","OS","HTMLElement","removeAttribute","setAttribute","styles","route","loading","create","flex","overflow"],"sourceRoot":"../../src","sources":["SceneView.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAmBtB,OAAO,SAASC,SAASA,CAAkB;EACzCC,QAAQ;EACRC,eAAe;EACfC,IAAI;EACJC,KAAK;EACLC,mBAAmB;EACnBC,SAAS;EACTC;AACQ,CAAC,EAAE;EACX,MAAMC,SAAS,GAAGN,eAAe,CAACE,KAAK,KAAKA,KAAK;EACjD,MAAMK,QAAQ,GACZD,SAAS,IAAIE,IAAI,CAACC,GAAG,CAACT,eAAe,CAACE,KAAK,GAAGA,KAAK,CAAC,IAAIC,mBAAmB;EAE7E,MAAM,CAACO,SAAS,EAAEC,YAAY,CAAC,GAAGnB,KAAK,CAACoB,QAAQ,CAAC,CAACL,QAAQ,CAAC;EAE3D,IAAIG,SAAS,IAAIH,QAAQ,EAAE;IACzB;IACA;IACAI,YAAY,CAAC,KAAK,CAAC;EACrB;EAEAnB,KAAK,CAACqB,SAAS,CAAC,MAAM;IACpB,IAAIC,WAAqC;IACzC,IAAIC,KAAgD;IAEpD,IAAId,IAAI,IAAIS,SAAS,EAAE;MACrB;MACAI,WAAW,GAAGV,SAAS,CAAEY,KAAK,IAAK;QACjC;QACA,IAAIA,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACd,KAAK,KAAKA,KAAK,EAAE;UACnDS,YAAY,CAAEO,SAAS,IAAK;YAC1B,IAAIA,SAAS,EAAE;cACb,OAAO,KAAK;YACd;YAEA,OAAOA,SAAS;UAClB,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;IACJ,CAAC,MAAM,IAAIR,SAAS,EAAE;MACpB;MACA;MACAK,KAAK,GAAGI,UAAU,CAAC,MAAMR,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAClD;IAEA,OAAO,MAAM;MACXG,WAAW,GAAG,CAAC;MACfM,YAAY,CAACL,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACX,SAAS,EAAEF,KAAK,EAAEQ,SAAS,EAAET,IAAI,CAAC,CAAC;EAEvC,MAAMoB,GAAG,GAAG7B,KAAK,CAAC8B,MAAM,CAAO,IAAI,CAAC;EAEpC9B,KAAK,CAAC+B,eAAe,CAAC,MAAM;IAC1B,MAAMC,OAAO,GAAGH,GAAG,CAACI,OAAO;IAE3B,IACEhC,QAAQ,CAACiC,EAAE,KAAK,KAAK,IACrB,OAAOC,WAAW,KAAK,WAAW,IAClCH,OAAO,IACPA,OAAO,YAAYG,WAAW,EAC9B;MACA,IAAIrB,SAAS,EAAE;QACbkB,OAAO,CAACI,eAAe,CAAC,OAAO,CAAC;MAClC,CAAC,MAAM;QACLJ,OAAO,CAACK,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;MACnC;IACF;EACF,CAAC,EAAE,CAACvB,SAAS,CAAC,CAAC;EAEf,oBACET,IAAA,CAACF,IAAI;IAAC0B,GAAG,EAAEA,GAAI;IAAC,eAAa,CAACf,SAAU;IAACD,KAAK,EAAE,CAACyB,MAAM,CAACC,KAAK,EAAE1B,KAAK,CAAE;IAAAN,QAAA,EACnEA,QAAQ,CAAC;MAAEiC,OAAO,EAAEtB;IAAU,CAAC;EAAC,CAC7B,CAAC;AAEX;AAEA,MAAMoB,MAAM,GAAGpC,UAAU,CAACuC,MAAM,CAAC;EAC/BF,KAAK,EAAE;IACLG,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","I18nManager","Platform","StyleSheet","View","Pager","SceneView","TabBar","jsx","_jsx","jsxs","_jsxs","renderLazyPlaceholderDefault","TabView","onIndexChange","onTabSelect","navigationState","renderScene","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","renderAdapter","pagerStyle","style","direction","getConstants","isRTL","swipeEnabled","tabBarPosition","animationEnabled","options","sceneOptions","commonOptions","OS","console","warn","jumpToIndex","index","Object","fromEntries","routes","map","route","key","element","layoutDirection","children","position","render","subscribe","jumpTo","sceneRendererProps","Fragment","i","sceneStyle","loading","styles","container","create","flex","overflow"],"sourceRoot":"../../src","sources":["TabView.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,WAAW,EACXC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AAErB,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;
|
|
1
|
+
{"version":3,"names":["React","I18nManager","Platform","StyleSheet","View","Pager","SceneView","TabBar","jsx","_jsx","jsxs","_jsxs","renderLazyPlaceholderDefault","TabView","onIndexChange","onTabSelect","navigationState","renderScene","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","renderAdapter","pagerStyle","style","direction","getConstants","isRTL","swipeEnabled","tabBarPosition","animationEnabled","options","sceneOptions","commonOptions","OS","console","warn","jumpToIndex","index","Object","fromEntries","routes","map","route","key","element","layoutDirection","children","position","render","subscribe","jumpTo","sceneRendererProps","Fragment","i","sceneStyle","loading","styles","container","create","flex","overflow"],"sourceRoot":"../../src","sources":["TabView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SceneView.d.ts","sourceRoot":"","sources":["../../../src/SceneView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"SceneView.d.ts","sourceRoot":"","sources":["../../../src/SceneView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,KAAK,EACL,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAC9C,iBAAiB,GAAG;IAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,KAAK,EAAE,EACzC,QAAQ,EACR,eAAe,EACf,IAAI,EACJ,KAAK,EACL,mBAAmB,EACnB,SAAS,EACT,KAAK,GACN,EAAE,KAAK,CAAC,CAAC,CAAC,2CAmEV"}
|
|
@@ -2,31 +2,125 @@ import * as React from 'react';
|
|
|
2
2
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
3
|
import type { AdapterCommonProps, AdapterProps, EventEmitterProps, LocaleDirection, NavigationState, Route, SceneRendererProps, TabDescriptor } from './types';
|
|
4
4
|
export type Props<T extends Route> = AdapterCommonProps & {
|
|
5
|
+
/**
|
|
6
|
+
* Callback which is called when the index of the active tab changes.
|
|
7
|
+
* Must update the `navigationState.index` prop to the new index.
|
|
8
|
+
*
|
|
9
|
+
* Example:
|
|
10
|
+
* ```js
|
|
11
|
+
* onIndexChange={(index) => setState({ ...state, index })}
|
|
12
|
+
* ```
|
|
13
|
+
*/
|
|
5
14
|
onIndexChange: (index: number) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Callback which is called when the tab navigation animation ends.
|
|
17
|
+
* Useful for side effects that should run after the tab change animation.
|
|
18
|
+
*
|
|
19
|
+
* Unlike `onIndexChange`, this is called regardless of whether the index changed or not.
|
|
20
|
+
*/
|
|
6
21
|
onTabSelect?: (props: {
|
|
7
22
|
index: number;
|
|
8
23
|
}) => void;
|
|
24
|
+
/**
|
|
25
|
+
* State for the tab view containing the current index and routes.
|
|
26
|
+
*
|
|
27
|
+
* Example:
|
|
28
|
+
* ```js
|
|
29
|
+
* {
|
|
30
|
+
* index: 0,
|
|
31
|
+
* routes: [
|
|
32
|
+
* { key: 'first' },
|
|
33
|
+
* { key: 'second' },
|
|
34
|
+
* ],
|
|
35
|
+
* }
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
9
38
|
navigationState: NavigationState<T>;
|
|
39
|
+
/**
|
|
40
|
+
* Callback which returns a custom placeholder element.
|
|
41
|
+
* The placeholder is shown when a scene is not yet loaded when `lazy` is enabled.
|
|
42
|
+
*/
|
|
10
43
|
renderLazyPlaceholder?: (props: {
|
|
11
44
|
route: T;
|
|
12
45
|
}) => React.ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* Callback which returns a custom tab bar element to display.
|
|
48
|
+
*/
|
|
13
49
|
renderTabBar?: (props: SceneRendererProps & EventEmitterProps & {
|
|
14
50
|
navigationState: NavigationState<T>;
|
|
15
51
|
options: Record<string, TabDescriptor<T>> | undefined;
|
|
16
52
|
}) => React.ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* Callback which returns a custom adapter to use for the tab view.
|
|
55
|
+
* Adapters are responsible for handling gestures and animations between tabs.
|
|
56
|
+
*
|
|
57
|
+
* The following adapters are provided out of the box:
|
|
58
|
+
* - `PagerViewAdapter`: Uses `react-native-pager-view` for native experience.
|
|
59
|
+
* - `PanResponderAdapter`: Uses `PanResponder` for a JS-based implementation.
|
|
60
|
+
* - `ScrollViewAdapter`: Uses `ScrollView` for an implementation based on `ScrollView`.
|
|
61
|
+
*
|
|
62
|
+
* Defaults to `PagerViewAdapter` on Android and iOS, and `PanResponderAdapter` on other platforms.
|
|
63
|
+
*/
|
|
17
64
|
renderAdapter?: (props: AdapterProps) => React.ReactElement;
|
|
65
|
+
/**
|
|
66
|
+
* Position of the tab bar in the tab view.
|
|
67
|
+
* Defaults to `'top'`.
|
|
68
|
+
*/
|
|
18
69
|
tabBarPosition?: 'top' | 'bottom';
|
|
70
|
+
/**
|
|
71
|
+
* Whether to lazily render the scenes.
|
|
72
|
+
* When enabled, scenes are rendered only when they come into view.
|
|
73
|
+
*
|
|
74
|
+
* Can be a boolean or a function that receives the route and returns a boolean.
|
|
75
|
+
* Defaults to `false`.
|
|
76
|
+
*/
|
|
19
77
|
lazy?: ((props: {
|
|
20
78
|
route: T;
|
|
21
79
|
}) => boolean) | boolean;
|
|
80
|
+
/**
|
|
81
|
+
* How many screens to preload when `lazy` is enabled.
|
|
82
|
+
*
|
|
83
|
+
* Defaults to `0`.
|
|
84
|
+
*/
|
|
22
85
|
lazyPreloadDistance?: number;
|
|
86
|
+
/**
|
|
87
|
+
* The layout direction of the tab view.
|
|
88
|
+
*
|
|
89
|
+
* Defaults to the app's locale direction (RTL or LTR).
|
|
90
|
+
*/
|
|
23
91
|
direction?: LocaleDirection;
|
|
92
|
+
/**
|
|
93
|
+
* Style to apply to the pager container.
|
|
94
|
+
*/
|
|
24
95
|
pagerStyle?: StyleProp<ViewStyle>;
|
|
96
|
+
/**
|
|
97
|
+
* Style to apply to the tab view container.
|
|
98
|
+
*/
|
|
25
99
|
style?: StyleProp<ViewStyle>;
|
|
100
|
+
/**
|
|
101
|
+
* Callback which returns a React element to render for each route.
|
|
102
|
+
*/
|
|
26
103
|
renderScene: (props: SceneRendererProps & {
|
|
27
104
|
route: T;
|
|
28
105
|
}) => React.ReactNode;
|
|
106
|
+
/**
|
|
107
|
+
* Options for individual tabs, keyed by route key.
|
|
108
|
+
*
|
|
109
|
+
* Example:
|
|
110
|
+
* ```js
|
|
111
|
+
* {
|
|
112
|
+
* first: { labelText: 'First Tab' },
|
|
113
|
+
* second: { labelText: 'Second Tab' },
|
|
114
|
+
* }
|
|
115
|
+
*
|
|
116
|
+
* These options are merged with `commonOptions`.
|
|
117
|
+
*/
|
|
29
118
|
options?: Record<string, TabDescriptor<T>>;
|
|
119
|
+
/**
|
|
120
|
+
* Options that apply to all tabs.
|
|
121
|
+
*
|
|
122
|
+
* Individual tab options from `options` will override these.
|
|
123
|
+
*/
|
|
30
124
|
commonOptions?: TabDescriptor<T>;
|
|
31
125
|
};
|
|
32
126
|
export declare function TabView<T extends Route>({ onIndexChange, onTabSelect, navigationState, renderScene, keyboardDismissMode, lazy, lazyPreloadDistance, onSwipeStart, onSwipeEnd, renderLazyPlaceholder, renderTabBar, renderAdapter, pagerStyle, style, direction, swipeEnabled, tabBarPosition, animationEnabled, options: sceneOptions, commonOptions, }: Props<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GACvB,iBAAiB,GAAG;QAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;KACvD,KACA,KAAK,CAAC,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAClC,CAAC;AAIF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,WAAW,EACX,eAAe,EACf,WAAW,EACX,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAoD,EAEpD,YAA+C,EAE/C,aAA+C,EAC/C,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,OAAO,EAAE,YAAY,EACrB,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,2CAgGV"}
|
|
1
|
+
{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../src/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,KAAK,EACL,kBAAkB,EAClB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,IAAI,kBAAkB,GAAG;IACxD;;;;;;;;OAQG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjD;;;;;;;;;;;;;OAaG;IACH,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IACpC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACjE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,kBAAkB,GACvB,iBAAiB,GAAG;QAClB,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;QACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;KACvD,KACA,KAAK,CAAC,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;IACpD;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAClC,CAAC;AAIF,wBAAgB,OAAO,CAAC,CAAC,SAAS,KAAK,EAAE,EACvC,aAAa,EACb,WAAW,EACX,eAAe,EACf,WAAW,EACX,mBAA4B,EAC5B,IAAY,EACZ,mBAAuB,EACvB,YAAY,EACZ,UAAU,EACV,qBAAoD,EAEpD,YAA+C,EAE/C,aAA+C,EAC/C,UAAU,EACV,KAAK,EACL,SAA4D,EAC5D,YAAmB,EACnB,cAAsB,EACtB,gBAAuB,EACvB,OAAO,EAAE,YAAY,EACrB,aAAa,GACd,EAAE,KAAK,CAAC,CAAC,CAAC,2CAgGV"}
|
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": "5.0.0-alpha.
|
|
4
|
+
"version": "5.0.0-alpha.2",
|
|
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": "faad2ee23945a5a27090cfb837a35d1db25147ab"
|
|
84
84
|
}
|
package/src/SceneView.tsx
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Platform,
|
|
4
|
+
type StyleProp,
|
|
5
|
+
StyleSheet,
|
|
6
|
+
View,
|
|
7
|
+
type ViewStyle,
|
|
8
|
+
} from 'react-native';
|
|
3
9
|
|
|
4
10
|
import type {
|
|
5
11
|
EventEmitterProps,
|
|
@@ -69,8 +75,27 @@ export function SceneView<T extends Route>({
|
|
|
69
75
|
};
|
|
70
76
|
}, [subscribe, index, isLoading, lazy]);
|
|
71
77
|
|
|
78
|
+
const ref = React.useRef<View>(null);
|
|
79
|
+
|
|
80
|
+
React.useLayoutEffect(() => {
|
|
81
|
+
const element = ref.current;
|
|
82
|
+
|
|
83
|
+
if (
|
|
84
|
+
Platform.OS === 'web' &&
|
|
85
|
+
typeof HTMLElement !== 'undefined' &&
|
|
86
|
+
element &&
|
|
87
|
+
element instanceof HTMLElement
|
|
88
|
+
) {
|
|
89
|
+
if (isFocused) {
|
|
90
|
+
element.removeAttribute('inert');
|
|
91
|
+
} else {
|
|
92
|
+
element.setAttribute('inert', '');
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}, [isFocused]);
|
|
96
|
+
|
|
72
97
|
return (
|
|
73
|
-
<View aria-hidden={!isFocused} style={[styles.route, style]}>
|
|
98
|
+
<View ref={ref} aria-hidden={!isFocused} style={[styles.route, style]}>
|
|
74
99
|
{children({ loading: isLoading })}
|
|
75
100
|
</View>
|
|
76
101
|
);
|
package/src/TabView.tsx
CHANGED
|
@@ -23,10 +23,46 @@ import type {
|
|
|
23
23
|
} from './types';
|
|
24
24
|
|
|
25
25
|
export type Props<T extends Route> = AdapterCommonProps & {
|
|
26
|
+
/**
|
|
27
|
+
* Callback which is called when the index of the active tab changes.
|
|
28
|
+
* Must update the `navigationState.index` prop to the new index.
|
|
29
|
+
*
|
|
30
|
+
* Example:
|
|
31
|
+
* ```js
|
|
32
|
+
* onIndexChange={(index) => setState({ ...state, index })}
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
26
35
|
onIndexChange: (index: number) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Callback which is called when the tab navigation animation ends.
|
|
38
|
+
* Useful for side effects that should run after the tab change animation.
|
|
39
|
+
*
|
|
40
|
+
* Unlike `onIndexChange`, this is called regardless of whether the index changed or not.
|
|
41
|
+
*/
|
|
27
42
|
onTabSelect?: (props: { index: number }) => void;
|
|
43
|
+
/**
|
|
44
|
+
* State for the tab view containing the current index and routes.
|
|
45
|
+
*
|
|
46
|
+
* Example:
|
|
47
|
+
* ```js
|
|
48
|
+
* {
|
|
49
|
+
* index: 0,
|
|
50
|
+
* routes: [
|
|
51
|
+
* { key: 'first' },
|
|
52
|
+
* { key: 'second' },
|
|
53
|
+
* ],
|
|
54
|
+
* }
|
|
55
|
+
* ```
|
|
56
|
+
*/
|
|
28
57
|
navigationState: NavigationState<T>;
|
|
58
|
+
/**
|
|
59
|
+
* Callback which returns a custom placeholder element.
|
|
60
|
+
* The placeholder is shown when a scene is not yet loaded when `lazy` is enabled.
|
|
61
|
+
*/
|
|
29
62
|
renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
|
|
63
|
+
/**
|
|
64
|
+
* Callback which returns a custom tab bar element to display.
|
|
65
|
+
*/
|
|
30
66
|
renderTabBar?: (
|
|
31
67
|
props: SceneRendererProps &
|
|
32
68
|
EventEmitterProps & {
|
|
@@ -34,15 +70,73 @@ export type Props<T extends Route> = AdapterCommonProps & {
|
|
|
34
70
|
options: Record<string, TabDescriptor<T>> | undefined;
|
|
35
71
|
}
|
|
36
72
|
) => React.ReactNode;
|
|
73
|
+
/**
|
|
74
|
+
* Callback which returns a custom adapter to use for the tab view.
|
|
75
|
+
* Adapters are responsible for handling gestures and animations between tabs.
|
|
76
|
+
*
|
|
77
|
+
* The following adapters are provided out of the box:
|
|
78
|
+
* - `PagerViewAdapter`: Uses `react-native-pager-view` for native experience.
|
|
79
|
+
* - `PanResponderAdapter`: Uses `PanResponder` for a JS-based implementation.
|
|
80
|
+
* - `ScrollViewAdapter`: Uses `ScrollView` for an implementation based on `ScrollView`.
|
|
81
|
+
*
|
|
82
|
+
* Defaults to `PagerViewAdapter` on Android and iOS, and `PanResponderAdapter` on other platforms.
|
|
83
|
+
*/
|
|
37
84
|
renderAdapter?: (props: AdapterProps) => React.ReactElement;
|
|
85
|
+
/**
|
|
86
|
+
* Position of the tab bar in the tab view.
|
|
87
|
+
* Defaults to `'top'`.
|
|
88
|
+
*/
|
|
38
89
|
tabBarPosition?: 'top' | 'bottom';
|
|
90
|
+
/**
|
|
91
|
+
* Whether to lazily render the scenes.
|
|
92
|
+
* When enabled, scenes are rendered only when they come into view.
|
|
93
|
+
*
|
|
94
|
+
* Can be a boolean or a function that receives the route and returns a boolean.
|
|
95
|
+
* Defaults to `false`.
|
|
96
|
+
*/
|
|
39
97
|
lazy?: ((props: { route: T }) => boolean) | boolean;
|
|
98
|
+
/**
|
|
99
|
+
* How many screens to preload when `lazy` is enabled.
|
|
100
|
+
*
|
|
101
|
+
* Defaults to `0`.
|
|
102
|
+
*/
|
|
40
103
|
lazyPreloadDistance?: number;
|
|
104
|
+
/**
|
|
105
|
+
* The layout direction of the tab view.
|
|
106
|
+
*
|
|
107
|
+
* Defaults to the app's locale direction (RTL or LTR).
|
|
108
|
+
*/
|
|
41
109
|
direction?: LocaleDirection;
|
|
110
|
+
/**
|
|
111
|
+
* Style to apply to the pager container.
|
|
112
|
+
*/
|
|
42
113
|
pagerStyle?: StyleProp<ViewStyle>;
|
|
114
|
+
/**
|
|
115
|
+
* Style to apply to the tab view container.
|
|
116
|
+
*/
|
|
43
117
|
style?: StyleProp<ViewStyle>;
|
|
118
|
+
/**
|
|
119
|
+
* Callback which returns a React element to render for each route.
|
|
120
|
+
*/
|
|
44
121
|
renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;
|
|
122
|
+
/**
|
|
123
|
+
* Options for individual tabs, keyed by route key.
|
|
124
|
+
*
|
|
125
|
+
* Example:
|
|
126
|
+
* ```js
|
|
127
|
+
* {
|
|
128
|
+
* first: { labelText: 'First Tab' },
|
|
129
|
+
* second: { labelText: 'Second Tab' },
|
|
130
|
+
* }
|
|
131
|
+
*
|
|
132
|
+
* These options are merged with `commonOptions`.
|
|
133
|
+
*/
|
|
45
134
|
options?: Record<string, TabDescriptor<T>>;
|
|
135
|
+
/**
|
|
136
|
+
* Options that apply to all tabs.
|
|
137
|
+
*
|
|
138
|
+
* Individual tab options from `options` will override these.
|
|
139
|
+
*/
|
|
46
140
|
commonOptions?: TabDescriptor<T>;
|
|
47
141
|
};
|
|
48
142
|
|