react-native-tab-view 3.2.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/lib/commonjs/PagerViewAdapter.js +25 -8
- package/lib/commonjs/PagerViewAdapter.js.map +1 -1
- package/lib/commonjs/PanResponderAdapter.js +29 -20
- package/lib/commonjs/PanResponderAdapter.js.map +1 -1
- package/lib/commonjs/SceneMap.js +9 -12
- package/lib/commonjs/SceneMap.js.map +1 -1
- package/lib/commonjs/SceneView.js +54 -101
- package/lib/commonjs/SceneView.js.map +1 -1
- package/lib/commonjs/TabBar.js +327 -327
- package/lib/commonjs/TabBar.js.map +1 -1
- package/lib/commonjs/TabBarIndicator.js +81 -99
- package/lib/commonjs/TabBarIndicator.js.map +1 -1
- package/lib/commonjs/TabBarItem.js +184 -161
- package/lib/commonjs/TabBarItem.js.map +1 -1
- package/lib/commonjs/TabView.js +3 -1
- package/lib/commonjs/TabView.js.map +1 -1
- package/lib/commonjs/types.js.map +1 -1
- package/lib/module/PagerViewAdapter.js +25 -8
- package/lib/module/PagerViewAdapter.js.map +1 -1
- package/lib/module/PanResponderAdapter.js +29 -19
- package/lib/module/PanResponderAdapter.js.map +1 -1
- package/lib/module/SceneMap.js +9 -14
- package/lib/module/SceneMap.js.map +1 -1
- package/lib/module/SceneView.js +53 -98
- package/lib/module/SceneView.js.map +1 -1
- package/lib/module/TabBar.js +323 -323
- package/lib/module/TabBar.js.map +1 -1
- package/lib/module/TabBarIndicator.js +74 -92
- package/lib/module/TabBarIndicator.js.map +1 -1
- package/lib/module/TabBarItem.js +178 -154
- package/lib/module/TabBarItem.js.map +1 -1
- package/lib/module/TabView.js +3 -1
- package/lib/module/TabView.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/typescript/PagerViewAdapter.d.ts +1 -1
- package/lib/typescript/PanResponderAdapter.d.ts +1 -1
- package/lib/typescript/SceneMap.d.ts +5 -3
- package/lib/typescript/SceneView.d.ts +1 -18
- package/lib/typescript/TabBar.d.ts +7 -38
- package/lib/typescript/TabBarIndicator.d.ts +2 -10
- package/lib/typescript/TabBarItem.d.ts +3 -5
- package/lib/typescript/TabView.d.ts +1 -1
- package/lib/typescript/types.d.ts +1 -0
- package/package.json +4 -1
- package/src/PagerViewAdapter.tsx +29 -10
- package/src/PanResponderAdapter.tsx +29 -20
- package/src/SceneMap.tsx +11 -7
- package/src/SceneView.tsx +70 -106
- package/src/TabBar.tsx +451 -391
- package/src/TabBarIndicator.tsx +108 -114
- package/src/TabBarItem.tsx +214 -185
- package/src/TabView.tsx +2 -0
- package/src/types.tsx +1 -0
package/lib/module/TabBarItem.js
CHANGED
|
@@ -1,182 +1,206 @@
|
|
|
1
|
-
function
|
|
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
4
|
import { Animated, StyleSheet, View } from 'react-native';
|
|
5
|
+
import useLatestCallback from 'use-latest-callback';
|
|
5
6
|
import PlatformPressable from './PlatformPressable';
|
|
6
7
|
const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
|
|
7
8
|
const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
|
|
8
|
-
export default class TabBarItem extends React.Component {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return 1;
|
|
21
|
-
}
|
|
10
|
+
const getActiveOpacity = (position, routesLength, tabIndex) => {
|
|
11
|
+
if (routesLength > 1) {
|
|
12
|
+
const inputRange = Array.from({
|
|
13
|
+
length: routesLength
|
|
14
|
+
}, (_, i) => i);
|
|
15
|
+
return position.interpolate({
|
|
16
|
+
inputRange,
|
|
17
|
+
outputRange: inputRange.map(i => i === tabIndex ? 1 : 0)
|
|
22
18
|
});
|
|
19
|
+
} else {
|
|
20
|
+
return 1;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return 0;
|
|
33
|
-
}
|
|
24
|
+
const getInactiveOpacity = (position, routesLength, tabIndex) => {
|
|
25
|
+
if (routesLength > 1) {
|
|
26
|
+
const inputRange = Array.from({
|
|
27
|
+
length: routesLength
|
|
28
|
+
}, (_, i) => i);
|
|
29
|
+
return position.interpolate({
|
|
30
|
+
inputRange,
|
|
31
|
+
outputRange: inputRange.map(i => i === tabIndex ? 0 : 1)
|
|
34
32
|
});
|
|
33
|
+
} else {
|
|
34
|
+
return 0;
|
|
35
35
|
}
|
|
36
|
+
};
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (renderIcon) {
|
|
70
|
-
const activeIcon = renderIcon({
|
|
71
|
-
route,
|
|
72
|
-
focused: true,
|
|
73
|
-
color: activeColor
|
|
74
|
-
});
|
|
75
|
-
const inactiveIcon = renderIcon({
|
|
76
|
-
route,
|
|
77
|
-
focused: false,
|
|
78
|
-
color: inactiveColor
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
if (inactiveIcon != null && activeIcon != null) {
|
|
82
|
-
icon = /*#__PURE__*/React.createElement(View, {
|
|
83
|
-
style: styles.icon
|
|
84
|
-
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
85
|
-
style: {
|
|
86
|
-
opacity: inactiveOpacity
|
|
87
|
-
}
|
|
88
|
-
}, inactiveIcon), /*#__PURE__*/React.createElement(Animated.View, {
|
|
89
|
-
style: [StyleSheet.absoluteFill, {
|
|
90
|
-
opacity: activeOpacity
|
|
91
|
-
}]
|
|
92
|
-
}, activeIcon));
|
|
93
|
-
}
|
|
94
|
-
}
|
|
38
|
+
const TabBarItemInternal = _ref => {
|
|
39
|
+
let {
|
|
40
|
+
getAccessibilityLabel,
|
|
41
|
+
getAccessible,
|
|
42
|
+
getLabelText,
|
|
43
|
+
getTestID,
|
|
44
|
+
onLongPress,
|
|
45
|
+
onPress,
|
|
46
|
+
isFocused,
|
|
47
|
+
position,
|
|
48
|
+
route,
|
|
49
|
+
style,
|
|
50
|
+
inactiveColor: inactiveColorCustom,
|
|
51
|
+
activeColor: activeColorCustom,
|
|
52
|
+
labelStyle,
|
|
53
|
+
onLayout,
|
|
54
|
+
index: tabIndex,
|
|
55
|
+
pressColor,
|
|
56
|
+
pressOpacity,
|
|
57
|
+
renderBadge,
|
|
58
|
+
renderIcon,
|
|
59
|
+
defaultTabWidth,
|
|
60
|
+
routesLength,
|
|
61
|
+
renderLabel: renderLabelCustom
|
|
62
|
+
} = _ref;
|
|
63
|
+
const labelColorFromStyle = StyleSheet.flatten(labelStyle || {}).color;
|
|
64
|
+
const activeColor = activeColorCustom !== undefined ? activeColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_ACTIVE_COLOR;
|
|
65
|
+
const inactiveColor = inactiveColorCustom !== undefined ? inactiveColorCustom : typeof labelColorFromStyle === 'string' ? labelColorFromStyle : DEFAULT_INACTIVE_COLOR;
|
|
66
|
+
const activeOpacity = getActiveOpacity(position, routesLength, tabIndex);
|
|
67
|
+
const inactiveOpacity = getInactiveOpacity(position, routesLength, tabIndex);
|
|
68
|
+
let icon = null;
|
|
69
|
+
let label = null;
|
|
95
70
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
style: [styles.label, icon ? {
|
|
108
|
-
marginTop: 0
|
|
109
|
-
} : null, labelStyle, {
|
|
110
|
-
color
|
|
111
|
-
}]
|
|
112
|
-
}, labelText);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return labelText;
|
|
116
|
-
};
|
|
71
|
+
if (renderIcon) {
|
|
72
|
+
const activeIcon = renderIcon({
|
|
73
|
+
route,
|
|
74
|
+
focused: true,
|
|
75
|
+
color: activeColor
|
|
76
|
+
});
|
|
77
|
+
const inactiveIcon = renderIcon({
|
|
78
|
+
route,
|
|
79
|
+
focused: false,
|
|
80
|
+
color: inactiveColor
|
|
81
|
+
});
|
|
117
82
|
|
|
118
|
-
if (
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
color: activeColor
|
|
123
|
-
});
|
|
124
|
-
const inactiveLabel = renderLabel({
|
|
125
|
-
route,
|
|
126
|
-
focused: false,
|
|
127
|
-
color: inactiveColor
|
|
128
|
-
});
|
|
129
|
-
label = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
83
|
+
if (inactiveIcon != null && activeIcon != null) {
|
|
84
|
+
icon = /*#__PURE__*/React.createElement(View, {
|
|
85
|
+
style: styles.icon
|
|
86
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
130
87
|
style: {
|
|
131
88
|
opacity: inactiveOpacity
|
|
132
89
|
}
|
|
133
|
-
},
|
|
90
|
+
}, inactiveIcon), /*#__PURE__*/React.createElement(Animated.View, {
|
|
134
91
|
style: [StyleSheet.absoluteFill, {
|
|
135
92
|
opacity: activeOpacity
|
|
136
93
|
}]
|
|
137
|
-
},
|
|
94
|
+
}, activeIcon));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
const renderLabel = renderLabelCustom !== undefined ? renderLabelCustom : labelProps => {
|
|
99
|
+
const labelText = getLabelText({
|
|
100
|
+
route: labelProps.route
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
if (typeof labelText === 'string') {
|
|
104
|
+
return /*#__PURE__*/React.createElement(Animated.Text, {
|
|
105
|
+
style: [styles.label, icon ? {
|
|
106
|
+
marginTop: 0
|
|
107
|
+
} : null, labelStyle, {
|
|
108
|
+
color: labelProps.color
|
|
109
|
+
}]
|
|
110
|
+
}, labelText);
|
|
138
111
|
}
|
|
139
112
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
accessibilityStates: isFocused ? ['selected'] : [],
|
|
164
|
-
pressColor: pressColor,
|
|
165
|
-
pressOpacity: pressOpacity,
|
|
166
|
-
delayPressIn: 0,
|
|
167
|
-
onLayout: onLayout,
|
|
168
|
-
onPress: onPress,
|
|
169
|
-
onLongPress: onLongPress,
|
|
170
|
-
style: [styles.pressable, tabContainerStyle]
|
|
171
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
172
|
-
pointerEvents: "none",
|
|
173
|
-
style: [styles.item, tabStyle]
|
|
174
|
-
}, icon, label, badge != null ? /*#__PURE__*/React.createElement(View, {
|
|
175
|
-
style: styles.badge
|
|
176
|
-
}, badge) : null));
|
|
113
|
+
return labelText;
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
if (renderLabel) {
|
|
117
|
+
const activeLabel = renderLabel({
|
|
118
|
+
route,
|
|
119
|
+
focused: true,
|
|
120
|
+
color: activeColor
|
|
121
|
+
});
|
|
122
|
+
const inactiveLabel = renderLabel({
|
|
123
|
+
route,
|
|
124
|
+
focused: false,
|
|
125
|
+
color: inactiveColor
|
|
126
|
+
});
|
|
127
|
+
label = /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
128
|
+
style: {
|
|
129
|
+
opacity: inactiveOpacity
|
|
130
|
+
}
|
|
131
|
+
}, inactiveLabel), /*#__PURE__*/React.createElement(Animated.View, {
|
|
132
|
+
style: [StyleSheet.absoluteFill, {
|
|
133
|
+
opacity: activeOpacity
|
|
134
|
+
}]
|
|
135
|
+
}, activeLabel));
|
|
177
136
|
}
|
|
178
137
|
|
|
138
|
+
const tabStyle = StyleSheet.flatten(style);
|
|
139
|
+
const isWidthSet = (tabStyle === null || tabStyle === void 0 ? void 0 : tabStyle.width) !== undefined;
|
|
140
|
+
const tabContainerStyle = isWidthSet ? null : {
|
|
141
|
+
width: defaultTabWidth
|
|
142
|
+
};
|
|
143
|
+
const scene = {
|
|
144
|
+
route
|
|
145
|
+
};
|
|
146
|
+
let accessibilityLabel = getAccessibilityLabel(scene);
|
|
147
|
+
accessibilityLabel = typeof accessibilityLabel !== 'undefined' ? accessibilityLabel : getLabelText(scene);
|
|
148
|
+
const badge = renderBadge ? renderBadge(scene) : null;
|
|
149
|
+
return /*#__PURE__*/React.createElement(PlatformPressable, {
|
|
150
|
+
android_ripple: {
|
|
151
|
+
borderless: true
|
|
152
|
+
},
|
|
153
|
+
testID: getTestID(scene),
|
|
154
|
+
accessible: getAccessible(scene),
|
|
155
|
+
accessibilityLabel: accessibilityLabel,
|
|
156
|
+
accessibilityRole: "tab",
|
|
157
|
+
accessibilityState: {
|
|
158
|
+
selected: isFocused
|
|
159
|
+
} // @ts-ignore: this is to support older React Native versions
|
|
160
|
+
,
|
|
161
|
+
accessibilityStates: isFocused ? ['selected'] : [],
|
|
162
|
+
pressColor: pressColor,
|
|
163
|
+
pressOpacity: pressOpacity,
|
|
164
|
+
delayPressIn: 0,
|
|
165
|
+
onLayout: onLayout,
|
|
166
|
+
onPress: onPress,
|
|
167
|
+
onLongPress: onLongPress,
|
|
168
|
+
style: [styles.pressable, tabContainerStyle]
|
|
169
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
170
|
+
pointerEvents: "none",
|
|
171
|
+
style: [styles.item, tabStyle]
|
|
172
|
+
}, icon, label, badge != null ? /*#__PURE__*/React.createElement(View, {
|
|
173
|
+
style: styles.badge
|
|
174
|
+
}, badge) : null));
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
const MemoizedTabBarItemInternal = /*#__PURE__*/React.memo(TabBarItemInternal);
|
|
178
|
+
|
|
179
|
+
function TabBarItem(props) {
|
|
180
|
+
const {
|
|
181
|
+
onPress,
|
|
182
|
+
onLongPress,
|
|
183
|
+
onLayout,
|
|
184
|
+
navigationState,
|
|
185
|
+
route,
|
|
186
|
+
...rest
|
|
187
|
+
} = props;
|
|
188
|
+
const onPressLatest = useLatestCallback(onPress);
|
|
189
|
+
const onLongPressLatest = useLatestCallback(onLongPress);
|
|
190
|
+
const onLayoutLatest = useLatestCallback(onLayout ? onLayout : () => {});
|
|
191
|
+
const tabIndex = navigationState.routes.indexOf(route);
|
|
192
|
+
return /*#__PURE__*/React.createElement(MemoizedTabBarItemInternal, _extends({}, rest, {
|
|
193
|
+
onPress: onPressLatest,
|
|
194
|
+
onLayout: onLayoutLatest,
|
|
195
|
+
onLongPress: onLongPressLatest,
|
|
196
|
+
isFocused: navigationState.index === tabIndex,
|
|
197
|
+
route: route,
|
|
198
|
+
index: tabIndex,
|
|
199
|
+
routesLength: navigationState.routes.length
|
|
200
|
+
}));
|
|
179
201
|
}
|
|
202
|
+
|
|
203
|
+
export default TabBarItem;
|
|
180
204
|
const styles = StyleSheet.create({
|
|
181
205
|
label: {
|
|
182
206
|
margin: 4,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Animated","StyleSheet","View","PlatformPressable","DEFAULT_ACTIVE_COLOR","DEFAULT_INACTIVE_COLOR","TabBarItem","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","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":["React","Animated","StyleSheet","View","useLatestCallback","PlatformPressable","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","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","memo","TabBarItem","props","navigationState","rest","onPressLatest","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 StyleSheet,\n View,\n StyleProp,\n LayoutChangeEvent,\n TextStyle,\n ViewStyle,\n} from 'react-native';\nimport useLatestCallback from 'use-latest-callback';\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 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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"}
|
package/lib/module/TabView.js
CHANGED
|
@@ -22,7 +22,8 @@ export default function TabView(_ref) {
|
|
|
22
22
|
pagerStyle,
|
|
23
23
|
style,
|
|
24
24
|
swipeEnabled = true,
|
|
25
|
-
tabBarPosition = 'top'
|
|
25
|
+
tabBarPosition = 'top',
|
|
26
|
+
animationEnabled = true
|
|
26
27
|
} = _ref;
|
|
27
28
|
const [layout, setLayout] = React.useState({
|
|
28
29
|
width: 0,
|
|
@@ -64,6 +65,7 @@ export default function TabView(_ref) {
|
|
|
64
65
|
onSwipeStart: onSwipeStart,
|
|
65
66
|
onSwipeEnd: onSwipeEnd,
|
|
66
67
|
onIndexChange: jumpToIndex,
|
|
68
|
+
animationEnabled: animationEnabled,
|
|
67
69
|
style: pagerStyle
|
|
68
70
|
}, _ref2 => {
|
|
69
71
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","TabBar","SceneView","Pager","TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","pagerStyle","style","swipeEnabled","tabBarPosition","layout","setLayout","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","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}: 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 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":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,UADF,EAEEC,IAFF,QAMO,cANP;AAOA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,KAAP,MAAkB,SAAlB;AA0BA,eAAe,SAASC,OAAT,
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","TabBar","SceneView","Pager","TabView","onIndexChange","navigationState","renderScene","initialLayout","keyboardDismissMode","lazy","lazyPreloadDistance","onSwipeStart","onSwipeEnd","renderLazyPlaceholder","renderTabBar","props","sceneContainerStyle","pagerStyle","style","swipeEnabled","tabBarPosition","animationEnabled","layout","setLayout","useState","width","height","jumpToIndex","index","handleLayout","e","nativeEvent","prevLayout","styles","pager","position","render","addEnterListener","jumpTo","sceneRendererProps","routes","map","route","i","key","loading","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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"}
|
package/lib/module/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type { Animated } from 'react-native';\nimport type { PagerViewProps } from 'react-native-pager-view';\n\nexport type Route = {\n key: string;\n icon?: string;\n title?: string;\n accessible?: boolean;\n accessibilityLabel?: string;\n testID?: string;\n};\n\nexport type Event = {\n defaultPrevented: boolean;\n preventDefault(): void;\n};\n\nexport type Scene<T extends Route> = {\n route: T;\n};\n\nexport type NavigationState<T extends Route> = {\n index: number;\n routes: T[];\n};\n\nexport type Layout = {\n width: number;\n height: number;\n};\n\nexport type Listener = (value: number) => void;\n\nexport type SceneRendererProps = {\n layout: Layout;\n position: Animated.AnimatedInterpolation;\n jumpTo: (key: string) => void;\n};\n\nexport type EventEmitterProps = {\n addEnterListener: (listener: Listener) => () => void;\n};\n\nexport type PagerProps = Omit<\n PagerViewProps,\n | 'initialPage'\n | 'scrollEnabled'\n | 'onPageScroll'\n | 'onPageSelected'\n | 'onPageScrollStateChanged'\n | 'keyboardDismissMode'\n | 'children'\n> & {\n keyboardDismissMode?: 'none' | 'on-drag' | 'auto';\n swipeEnabled?: boolean;\n onSwipeStart?: () => void;\n onSwipeEnd?: () => void;\n};\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type { Animated } from 'react-native';\nimport type { PagerViewProps } from 'react-native-pager-view';\n\nexport type Route = {\n key: string;\n icon?: string;\n title?: string;\n accessible?: boolean;\n accessibilityLabel?: string;\n testID?: string;\n};\n\nexport type Event = {\n defaultPrevented: boolean;\n preventDefault(): void;\n};\n\nexport type Scene<T extends Route> = {\n route: T;\n};\n\nexport type NavigationState<T extends Route> = {\n index: number;\n routes: T[];\n};\n\nexport type Layout = {\n width: number;\n height: number;\n};\n\nexport type Listener = (value: number) => void;\n\nexport type SceneRendererProps = {\n layout: Layout;\n position: Animated.AnimatedInterpolation;\n jumpTo: (key: string) => void;\n};\n\nexport type EventEmitterProps = {\n addEnterListener: (listener: Listener) => () => void;\n};\n\nexport type PagerProps = Omit<\n PagerViewProps,\n | 'initialPage'\n | 'scrollEnabled'\n | 'onPageScroll'\n | 'onPageSelected'\n | 'onPageScrollStateChanged'\n | 'keyboardDismissMode'\n | 'children'\n> & {\n keyboardDismissMode?: 'none' | 'on-drag' | 'auto';\n swipeEnabled?: boolean;\n animationEnabled?: boolean;\n onSwipeStart?: () => void;\n onSwipeEnd?: () => void;\n};\n"],"mappings":""}
|
|
@@ -10,5 +10,5 @@ declare type Props<T extends Route> = PagerProps & {
|
|
|
10
10
|
jumpTo: (key: string) => void;
|
|
11
11
|
}) => React.ReactElement;
|
|
12
12
|
};
|
|
13
|
-
export default function PagerViewAdapter<T extends Route>({ keyboardDismissMode, swipeEnabled, navigationState, onIndexChange, onSwipeStart, onSwipeEnd, children, style, ...rest }: Props<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
13
|
+
export default function PagerViewAdapter<T extends Route>({ keyboardDismissMode, swipeEnabled, navigationState, onIndexChange, onSwipeStart, onSwipeEnd, children, style, animationEnabled, ...rest }: Props<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
14
14
|
export {};
|
|
@@ -11,5 +11,5 @@ declare type Props<T extends Route> = PagerProps & {
|
|
|
11
11
|
jumpTo: (key: string) => void;
|
|
12
12
|
}) => React.ReactElement;
|
|
13
13
|
};
|
|
14
|
-
export default function PanResponderAdapter<T extends Route>({ layout, keyboardDismissMode, swipeEnabled, navigationState, onIndexChange, onSwipeStart, onSwipeEnd, children, style, }: Props<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
14
|
+
export default function PanResponderAdapter<T extends Route>({ layout, keyboardDismissMode, swipeEnabled, navigationState, onIndexChange, onSwipeStart, onSwipeEnd, children, style, animationEnabled, }: Props<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
15
15
|
export {};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { SceneRendererProps } from './types';
|
|
3
|
+
declare type SceneProps = {
|
|
4
|
+
route: any;
|
|
5
|
+
} & Omit<SceneRendererProps, 'layout'>;
|
|
3
6
|
export default function SceneMap<T extends any>(scenes: {
|
|
4
7
|
[key: string]: React.ComponentType<T>;
|
|
5
|
-
}): ({ route, jumpTo, position }:
|
|
6
|
-
|
|
7
|
-
}) => JSX.Element;
|
|
8
|
+
}): ({ route, jumpTo, position }: SceneProps) => JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -11,22 +11,5 @@ declare type Props<T extends Route> = SceneRendererProps & EventEmitterProps & {
|
|
|
11
11
|
}) => React.ReactNode;
|
|
12
12
|
style?: StyleProp<ViewStyle>;
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
loading: boolean;
|
|
16
|
-
};
|
|
17
|
-
export default class SceneView<T extends Route> extends React.Component<Props<T>, State> {
|
|
18
|
-
static getDerivedStateFromProps(props: Props<Route>, state: State): {
|
|
19
|
-
loading: boolean;
|
|
20
|
-
} | null;
|
|
21
|
-
state: {
|
|
22
|
-
loading: boolean;
|
|
23
|
-
};
|
|
24
|
-
componentDidMount(): void;
|
|
25
|
-
componentDidUpdate(prevProps: Props<T>, prevState: State): void;
|
|
26
|
-
componentWillUnmount(): void;
|
|
27
|
-
private timerHandler;
|
|
28
|
-
private unsubscribe;
|
|
29
|
-
private handleEnter;
|
|
30
|
-
render(): JSX.Element;
|
|
31
|
-
}
|
|
14
|
+
export default function SceneView<T extends Route>({ children, navigationState, lazy, layout, index, lazyPreloadDistance, addEnterListener, style, }: Props<T>): JSX.Element;
|
|
32
15
|
export {};
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
3
3
|
import { Props as TabBarItemProps } from './TabBarItem';
|
|
4
4
|
import { Props as IndicatorProps } from './TabBarIndicator';
|
|
5
|
-
import type { Route, Scene, SceneRendererProps, NavigationState,
|
|
5
|
+
import type { Route, Scene, SceneRendererProps, NavigationState, Event } from './types';
|
|
6
6
|
export declare type Props<T extends Route> = SceneRendererProps & {
|
|
7
7
|
navigationState: NavigationState<T>;
|
|
8
8
|
scrollEnabled?: boolean;
|
|
@@ -11,10 +11,10 @@ export declare type Props<T extends Route> = SceneRendererProps & {
|
|
|
11
11
|
inactiveColor?: string;
|
|
12
12
|
pressColor?: string;
|
|
13
13
|
pressOpacity?: number;
|
|
14
|
-
getLabelText
|
|
15
|
-
getAccessible
|
|
16
|
-
getAccessibilityLabel
|
|
17
|
-
getTestID
|
|
14
|
+
getLabelText?: (scene: Scene<T>) => string | undefined;
|
|
15
|
+
getAccessible?: (scene: Scene<T>) => boolean | undefined;
|
|
16
|
+
getAccessibilityLabel?: (scene: Scene<T>) => string | undefined;
|
|
17
|
+
getTestID?: (scene: Scene<T>) => string | undefined;
|
|
18
18
|
renderLabel?: (scene: Scene<T> & {
|
|
19
19
|
focused: boolean;
|
|
20
20
|
color: string;
|
|
@@ -24,7 +24,7 @@ export declare type Props<T extends Route> = SceneRendererProps & {
|
|
|
24
24
|
color: string;
|
|
25
25
|
}) => React.ReactNode;
|
|
26
26
|
renderBadge?: (scene: Scene<T>) => React.ReactNode;
|
|
27
|
-
renderIndicator
|
|
27
|
+
renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
|
|
28
28
|
renderTabBarItem?: (props: TabBarItemProps<T> & {
|
|
29
29
|
key: string;
|
|
30
30
|
}) => React.ReactElement;
|
|
@@ -38,35 +38,4 @@ export declare type Props<T extends Route> = SceneRendererProps & {
|
|
|
38
38
|
style?: StyleProp<ViewStyle>;
|
|
39
39
|
gap?: number;
|
|
40
40
|
};
|
|
41
|
-
|
|
42
|
-
layout: Layout;
|
|
43
|
-
tabWidths: {
|
|
44
|
-
[key: string]: number;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
export default class TabBar<T extends Route> extends React.Component<Props<T>, State> {
|
|
48
|
-
static defaultProps: {
|
|
49
|
-
getLabelText: ({ route }: Scene<Route>) => string | undefined;
|
|
50
|
-
getAccessible: ({ route }: Scene<Route>) => boolean;
|
|
51
|
-
getAccessibilityLabel: ({ route }: Scene<Route>) => string | undefined;
|
|
52
|
-
getTestID: ({ route }: Scene<Route>) => string | undefined;
|
|
53
|
-
renderIndicator: (props: IndicatorProps<Route>) => JSX.Element;
|
|
54
|
-
gap: number;
|
|
55
|
-
};
|
|
56
|
-
state: State;
|
|
57
|
-
componentDidUpdate(prevProps: Props<T>, prevState: State): void;
|
|
58
|
-
private measuredTabWidths;
|
|
59
|
-
private scrollAmount;
|
|
60
|
-
private flatListRef;
|
|
61
|
-
private getFlattenedTabWidth;
|
|
62
|
-
private getComputedTabWidth;
|
|
63
|
-
private getMaxScrollDistance;
|
|
64
|
-
private getTabBarWidth;
|
|
65
|
-
private normalizeScrollValue;
|
|
66
|
-
private getScrollAmount;
|
|
67
|
-
private resetScroll;
|
|
68
|
-
private handleLayout;
|
|
69
|
-
private getTranslateX;
|
|
70
|
-
render(): JSX.Element;
|
|
71
|
-
}
|
|
72
|
-
export {};
|
|
41
|
+
export default function TabBar<T extends Route>({ getLabelText, getAccessible, getAccessibilityLabel, getTestID, renderIndicator, gap, scrollEnabled, jumpTo, navigationState, position, activeColor, bounces, contentContainerStyle, inactiveColor, indicatorContainerStyle, indicatorStyle, labelStyle, onTabLongPress, onTabPress, pressColor, pressOpacity, renderBadge, renderIcon, renderLabel, renderTabBarItem, style, tabStyle, }: Props<T>): JSX.Element;
|