react-native-tab-view 3.2.1 → 3.3.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.
Files changed (66) hide show
  1. package/{LICENSE.md → LICENSE} +0 -0
  2. package/README.md +5 -36
  3. package/lib/commonjs/PagerViewAdapter.js +2 -1
  4. package/lib/commonjs/PagerViewAdapter.js.map +1 -1
  5. package/lib/commonjs/PanResponderAdapter.js +2 -1
  6. package/lib/commonjs/PanResponderAdapter.js.map +1 -1
  7. package/lib/commonjs/SceneMap.js +9 -12
  8. package/lib/commonjs/SceneMap.js.map +1 -1
  9. package/lib/commonjs/SceneView.js +54 -101
  10. package/lib/commonjs/SceneView.js.map +1 -1
  11. package/lib/commonjs/TabBar.js +358 -325
  12. package/lib/commonjs/TabBar.js.map +1 -1
  13. package/lib/commonjs/TabBarIndicator.js +81 -99
  14. package/lib/commonjs/TabBarIndicator.js.map +1 -1
  15. package/lib/commonjs/TabBarItem.js +184 -161
  16. package/lib/commonjs/TabBarItem.js.map +1 -1
  17. package/lib/commonjs/TabView.js +2 -2
  18. package/lib/commonjs/TabView.js.map +1 -1
  19. package/lib/commonjs/index.js +3 -3
  20. package/lib/commonjs/index.js.map +1 -1
  21. package/lib/module/PagerViewAdapter.js +2 -1
  22. package/lib/module/PagerViewAdapter.js.map +1 -1
  23. package/lib/module/PanResponderAdapter.js +3 -2
  24. package/lib/module/PanResponderAdapter.js.map +1 -1
  25. package/lib/module/SceneMap.js +9 -14
  26. package/lib/module/SceneMap.js.map +1 -1
  27. package/lib/module/SceneView.js +54 -99
  28. package/lib/module/SceneView.js.map +1 -1
  29. package/lib/module/TabBar.js +355 -324
  30. package/lib/module/TabBar.js.map +1 -1
  31. package/lib/module/TabBarIndicator.js +75 -93
  32. package/lib/module/TabBarIndicator.js.map +1 -1
  33. package/lib/module/TabBarItem.js +178 -154
  34. package/lib/module/TabBarItem.js.map +1 -1
  35. package/lib/module/TabView.js +2 -2
  36. package/lib/module/TabView.js.map +1 -1
  37. package/lib/module/index.js +2 -2
  38. package/lib/module/index.js.map +1 -1
  39. package/lib/typescript/{Pager.android.d.ts → src/Pager.android.d.ts} +0 -0
  40. package/lib/typescript/{Pager.d.ts → src/Pager.d.ts} +0 -0
  41. package/lib/typescript/{Pager.ios.d.ts → src/Pager.ios.d.ts} +0 -0
  42. package/lib/typescript/{PagerViewAdapter.d.ts → src/PagerViewAdapter.d.ts} +1 -1
  43. package/lib/typescript/{PanResponderAdapter.d.ts → src/PanResponderAdapter.d.ts} +1 -1
  44. package/lib/typescript/{PlatformPressable.d.ts → src/PlatformPressable.d.ts} +0 -0
  45. package/lib/typescript/{SceneMap.d.ts → src/SceneMap.d.ts} +5 -3
  46. package/lib/typescript/src/SceneView.d.ts +15 -0
  47. package/lib/typescript/src/TabBar.d.ts +42 -0
  48. package/lib/typescript/src/TabBarIndicator.d.ts +12 -0
  49. package/lib/typescript/{TabBarItem.d.ts → src/TabBarItem.d.ts} +5 -7
  50. package/lib/typescript/{TabView.d.ts → src/TabView.d.ts} +1 -1
  51. package/lib/typescript/{index.d.ts → src/index.d.ts} +7 -7
  52. package/lib/typescript/{types.d.ts → src/types.d.ts} +0 -0
  53. package/lib/typescript/{useAnimatedValue.d.ts → src/useAnimatedValue.d.ts} +0 -0
  54. package/package.json +28 -58
  55. package/src/PagerViewAdapter.tsx +11 -5
  56. package/src/PanResponderAdapter.tsx +16 -12
  57. package/src/SceneMap.tsx +12 -7
  58. package/src/SceneView.tsx +73 -108
  59. package/src/TabBar.tsx +506 -401
  60. package/src/TabBarIndicator.tsx +114 -117
  61. package/src/TabBarItem.tsx +230 -200
  62. package/src/TabView.tsx +6 -5
  63. package/src/index.tsx +7 -12
  64. package/lib/typescript/SceneView.d.ts +0 -32
  65. package/lib/typescript/TabBar.d.ts +0 -72
  66. package/lib/typescript/TabBarIndicator.d.ts +0 -20
@@ -9,6 +9,8 @@ var React = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _reactNative = require("react-native");
11
11
 
12
+ var _useLatestCallback = _interopRequireDefault(require("use-latest-callback"));
13
+
12
14
  var _PlatformPressable = _interopRequireDefault(require("./PlatformPressable"));
13
15
 
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,188 +19,209 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
17
19
 
18
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
21
 
20
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
22
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
21
23
 
22
24
  const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
23
25
  const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
24
26
 
25
- class TabBarItem extends React.Component {
26
- constructor() {
27
- super(...arguments);
28
-
29
- _defineProperty(this, "getActiveOpacity", (position, routes, tabIndex) => {
30
- if (routes.length > 1) {
31
- const inputRange = routes.map((_, i) => i);
32
- return position.interpolate({
33
- inputRange,
34
- outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
35
- });
36
- } else {
37
- return 1;
38
- }
27
+ const getActiveOpacity = (position, routesLength, tabIndex) => {
28
+ if (routesLength > 1) {
29
+ const inputRange = Array.from({
30
+ length: routesLength
31
+ }, (_, i) => i);
32
+ return position.interpolate({
33
+ inputRange,
34
+ outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
39
35
  });
40
-
41
- _defineProperty(this, "getInactiveOpacity", (position, routes, tabIndex) => {
42
- if (routes.length > 1) {
43
- const inputRange = routes.map((_, i) => i);
44
- return position.interpolate({
45
- inputRange,
46
- outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
47
- });
48
- } else {
49
- return 0;
50
- }
36
+ } else {
37
+ return 1;
38
+ }
39
+ };
40
+
41
+ const getInactiveOpacity = (position, routesLength, tabIndex) => {
42
+ if (routesLength > 1) {
43
+ const inputRange = Array.from({
44
+ length: routesLength
45
+ }, (_, i) => i);
46
+ return position.interpolate({
47
+ inputRange,
48
+ outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
51
49
  });
50
+ } else {
51
+ return 0;
52
52
  }
53
-
54
- render() {
55
- const {
53
+ };
54
+
55
+ const TabBarItemInternal = _ref => {
56
+ let {
57
+ getAccessibilityLabel,
58
+ getAccessible,
59
+ getLabelText,
60
+ getTestID,
61
+ onLongPress,
62
+ onPress,
63
+ isFocused,
64
+ position,
65
+ route,
66
+ style,
67
+ inactiveColor: inactiveColorCustom,
68
+ activeColor: activeColorCustom,
69
+ labelStyle,
70
+ onLayout,
71
+ index: tabIndex,
72
+ pressColor,
73
+ pressOpacity,
74
+ renderBadge,
75
+ renderIcon,
76
+ defaultTabWidth,
77
+ routesLength,
78
+ renderLabel: renderLabelCustom
79
+ } = _ref;
80
+
81
+ const labelColorFromStyle = _reactNative.StyleSheet.flatten(labelStyle || {}).color;
82
+
83
+ const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
84
+ const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
85
+ const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
86
+ const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
87
+ let icon = null;
88
+ let label = null;
89
+
90
+ if (renderIcon) {
91
+ const activeIcon = renderIcon({
56
92
  route,
57
- position,
58
- navigationState,
59
- renderLabel: renderLabelCustom,
60
- renderIcon,
61
- renderBadge,
62
- getLabelText,
63
- getTestID,
64
- getAccessibilityLabel,
65
- getAccessible,
66
- activeColor: activeColorCustom,
67
- inactiveColor: inactiveColorCustom,
68
- pressColor,
69
- pressOpacity,
70
- labelStyle,
71
- style,
72
- onLayout,
73
- onPress,
74
- onLongPress
75
- } = this.props;
76
- const tabIndex = navigationState.routes.indexOf(route);
77
- const isFocused = navigationState.index === tabIndex;
78
-
79
- const labelColorFromStyle = _reactNative.StyleSheet.flatten(labelStyle || {}).color;
80
-
81
- const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
82
- const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
83
- const activeOpacity = this.getActiveOpacity(position, navigationState.routes, tabIndex);
84
- const inactiveOpacity = this.getInactiveOpacity(position, navigationState.routes, tabIndex);
85
- let icon = null;
86
- let label = null;
87
-
88
- if (renderIcon) {
89
- const activeIcon = renderIcon({
90
- route,
91
- focused: true,
92
- color: activeColor
93
- });
94
- const inactiveIcon = renderIcon({
95
- route,
96
- focused: false,
97
- color: inactiveColor
98
- });
99
-
100
- if (inactiveIcon != null && activeIcon != null) {
101
- icon = /*#__PURE__*/React.createElement(_reactNative.View, {
102
- style: styles.icon
103
- }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
104
- style: {
105
- opacity: inactiveOpacity
106
- }
107
- }, inactiveIcon), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
108
- style: [_reactNative.StyleSheet.absoluteFill, {
109
- opacity: activeOpacity
110
- }]
111
- }, activeIcon));
112
- }
113
- }
114
-
115
- const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : _ref => {
116
- let {
117
- route,
118
- color
119
- } = _ref;
120
- const labelText = getLabelText({
121
- route
122
- });
123
-
124
- if (typeof labelText === 'string') {
125
- return /*#__PURE__*/React.createElement(_reactNative.Animated.Text, {
126
- style: [styles.label, icon ? {
127
- marginTop: 0
128
- } : null, labelStyle, {
129
- color
130
- }]
131
- }, labelText);
132
- }
93
+ focused: true,
94
+ color: activeColor
95
+ });
96
+ const inactiveIcon = renderIcon({
97
+ route,
98
+ focused: false,
99
+ color: inactiveColor
100
+ });
133
101
 
134
- return labelText;
135
- };
136
-
137
- if (renderLabel) {
138
- const activeLabel = renderLabel({
139
- route,
140
- focused: true,
141
- color: activeColor
142
- });
143
- const inactiveLabel = renderLabel({
144
- route,
145
- focused: false,
146
- color: inactiveColor
147
- });
148
- label = /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
102
+ if (inactiveIcon != null && activeIcon != null) {
103
+ icon = /*#__PURE__*/React.createElement(_reactNative.View, {
104
+ style: styles.icon
105
+ }, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
149
106
  style: {
150
107
  opacity: inactiveOpacity
151
108
  }
152
- }, inactiveLabel), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
109
+ }, inactiveIcon), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
153
110
  style: [_reactNative.StyleSheet.absoluteFill, {
154
111
  opacity: activeOpacity
155
112
  }]
156
- }, activeLabel));
113
+ }, activeIcon));
114
+ }
115
+ }
116
+
117
+ const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : labelProps => {
118
+ const labelText = getLabelText({
119
+ route: labelProps.route
120
+ });
121
+
122
+ if (typeof labelText === 'string') {
123
+ return /*#__PURE__*/React.createElement(_reactNative.Animated.Text, {
124
+ style: [styles.label, icon ? {
125
+ marginTop: 0
126
+ } : null, labelStyle, {
127
+ color: labelProps.color
128
+ }]
129
+ }, labelText);
157
130
  }
158
131
 
159
- const tabStyle = _reactNative.StyleSheet.flatten(style);
160
-
161
- const isWidthSet = (tabStyle === null || tabStyle === void 0 ? void 0 : tabStyle.width) !== undefined;
162
- const tabContainerStyle = isWidthSet ? null : {
163
- flex: 1
164
- };
165
- const scene = {
166
- route
167
- };
168
- let accessibilityLabel = getAccessibilityLabel(scene);
169
- accessibilityLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : getLabelText(scene);
170
- const badge = renderBadge ? renderBadge(scene) : null;
171
- return /*#__PURE__*/React.createElement(_PlatformPressable.default, {
172
- android_ripple: {
173
- borderless: true
174
- },
175
- testID: getTestID(scene),
176
- accessible: getAccessible(scene),
177
- accessibilityLabel: accessibilityLabel,
178
- accessibilityRole: "tab",
179
- accessibilityState: {
180
- selected: isFocused
181
- } // @ts-ignore: this is to support older React Native versions
182
- ,
183
- accessibilityStates: isFocused ? ['selected'] : [],
184
- pressColor: pressColor,
185
- pressOpacity: pressOpacity,
186
- delayPressIn: 0,
187
- onLayout: onLayout,
188
- onPress: onPress,
189
- onLongPress: onLongPress,
190
- style: [styles.pressable, tabContainerStyle]
191
- }, /*#__PURE__*/React.createElement(_reactNative.View, {
192
- pointerEvents: "none",
193
- style: [styles.item, tabStyle]
194
- }, icon, label, badge != null ? /*#__PURE__*/React.createElement(_reactNative.View, {
195
- style: styles.badge
196
- }, badge) : null));
132
+ return labelText;
133
+ };
134
+
135
+ if (renderLabel) {
136
+ const activeLabel = renderLabel({
137
+ route,
138
+ focused: true,
139
+ color: activeColor
140
+ });
141
+ const inactiveLabel = renderLabel({
142
+ route,
143
+ focused: false,
144
+ color: inactiveColor
145
+ });
146
+ label = /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
147
+ style: {
148
+ opacity: inactiveOpacity
149
+ }
150
+ }, inactiveLabel), /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
151
+ style: [_reactNative.StyleSheet.absoluteFill, {
152
+ opacity: activeOpacity
153
+ }]
154
+ }, activeLabel));
197
155
  }
198
156
 
157
+ const tabStyle = _reactNative.StyleSheet.flatten(style);
158
+
159
+ const isWidthSet = (tabStyle === null || tabStyle === void 0 ? void 0 : tabStyle.width) !== undefined;
160
+ const tabContainerStyle = isWidthSet ? null : {
161
+ width: defaultTabWidth
162
+ };
163
+ const scene = {
164
+ route
165
+ };
166
+ let accessibilityLabel = getAccessibilityLabel(scene);
167
+ accessibilityLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : getLabelText(scene);
168
+ const badge = renderBadge ? renderBadge(scene) : null;
169
+ return /*#__PURE__*/React.createElement(_PlatformPressable.default, {
170
+ android_ripple: {
171
+ borderless: true
172
+ },
173
+ testID: getTestID(scene),
174
+ accessible: getAccessible(scene),
175
+ accessibilityLabel: accessibilityLabel,
176
+ accessibilityRole: "tab",
177
+ accessibilityState: {
178
+ selected: isFocused
179
+ } // @ts-ignore: this is to support older React Native versions
180
+ ,
181
+ accessibilityStates: isFocused ? ['selected'] : [],
182
+ pressColor: pressColor,
183
+ pressOpacity: pressOpacity,
184
+ delayPressIn: 0,
185
+ onLayout: onLayout,
186
+ onPress: onPress,
187
+ onLongPress: onLongPress,
188
+ style: [styles.pressable, tabContainerStyle]
189
+ }, /*#__PURE__*/React.createElement(_reactNative.View, {
190
+ pointerEvents: "none",
191
+ style: [styles.item, tabStyle]
192
+ }, icon, label, badge != null ? /*#__PURE__*/React.createElement(_reactNative.View, {
193
+ style: styles.badge
194
+ }, badge) : null));
195
+ };
196
+
197
+ const MemoizedTabBarItemInternal = /*#__PURE__*/React.memo(TabBarItemInternal);
198
+
199
+ function TabBarItem(props) {
200
+ const {
201
+ onPress,
202
+ onLongPress,
203
+ onLayout,
204
+ navigationState,
205
+ route,
206
+ ...rest
207
+ } = props;
208
+ const onPressLatest = (0, _useLatestCallback.default)(onPress);
209
+ const onLongPressLatest = (0, _useLatestCallback.default)(onLongPress);
210
+ const onLayoutLatest = (0, _useLatestCallback.default)(onLayout ? onLayout : () => {});
211
+ const tabIndex = navigationState.routes.indexOf(route);
212
+ return /*#__PURE__*/React.createElement(MemoizedTabBarItemInternal, _extends({}, rest, {
213
+ onPress: onPressLatest,
214
+ onLayout: onLayoutLatest,
215
+ onLongPress: onLongPressLatest,
216
+ isFocused: navigationState.index === tabIndex,
217
+ route: route,
218
+ index: tabIndex,
219
+ routesLength: navigationState.routes.length
220
+ }));
199
221
  }
200
222
 
201
- exports.default = TabBarItem;
223
+ var _default = TabBarItem;
224
+ exports.default = _default;
202
225
 
203
226
  const styles = _reactNative.StyleSheet.create({
204
227
  label: {
@@ -1 +1 @@
1
- {"version":3,"names":["DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","TabBarItem","React","Component","position","routes","tabIndex","length","inputRange","map","_","i","interpolate","outputRange","render","route","navigationState","renderLabel","renderLabelCustom","renderIcon","renderBadge","getLabelText","getTestID","getAccessibilityLabel","getAccessible","activeColor","activeColorCustom","inactiveColor","inactiveColorCustom","pressColor","pressOpacity","labelStyle","style","onLayout","onPress","onLongPress","props","indexOf","isFocused","index","labelColorFromStyle","StyleSheet","flatten","color","undefined","activeOpacity","getActiveOpacity","inactiveOpacity","getInactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","flex","scene","accessibilityLabel","badge","borderless","selected","pressable","item","create","margin","backgroundColor","textTransform","alignItems","justifyContent","padding","minHeight","top","right"],"sources":["TabBarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n StyleSheet,\n View,\n StyleProp,\n LayoutChangeEvent,\n TextStyle,\n ViewStyle,\n} from 'react-native';\nimport PlatformPressable from './PlatformPressable';\nimport type { Scene, Route, NavigationState } from './types';\n\nexport type Props<T extends Route> = {\n position: Animated.AnimatedInterpolation;\n route: T;\n navigationState: NavigationState<T>;\n activeColor?: string;\n inactiveColor?: string;\n pressColor?: string;\n pressOpacity?: number;\n getLabelText: (scene: Scene<T>) => string | undefined;\n getAccessible: (scene: Scene<T>) => boolean | undefined;\n getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n getTestID: (scene: Scene<T>) => string | undefined;\n renderLabel?: (scene: {\n route: T;\n focused: boolean;\n color: string;\n }) => React.ReactNode;\n renderIcon?: (scene: {\n route: T;\n focused: boolean;\n color: string;\n }) => React.ReactNode;\n renderBadge?: (scene: Scene<T>) => React.ReactNode;\n onLayout?: (event: LayoutChangeEvent) => void;\n onPress: () => void;\n onLongPress: () => void;\n labelStyle?: StyleProp<TextStyle>;\n style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nexport default class TabBarItem<T extends Route> extends React.Component<\n Props<T>\n> {\n private getActiveOpacity = (\n position: Animated.AnimatedInterpolation,\n routes: Route[],\n tabIndex: number\n ) => {\n if (routes.length > 1) {\n const inputRange = routes.map((_, i) => i);\n\n return position.interpolate({\n inputRange,\n outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n });\n } else {\n return 1;\n }\n };\n\n private getInactiveOpacity = (\n position: Animated.AnimatedInterpolation,\n routes: Route[],\n tabIndex: number\n ) => {\n if (routes.length > 1) {\n const inputRange = routes.map((_: Route, i: number) => i);\n\n return position.interpolate({\n inputRange,\n outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n });\n } else {\n return 0;\n }\n };\n\n render() {\n const {\n route,\n position,\n navigationState,\n renderLabel: renderLabelCustom,\n renderIcon,\n renderBadge,\n getLabelText,\n getTestID,\n getAccessibilityLabel,\n getAccessible,\n activeColor: activeColorCustom,\n inactiveColor: inactiveColorCustom,\n pressColor,\n pressOpacity,\n labelStyle,\n style,\n onLayout,\n onPress,\n onLongPress,\n } = this.props;\n\n const tabIndex = navigationState.routes.indexOf(route);\n const isFocused = navigationState.index === tabIndex;\n\n const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n const activeColor =\n activeColorCustom !== undefined\n ? activeColorCustom\n : typeof labelColorFromStyle === 'string'\n ? labelColorFromStyle\n : DEFAULT_ACTIVE_COLOR;\n const inactiveColor =\n inactiveColorCustom !== undefined\n ? inactiveColorCustom\n : typeof labelColorFromStyle === 'string'\n ? labelColorFromStyle\n : DEFAULT_INACTIVE_COLOR;\n\n const activeOpacity = this.getActiveOpacity(\n position,\n navigationState.routes,\n tabIndex\n );\n const inactiveOpacity = this.getInactiveOpacity(\n position,\n navigationState.routes,\n tabIndex\n );\n\n let icon: React.ReactNode | null = null;\n let label: React.ReactNode | null = null;\n\n if (renderIcon) {\n const activeIcon = renderIcon({\n route,\n focused: true,\n color: activeColor,\n });\n const inactiveIcon = renderIcon({\n route,\n focused: false,\n color: inactiveColor,\n });\n\n if (inactiveIcon != null && activeIcon != null) {\n icon = (\n <View style={styles.icon}>\n <Animated.View style={{ opacity: inactiveOpacity }}>\n {inactiveIcon}\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n >\n {activeIcon}\n </Animated.View>\n </View>\n );\n }\n }\n\n const renderLabel =\n renderLabelCustom !== undefined\n ? renderLabelCustom\n : ({ route, color }: { route: T; color: string }) => {\n const labelText = getLabelText({ route });\n\n if (typeof labelText === 'string') {\n return (\n <Animated.Text\n style={[\n styles.label,\n icon ? { marginTop: 0 } : null,\n labelStyle,\n { color },\n ]}\n >\n {labelText}\n </Animated.Text>\n );\n }\n\n return labelText;\n };\n\n if (renderLabel) {\n const activeLabel = renderLabel({\n route,\n focused: true,\n color: activeColor,\n });\n const inactiveLabel = renderLabel({\n route,\n focused: false,\n color: inactiveColor,\n });\n\n label = (\n <View>\n <Animated.View style={{ opacity: inactiveOpacity }}>\n {inactiveLabel}\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n >\n {activeLabel}\n </Animated.View>\n </View>\n );\n }\n\n const tabStyle = StyleSheet.flatten(style);\n const isWidthSet = tabStyle?.width !== undefined;\n const tabContainerStyle: ViewStyle | null = isWidthSet ? null : { flex: 1 };\n\n const scene = { route };\n\n let accessibilityLabel = getAccessibilityLabel(scene);\n\n accessibilityLabel =\n typeof accessibilityLabel !== 'undefined'\n ? accessibilityLabel\n : getLabelText(scene);\n\n const badge = renderBadge ? renderBadge(scene) : null;\n\n return (\n <PlatformPressable\n android_ripple={{ borderless: true }}\n testID={getTestID(scene)}\n accessible={getAccessible(scene)}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"tab\"\n accessibilityState={{ selected: isFocused }}\n // @ts-ignore: this is to support older React Native versions\n accessibilityStates={isFocused ? ['selected'] : []}\n pressColor={pressColor}\n pressOpacity={pressOpacity}\n delayPressIn={0}\n onLayout={onLayout}\n onPress={onPress}\n onLongPress={onLongPress}\n style={[styles.pressable, tabContainerStyle]}\n >\n <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n {icon}\n {label}\n {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n </View>\n </PlatformPressable>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n label: {\n margin: 4,\n backgroundColor: 'transparent',\n textTransform: 'uppercase',\n },\n icon: {\n margin: 2,\n },\n item: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n padding: 10,\n minHeight: 48,\n },\n badge: {\n position: 'absolute',\n top: 0,\n right: 0,\n },\n pressable: {\n // The label is not pressable on Windows\n // Adding backgroundColor: 'transparent' seems to fix it\n backgroundColor: 'transparent',\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"names":["DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","getActiveOpacity","position","routesLength","tabIndex","inputRange","Array","from","length","_","i","interpolate","outputRange","map","getInactiveOpacity","TabBarItemInternal","getAccessibilityLabel","getAccessible","getLabelText","getTestID","onLongPress","onPress","isFocused","route","style","inactiveColor","inactiveColorCustom","activeColor","activeColorCustom","labelStyle","onLayout","index","pressColor","pressOpacity","renderBadge","renderIcon","defaultTabWidth","renderLabel","renderLabelCustom","labelColorFromStyle","StyleSheet","flatten","color","undefined","activeOpacity","inactiveOpacity","icon","label","activeIcon","focused","inactiveIcon","styles","opacity","absoluteFill","labelProps","labelText","marginTop","activeLabel","inactiveLabel","tabStyle","isWidthSet","width","tabContainerStyle","scene","accessibilityLabel","badge","borderless","selected","pressable","item","MemoizedTabBarItemInternal","React","memo","TabBarItem","props","navigationState","rest","onPressLatest","useLatestCallback","onLongPressLatest","onLayoutLatest","routes","indexOf","create","margin","backgroundColor","textTransform","flex","alignItems","justifyContent","padding","minHeight","top","right"],"sources":["TabBarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n LayoutChangeEvent,\n StyleProp,\n StyleSheet,\n TextStyle,\n View,\n ViewStyle,\n} from 'react-native';\nimport useLatestCallback from 'use-latest-callback';\n\nimport PlatformPressable from './PlatformPressable';\nimport type { NavigationState, Route, Scene } from './types';\n\nexport type Props<T extends Route> = {\n position: Animated.AnimatedInterpolation;\n route: T;\n navigationState: NavigationState<T>;\n activeColor?: string;\n inactiveColor?: string;\n pressColor?: string;\n pressOpacity?: number;\n getLabelText: (scene: Scene<T>) => string | undefined;\n getAccessible: (scene: Scene<T>) => boolean | undefined;\n getAccessibilityLabel: (scene: Scene<T>) => string | undefined;\n getTestID: (scene: Scene<T>) => string | undefined;\n renderLabel?: (scene: {\n route: T;\n focused: boolean;\n color: string;\n }) => React.ReactNode;\n renderIcon?: (scene: {\n route: T;\n focused: boolean;\n color: string;\n }) => React.ReactNode;\n renderBadge?: (scene: Scene<T>) => React.ReactNode;\n onLayout?: (event: LayoutChangeEvent) => void;\n onPress: () => void;\n onLongPress: () => void;\n defaultTabWidth?: number;\n labelStyle?: StyleProp<TextStyle>;\n style: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';\nconst DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';\n\nconst getActiveOpacity = (\n position: Animated.AnimatedInterpolation,\n routesLength: number,\n tabIndex: number\n) => {\n if (routesLength > 1) {\n const inputRange = Array.from({ length: routesLength }, (_, i) => i);\n\n return position.interpolate({\n inputRange,\n outputRange: inputRange.map((i) => (i === tabIndex ? 1 : 0)),\n });\n } else {\n return 1;\n }\n};\n\nconst getInactiveOpacity = (\n position: Animated.AnimatedInterpolation,\n routesLength: number,\n tabIndex: number\n) => {\n if (routesLength > 1) {\n const inputRange = Array.from({ length: routesLength }, (_, i) => i);\n\n return position.interpolate({\n inputRange,\n outputRange: inputRange.map((i: number) => (i === tabIndex ? 0 : 1)),\n });\n } else {\n return 0;\n }\n};\n\ntype TabBarItemInternalProps<T extends Route> = Omit<\n Props<T>,\n 'navigationState'\n> & {\n isFocused: boolean;\n index: number;\n routesLength: number;\n};\n\nconst TabBarItemInternal = <T extends Route>({\n getAccessibilityLabel,\n getAccessible,\n getLabelText,\n getTestID,\n onLongPress,\n onPress,\n isFocused,\n position,\n route,\n style,\n inactiveColor: inactiveColorCustom,\n activeColor: activeColorCustom,\n labelStyle,\n onLayout,\n index: tabIndex,\n pressColor,\n pressOpacity,\n renderBadge,\n renderIcon,\n defaultTabWidth,\n routesLength,\n renderLabel: renderLabelCustom,\n}: TabBarItemInternalProps<T>) => {\n const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;\n\n const activeColor =\n activeColorCustom !== undefined\n ? activeColorCustom\n : typeof labelColorFromStyle === 'string'\n ? labelColorFromStyle\n : DEFAULT_ACTIVE_COLOR;\n const inactiveColor =\n inactiveColorCustom !== undefined\n ? inactiveColorCustom\n : typeof labelColorFromStyle === 'string'\n ? labelColorFromStyle\n : DEFAULT_INACTIVE_COLOR;\n\n const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);\n const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);\n\n let icon: React.ReactNode | null = null;\n let label: React.ReactNode | null = null;\n\n if (renderIcon) {\n const activeIcon = renderIcon({\n route,\n focused: true,\n color: activeColor,\n });\n const inactiveIcon = renderIcon({\n route,\n focused: false,\n color: inactiveColor,\n });\n\n if (inactiveIcon != null && activeIcon != null) {\n icon = (\n <View style={styles.icon}>\n <Animated.View style={{ opacity: inactiveOpacity }}>\n {inactiveIcon}\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n >\n {activeIcon}\n </Animated.View>\n </View>\n );\n }\n }\n\n const renderLabel =\n renderLabelCustom !== undefined\n ? renderLabelCustom\n : (labelProps: { route: T; color: string }) => {\n const labelText = getLabelText({ route: labelProps.route });\n\n if (typeof labelText === 'string') {\n return (\n <Animated.Text\n style={[\n styles.label,\n icon ? { marginTop: 0 } : null,\n labelStyle,\n { color: labelProps.color },\n ]}\n >\n {labelText}\n </Animated.Text>\n );\n }\n\n return labelText;\n };\n\n if (renderLabel) {\n const activeLabel = renderLabel({\n route,\n focused: true,\n color: activeColor,\n });\n const inactiveLabel = renderLabel({\n route,\n focused: false,\n color: inactiveColor,\n });\n\n label = (\n <View>\n <Animated.View style={{ opacity: inactiveOpacity }}>\n {inactiveLabel}\n </Animated.View>\n <Animated.View\n style={[StyleSheet.absoluteFill, { opacity: activeOpacity }]}\n >\n {activeLabel}\n </Animated.View>\n </View>\n );\n }\n\n const tabStyle = StyleSheet.flatten(style);\n const isWidthSet = tabStyle?.width !== undefined;\n\n const tabContainerStyle: ViewStyle | null = isWidthSet\n ? null\n : { width: defaultTabWidth };\n\n const scene = { route };\n\n let accessibilityLabel = getAccessibilityLabel(scene);\n\n accessibilityLabel =\n typeof accessibilityLabel !== 'undefined'\n ? accessibilityLabel\n : getLabelText(scene);\n\n const badge = renderBadge ? renderBadge(scene) : null;\n\n return (\n <PlatformPressable\n android_ripple={{ borderless: true }}\n testID={getTestID(scene)}\n accessible={getAccessible(scene)}\n accessibilityLabel={accessibilityLabel}\n accessibilityRole=\"tab\"\n accessibilityState={{ selected: isFocused }}\n // @ts-ignore: this is to support older React Native versions\n accessibilityStates={isFocused ? ['selected'] : []}\n pressColor={pressColor}\n pressOpacity={pressOpacity}\n delayPressIn={0}\n onLayout={onLayout}\n onPress={onPress}\n onLongPress={onLongPress}\n style={[styles.pressable, tabContainerStyle]}\n >\n <View pointerEvents=\"none\" style={[styles.item, tabStyle]}>\n {icon}\n {label}\n {badge != null ? <View style={styles.badge}>{badge}</View> : null}\n </View>\n </PlatformPressable>\n );\n};\n\nconst MemoizedTabBarItemInternal = React.memo(\n TabBarItemInternal\n) as typeof TabBarItemInternal;\n\nfunction TabBarItem<T extends Route>(props: Props<T>) {\n const { onPress, onLongPress, onLayout, navigationState, route, ...rest } =\n props;\n const onPressLatest = useLatestCallback(onPress);\n const onLongPressLatest = useLatestCallback(onLongPress);\n const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});\n\n const tabIndex = navigationState.routes.indexOf(route);\n\n return (\n <MemoizedTabBarItemInternal\n {...rest}\n onPress={onPressLatest}\n onLayout={onLayoutLatest}\n onLongPress={onLongPressLatest}\n isFocused={navigationState.index === tabIndex}\n route={route}\n index={tabIndex}\n routesLength={navigationState.routes.length}\n />\n );\n}\n\nexport default TabBarItem;\n\nconst styles = StyleSheet.create({\n label: {\n margin: 4,\n backgroundColor: 'transparent',\n textTransform: 'uppercase',\n },\n icon: {\n margin: 2,\n },\n item: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n padding: 10,\n minHeight: 48,\n },\n badge: {\n position: 'absolute',\n top: 0,\n right: 0,\n },\n pressable: {\n // The label is not pressable on Windows\n // Adding backgroundColor: 'transparent' seems to fix it\n backgroundColor: 'transparent',\n },\n});\n"],"mappings":"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"}
@@ -9,11 +9,11 @@ var React = _interopRequireWildcard(require("react"));
9
9
 
10
10
  var _reactNative = require("react-native");
11
11
 
12
- var _TabBar = _interopRequireDefault(require("./TabBar"));
12
+ var _Pager = _interopRequireDefault(require("./Pager"));
13
13
 
14
14
  var _SceneView = _interopRequireDefault(require("./SceneView"));
15
15
 
16
- var _Pager = _interopRequireDefault(require("./Pager"));
16
+ var _TabBar = _interopRequireDefault(require("./TabBar"));
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
@@ -1 +1 @@
1
- {"version":3,"names":["TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","pagerStyle","style","swipeEnabled","tabBarPosition","animationEnabled","layout","setLayout","React","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","StyleSheet","create","flex","overflow"],"sources":["TabView.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n StyleSheet,\n View,\n StyleProp,\n ViewStyle,\n LayoutChangeEvent,\n} from 'react-native';\nimport TabBar from './TabBar';\nimport SceneView from './SceneView';\nimport Pager from './Pager';\nimport type {\n Layout,\n NavigationState,\n Route,\n SceneRendererProps,\n PagerProps,\n} from './types';\n\nexport type Props<T extends Route> = PagerProps & {\n onIndexChange: (index: number) => void;\n navigationState: NavigationState<T>;\n renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;\n renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;\n renderTabBar?: (\n props: SceneRendererProps & { navigationState: NavigationState<T> }\n ) => React.ReactNode;\n tabBarPosition?: 'top' | 'bottom';\n initialLayout?: Partial<Layout>;\n lazy?: ((props: { route: T }) => boolean) | boolean;\n lazyPreloadDistance?: number;\n sceneContainerStyle?: StyleProp<ViewStyle>;\n pagerStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n};\n\nexport default function TabView<T extends Route>({\n onIndexChange,\n navigationState,\n renderScene,\n initialLayout,\n keyboardDismissMode = 'auto',\n lazy = false,\n lazyPreloadDistance = 0,\n onSwipeStart,\n onSwipeEnd,\n renderLazyPlaceholder = () => null,\n renderTabBar = (props) => <TabBar {...props} />,\n sceneContainerStyle,\n pagerStyle,\n style,\n swipeEnabled = true,\n tabBarPosition = 'top',\n animationEnabled = true,\n}: Props<T>) {\n const [layout, setLayout] = React.useState({\n width: 0,\n height: 0,\n ...initialLayout,\n });\n\n const jumpToIndex = (index: number) => {\n if (index !== navigationState.index) {\n onIndexChange(index);\n }\n };\n\n const handleLayout = (e: LayoutChangeEvent) => {\n const { height, width } = e.nativeEvent.layout;\n\n setLayout((prevLayout) => {\n if (prevLayout.width === width && prevLayout.height === height) {\n return prevLayout;\n }\n\n return { height, width };\n });\n };\n\n return (\n <View onLayout={handleLayout} style={[styles.pager, style]}>\n <Pager\n layout={layout}\n navigationState={navigationState}\n keyboardDismissMode={keyboardDismissMode}\n swipeEnabled={swipeEnabled}\n onSwipeStart={onSwipeStart}\n onSwipeEnd={onSwipeEnd}\n onIndexChange={jumpToIndex}\n animationEnabled={animationEnabled}\n style={pagerStyle}\n >\n {({ position, render, addEnterListener, jumpTo }) => {\n // All of the props here must not change between re-renders\n // This is crucial to optimizing the routes with PureComponent\n const sceneRendererProps = {\n position,\n layout,\n jumpTo,\n };\n\n return (\n <React.Fragment>\n {tabBarPosition === 'top' &&\n renderTabBar({\n ...sceneRendererProps,\n navigationState,\n })}\n {render(\n navigationState.routes.map((route, i) => {\n return (\n <SceneView\n {...sceneRendererProps}\n addEnterListener={addEnterListener}\n key={route.key}\n index={i}\n lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}\n lazyPreloadDistance={lazyPreloadDistance}\n navigationState={navigationState}\n style={sceneContainerStyle}\n >\n {({ loading }) =>\n loading\n ? renderLazyPlaceholder({ route })\n : renderScene({\n ...sceneRendererProps,\n route,\n })\n }\n </SceneView>\n );\n })\n )}\n {tabBarPosition === 'bottom' &&\n renderTabBar({\n ...sceneRendererProps,\n navigationState,\n })}\n </React.Fragment>\n );\n }}\n </Pager>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n pager: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"names":["TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","pagerStyle","style","swipeEnabled","tabBarPosition","animationEnabled","layout","setLayout","React","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","StyleSheet","create","flex","overflow"],"sources":["TabView.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n LayoutChangeEvent,\n StyleProp,\n StyleSheet,\n View,\n ViewStyle,\n} from 'react-native';\n\nimport Pager from './Pager';\nimport SceneView from './SceneView';\nimport TabBar from './TabBar';\nimport type {\n Layout,\n NavigationState,\n PagerProps,\n Route,\n SceneRendererProps,\n} from './types';\n\nexport type Props<T extends Route> = PagerProps & {\n onIndexChange: (index: number) => void;\n navigationState: NavigationState<T>;\n renderScene: (props: SceneRendererProps & { route: T }) => React.ReactNode;\n renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;\n renderTabBar?: (\n props: SceneRendererProps & { navigationState: NavigationState<T> }\n ) => React.ReactNode;\n tabBarPosition?: 'top' | 'bottom';\n initialLayout?: Partial<Layout>;\n lazy?: ((props: { route: T }) => boolean) | boolean;\n lazyPreloadDistance?: number;\n sceneContainerStyle?: StyleProp<ViewStyle>;\n pagerStyle?: StyleProp<ViewStyle>;\n style?: StyleProp<ViewStyle>;\n};\n\nexport default function TabView<T extends Route>({\n onIndexChange,\n navigationState,\n renderScene,\n initialLayout,\n keyboardDismissMode = 'auto',\n lazy = false,\n lazyPreloadDistance = 0,\n onSwipeStart,\n onSwipeEnd,\n renderLazyPlaceholder = () => null,\n renderTabBar = (props) => <TabBar {...props} />,\n sceneContainerStyle,\n pagerStyle,\n style,\n swipeEnabled = true,\n tabBarPosition = 'top',\n animationEnabled = true,\n}: Props<T>) {\n const [layout, setLayout] = React.useState({\n width: 0,\n height: 0,\n ...initialLayout,\n });\n\n const jumpToIndex = (index: number) => {\n if (index !== navigationState.index) {\n onIndexChange(index);\n }\n };\n\n const handleLayout = (e: LayoutChangeEvent) => {\n const { height, width } = e.nativeEvent.layout;\n\n setLayout((prevLayout) => {\n if (prevLayout.width === width && prevLayout.height === height) {\n return prevLayout;\n }\n\n return { height, width };\n });\n };\n\n return (\n <View onLayout={handleLayout} style={[styles.pager, style]}>\n <Pager\n layout={layout}\n navigationState={navigationState}\n keyboardDismissMode={keyboardDismissMode}\n swipeEnabled={swipeEnabled}\n onSwipeStart={onSwipeStart}\n onSwipeEnd={onSwipeEnd}\n onIndexChange={jumpToIndex}\n animationEnabled={animationEnabled}\n style={pagerStyle}\n >\n {({ position, render, addEnterListener, jumpTo }) => {\n // All of the props here must not change between re-renders\n // This is crucial to optimizing the routes with PureComponent\n const sceneRendererProps = {\n position,\n layout,\n jumpTo,\n };\n\n return (\n <React.Fragment>\n {tabBarPosition === 'top' &&\n renderTabBar({\n ...sceneRendererProps,\n navigationState,\n })}\n {render(\n navigationState.routes.map((route, i) => {\n return (\n <SceneView\n {...sceneRendererProps}\n addEnterListener={addEnterListener}\n key={route.key}\n index={i}\n lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}\n lazyPreloadDistance={lazyPreloadDistance}\n navigationState={navigationState}\n style={sceneContainerStyle}\n >\n {({ loading }) =>\n loading\n ? renderLazyPlaceholder({ route })\n : renderScene({\n ...sceneRendererProps,\n route,\n })\n }\n </SceneView>\n );\n })\n )}\n {tabBarPosition === 'bottom' &&\n renderTabBar({\n ...sceneRendererProps,\n navigationState,\n })}\n </React.Fragment>\n );\n }}\n </Pager>\n </View>\n );\n}\n\nconst styles = StyleSheet.create({\n pager: {\n flex: 1,\n overflow: 'hidden',\n },\n});\n"],"mappings":"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"}
@@ -34,15 +34,15 @@ Object.defineProperty(exports, "TabView", {
34
34
  }
35
35
  });
36
36
 
37
- var _TabBar = _interopRequireDefault(require("./TabBar"));
37
+ var _SceneMap = _interopRequireDefault(require("./SceneMap"));
38
38
 
39
- var _TabView = _interopRequireDefault(require("./TabView"));
39
+ var _TabBar = _interopRequireDefault(require("./TabBar"));
40
40
 
41
41
  var _TabBarIndicator = _interopRequireDefault(require("./TabBarIndicator"));
42
42
 
43
43
  var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
44
44
 
45
- var _SceneMap = _interopRequireDefault(require("./SceneMap"));
45
+ var _TabView = _interopRequireDefault(require("./TabView"));
46
46
 
47
47
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48
48
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export { default as TabBar } from './TabBar';\nexport type { Props as TabBarProps } from './TabBar';\n\nexport { default as TabView } from './TabView';\nexport type { Props as TabViewProps } from './TabView';\n\nexport { default as TabBarIndicator } from './TabBarIndicator';\nexport type { Props as TabBarIndicatorProps } from './TabBarIndicator';\n\nexport { default as TabBarItem } from './TabBarItem';\nexport type { Props as TabBarItemProps } from './TabBarItem';\n\nexport { default as SceneMap } from './SceneMap';\n\nexport type { Route, NavigationState, SceneRendererProps } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA;;AAGA;;AAGA;;AAGA"}
1
+ {"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export { default as SceneMap } from './SceneMap';\nexport type { Props as TabBarProps } from './TabBar';\nexport { default as TabBar } from './TabBar';\nexport type { Props as TabBarIndicatorProps } from './TabBarIndicator';\nexport { default as TabBarIndicator } from './TabBarIndicator';\nexport type { Props as TabBarItemProps } from './TabBarItem';\nexport { default as TabBarItem } from './TabBarItem';\nexport type { Props as TabViewProps } from './TabView';\nexport { default as TabView } from './TabView';\nexport type { NavigationState, Route, SceneRendererProps } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAEA;;AAEA;;AAEA"}
@@ -103,8 +103,9 @@ export default function PagerViewAdapter(_ref) {
103
103
  }
104
104
  };
105
105
  }, []);
106
+ const memoizedPosition = React.useMemo(() => Animated.add(position, offset), [offset, position]);
106
107
  return children({
107
- position: Animated.add(position, offset),
108
+ position: memoizedPosition,
108
109
  addEnterListener,
109
110
  jumpTo,
110
111
  render: children => /*#__PURE__*/React.createElement(AnimatedViewPager, _extends({}, rest, {
@@ -1 +1 @@
1
- {"version":3,"names":["React","Animated","Keyboard","StyleSheet","ViewPager","useAnimatedValue","AnimatedViewPager","createAnimatedComponent","PagerViewAdapter","keyboardDismissMode","swipeEnabled","navigationState","onIndexChange","onSwipeStart","onSwipeEnd","children","style","animationEnabled","rest","index","listenersRef","useRef","pagerRef","indexRef","navigationStateRef","position","offset","useEffect","current","jumpTo","useCallback","key","routes","findIndex","route","setPage","setPageWithoutAnimation","setValue","dismiss","onPageScrollStateChanged","state","pageScrollState","nativeEvent","subscription","addListener","value","next","Math","ceil","floor","forEach","listener","removeListener","addEnterListener","push","indexOf","splice","add","render","styles","container","event","useNativeDriver","e","create","flex"],"sources":["PagerViewAdapter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated, Keyboard, StyleSheet } from 'react-native';\nimport ViewPager, {\n PageScrollStateChangedNativeEvent,\n} from 'react-native-pager-view';\nimport useAnimatedValue from './useAnimatedValue';\nimport type {\n NavigationState,\n Route,\n Listener,\n EventEmitterProps,\n PagerProps,\n} from './types';\n\nconst AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);\n\ntype Props<T extends Route> = PagerProps & {\n onIndexChange: (index: number) => void;\n navigationState: NavigationState<T>;\n children: (\n props: EventEmitterProps & {\n // Animated value which represents the state of current index\n // It can include fractional digits as it represents the intermediate value\n position: Animated.AnimatedInterpolation;\n // Function to actually render the content of the pager\n // The parent component takes care of rendering\n render: (children: React.ReactNode) => React.ReactNode;\n // Callback to call when switching the tab\n // The tab switch animation is performed even if the index in state is unchanged\n jumpTo: (key: string) => void;\n }\n ) => React.ReactElement;\n};\n\nexport default function PagerViewAdapter<T extends Route>({\n keyboardDismissMode = 'auto',\n swipeEnabled = true,\n navigationState,\n onIndexChange,\n onSwipeStart,\n onSwipeEnd,\n children,\n style,\n animationEnabled,\n ...rest\n}: Props<T>) {\n const { index } = navigationState;\n\n const listenersRef = React.useRef<Listener[]>([]);\n\n const pagerRef = React.useRef<ViewPager>();\n const indexRef = React.useRef<number>(index);\n const navigationStateRef = React.useRef(navigationState);\n\n const position = useAnimatedValue(index);\n const offset = useAnimatedValue(0);\n\n React.useEffect(() => {\n navigationStateRef.current = navigationState;\n });\n\n const jumpTo = React.useCallback(\n (key: string) => {\n const index = navigationStateRef.current.routes.findIndex(\n (route: { key: string }) => route.key === key\n );\n\n if (animationEnabled) {\n pagerRef.current?.setPage(index);\n } else {\n pagerRef.current?.setPageWithoutAnimation(index);\n position.setValue(index);\n }\n },\n [animationEnabled, position]\n );\n\n React.useEffect(() => {\n if (keyboardDismissMode === 'auto') {\n Keyboard.dismiss();\n }\n\n if (indexRef.current !== index) {\n if (animationEnabled) {\n pagerRef.current?.setPage(index);\n } else {\n pagerRef.current?.setPageWithoutAnimation(index);\n position.setValue(index);\n }\n }\n }, [keyboardDismissMode, index, animationEnabled, position]);\n\n const onPageScrollStateChanged = (\n state: PageScrollStateChangedNativeEvent\n ) => {\n const { pageScrollState } = state.nativeEvent;\n\n switch (pageScrollState) {\n case 'idle':\n onSwipeEnd?.();\n return;\n case 'dragging': {\n const subscription = offset.addListener(({ value }) => {\n const next =\n index + (value > 0 ? Math.ceil(value) : Math.floor(value));\n\n if (next !== index) {\n listenersRef.current.forEach((listener) => listener(next));\n }\n\n offset.removeListener(subscription);\n });\n\n onSwipeStart?.();\n return;\n }\n }\n };\n\n const addEnterListener = React.useCallback((listener: Listener) => {\n listenersRef.current.push(listener);\n\n return () => {\n const index = listenersRef.current.indexOf(listener);\n\n if (index > -1) {\n listenersRef.current.splice(index, 1);\n }\n };\n }, []);\n\n return children({\n position: Animated.add(position, offset),\n addEnterListener,\n jumpTo,\n render: (children) => (\n <AnimatedViewPager\n {...rest}\n ref={pagerRef}\n style={[styles.container, style]}\n initialPage={index}\n keyboardDismissMode={\n keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode\n }\n onPageScroll={Animated.event(\n [\n {\n nativeEvent: {\n position: position,\n offset: offset,\n },\n },\n ],\n { useNativeDriver: true }\n )}\n onPageSelected={(e) => {\n const index = e.nativeEvent.position;\n indexRef.current = index;\n onIndexChange(index);\n }}\n onPageScrollStateChanged={onPageScrollStateChanged}\n scrollEnabled={swipeEnabled}\n >\n {children}\n </AnimatedViewPager>\n ),\n });\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"names":["React","Animated","Keyboard","StyleSheet","ViewPager","useAnimatedValue","AnimatedViewPager","createAnimatedComponent","PagerViewAdapter","keyboardDismissMode","swipeEnabled","navigationState","onIndexChange","onSwipeStart","onSwipeEnd","children","style","animationEnabled","rest","index","listenersRef","useRef","pagerRef","indexRef","navigationStateRef","position","offset","useEffect","current","jumpTo","useCallback","key","routes","findIndex","route","setPage","setPageWithoutAnimation","setValue","dismiss","onPageScrollStateChanged","state","pageScrollState","nativeEvent","subscription","addListener","value","next","Math","ceil","floor","forEach","listener","removeListener","addEnterListener","push","indexOf","splice","memoizedPosition","useMemo","add","render","styles","container","event","useNativeDriver","e","create","flex"],"sources":["PagerViewAdapter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Animated, Keyboard, StyleSheet } from 'react-native';\nimport ViewPager, {\n PageScrollStateChangedNativeEvent,\n} from 'react-native-pager-view';\n\nimport type {\n EventEmitterProps,\n Listener,\n NavigationState,\n PagerProps,\n Route,\n} from './types';\nimport useAnimatedValue from './useAnimatedValue';\n\nconst AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);\n\ntype Props<T extends Route> = PagerProps & {\n onIndexChange: (index: number) => void;\n navigationState: NavigationState<T>;\n children: (\n props: EventEmitterProps & {\n // Animated value which represents the state of current index\n // It can include fractional digits as it represents the intermediate value\n position: Animated.AnimatedInterpolation;\n // Function to actually render the content of the pager\n // The parent component takes care of rendering\n render: (children: React.ReactNode) => React.ReactNode;\n // Callback to call when switching the tab\n // The tab switch animation is performed even if the index in state is unchanged\n jumpTo: (key: string) => void;\n }\n ) => React.ReactElement;\n};\n\nexport default function PagerViewAdapter<T extends Route>({\n keyboardDismissMode = 'auto',\n swipeEnabled = true,\n navigationState,\n onIndexChange,\n onSwipeStart,\n onSwipeEnd,\n children,\n style,\n animationEnabled,\n ...rest\n}: Props<T>) {\n const { index } = navigationState;\n\n const listenersRef = React.useRef<Listener[]>([]);\n\n const pagerRef = React.useRef<ViewPager>();\n const indexRef = React.useRef<number>(index);\n const navigationStateRef = React.useRef(navigationState);\n\n const position = useAnimatedValue(index);\n const offset = useAnimatedValue(0);\n\n React.useEffect(() => {\n navigationStateRef.current = navigationState;\n });\n\n const jumpTo = React.useCallback(\n (key: string) => {\n const index = navigationStateRef.current.routes.findIndex(\n (route: { key: string }) => route.key === key\n );\n\n if (animationEnabled) {\n pagerRef.current?.setPage(index);\n } else {\n pagerRef.current?.setPageWithoutAnimation(index);\n position.setValue(index);\n }\n },\n [animationEnabled, position]\n );\n\n React.useEffect(() => {\n if (keyboardDismissMode === 'auto') {\n Keyboard.dismiss();\n }\n\n if (indexRef.current !== index) {\n if (animationEnabled) {\n pagerRef.current?.setPage(index);\n } else {\n pagerRef.current?.setPageWithoutAnimation(index);\n position.setValue(index);\n }\n }\n }, [keyboardDismissMode, index, animationEnabled, position]);\n\n const onPageScrollStateChanged = (\n state: PageScrollStateChangedNativeEvent\n ) => {\n const { pageScrollState } = state.nativeEvent;\n\n switch (pageScrollState) {\n case 'idle':\n onSwipeEnd?.();\n return;\n case 'dragging': {\n const subscription = offset.addListener(({ value }) => {\n const next =\n index + (value > 0 ? Math.ceil(value) : Math.floor(value));\n\n if (next !== index) {\n listenersRef.current.forEach((listener) => listener(next));\n }\n\n offset.removeListener(subscription);\n });\n\n onSwipeStart?.();\n return;\n }\n }\n };\n\n const addEnterListener = React.useCallback((listener: Listener) => {\n listenersRef.current.push(listener);\n\n return () => {\n const index = listenersRef.current.indexOf(listener);\n\n if (index > -1) {\n listenersRef.current.splice(index, 1);\n }\n };\n }, []);\n\n const memoizedPosition = React.useMemo(\n () => Animated.add(position, offset),\n [offset, position]\n );\n\n return children({\n position: memoizedPosition,\n addEnterListener,\n jumpTo,\n render: (children) => (\n <AnimatedViewPager\n {...rest}\n ref={pagerRef}\n style={[styles.container, style]}\n initialPage={index}\n keyboardDismissMode={\n keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode\n }\n onPageScroll={Animated.event(\n [\n {\n nativeEvent: {\n position: position,\n offset: offset,\n },\n },\n ],\n { useNativeDriver: true }\n )}\n onPageSelected={(e) => {\n const index = e.nativeEvent.position;\n indexRef.current = index;\n onIndexChange(index);\n }}\n onPageScrollStateChanged={onPageScrollStateChanged}\n scrollEnabled={swipeEnabled}\n >\n {children}\n </AnimatedViewPager>\n ),\n });\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n },\n});\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from 'react';
4
- import { Animated, PanResponder, Keyboard, StyleSheet, I18nManager, View } from 'react-native';
4
+ import { Animated, I18nManager, Keyboard, PanResponder, StyleSheet, View } from 'react-native';
5
5
  import useAnimatedValue from './useAnimatedValue';
6
6
  const DEAD_ZONE = 12;
7
7
  const DefaultTransitionSpec = {
@@ -181,8 +181,9 @@ export default function PanResponderAdapter(_ref) {
181
181
  outputRange: [-maxTranslate, 0],
182
182
  extrapolate: 'clamp'
183
183
  }), I18nManager.isRTL ? -1 : 1);
184
+ const position = React.useMemo(() => layout.width ? Animated.divide(panX, -layout.width) : null, [layout.width, panX]);
184
185
  return children({
185
- position: layout.width ? Animated.divide(panX, -layout.width) : new Animated.Value(index),
186
+ position: position !== null && position !== void 0 ? position : new Animated.Value(index),
186
187
  addEnterListener,
187
188
  jumpTo,
188
189
  render: children => /*#__PURE__*/React.createElement(Animated.View, _extends({