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.
- package/{LICENSE.md → LICENSE} +0 -0
- package/README.md +5 -36
- package/lib/commonjs/PagerViewAdapter.js +2 -1
- package/lib/commonjs/PagerViewAdapter.js.map +1 -1
- package/lib/commonjs/PanResponderAdapter.js +2 -1
- 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 +358 -325
- 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 +2 -2
- package/lib/commonjs/TabView.js.map +1 -1
- package/lib/commonjs/index.js +3 -3
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/PagerViewAdapter.js +2 -1
- package/lib/module/PagerViewAdapter.js.map +1 -1
- package/lib/module/PanResponderAdapter.js +3 -2
- 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 +54 -99
- package/lib/module/SceneView.js.map +1 -1
- package/lib/module/TabBar.js +355 -324
- package/lib/module/TabBar.js.map +1 -1
- package/lib/module/TabBarIndicator.js +75 -93
- 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 +2 -2
- package/lib/module/TabView.js.map +1 -1
- package/lib/module/index.js +2 -2
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/{Pager.android.d.ts → src/Pager.android.d.ts} +0 -0
- package/lib/typescript/{Pager.d.ts → src/Pager.d.ts} +0 -0
- package/lib/typescript/{Pager.ios.d.ts → src/Pager.ios.d.ts} +0 -0
- package/lib/typescript/{PagerViewAdapter.d.ts → src/PagerViewAdapter.d.ts} +1 -1
- package/lib/typescript/{PanResponderAdapter.d.ts → src/PanResponderAdapter.d.ts} +1 -1
- package/lib/typescript/{PlatformPressable.d.ts → src/PlatformPressable.d.ts} +0 -0
- package/lib/typescript/{SceneMap.d.ts → src/SceneMap.d.ts} +5 -3
- package/lib/typescript/src/SceneView.d.ts +15 -0
- package/lib/typescript/src/TabBar.d.ts +42 -0
- package/lib/typescript/src/TabBarIndicator.d.ts +12 -0
- package/lib/typescript/{TabBarItem.d.ts → src/TabBarItem.d.ts} +5 -7
- package/lib/typescript/{TabView.d.ts → src/TabView.d.ts} +1 -1
- package/lib/typescript/{index.d.ts → src/index.d.ts} +7 -7
- package/lib/typescript/{types.d.ts → src/types.d.ts} +0 -0
- package/lib/typescript/{useAnimatedValue.d.ts → src/useAnimatedValue.d.ts} +0 -0
- package/package.json +28 -58
- package/src/PagerViewAdapter.tsx +11 -5
- package/src/PanResponderAdapter.tsx +16 -12
- package/src/SceneMap.tsx +12 -7
- package/src/SceneView.tsx +73 -108
- package/src/TabBar.tsx +506 -401
- package/src/TabBarIndicator.tsx +114 -117
- package/src/TabBarItem.tsx +230 -200
- package/src/TabView.tsx +6 -5
- package/src/index.tsx +7 -12
- package/lib/typescript/SceneView.d.ts +0 -32
- package/lib/typescript/TabBar.d.ts +0 -72
- package/lib/typescript/TabBarIndicator.d.ts +0 -20
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 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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"}
|
package/lib/module/TabView.js
CHANGED
|
@@ -2,9 +2,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { StyleSheet, View } from 'react-native';
|
|
5
|
-
import TabBar from './TabBar';
|
|
6
|
-
import SceneView from './SceneView';
|
|
7
5
|
import Pager from './Pager';
|
|
6
|
+
import SceneView from './SceneView';
|
|
7
|
+
import TabBar from './TabBar';
|
|
8
8
|
export default function TabView(_ref) {
|
|
9
9
|
let {
|
|
10
10
|
onIndexChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","Pager","SceneView","TabBar","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 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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"}
|
package/lib/module/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
export { default as SceneMap } from './SceneMap';
|
|
1
2
|
export { default as TabBar } from './TabBar';
|
|
2
|
-
export { default as TabView } from './TabView';
|
|
3
3
|
export { default as TabBarIndicator } from './TabBarIndicator';
|
|
4
4
|
export { default as TabBarItem } from './TabBarItem';
|
|
5
|
-
export { default as
|
|
5
|
+
export { default as TabView } from './TabView';
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["default","
|
|
1
|
+
{"version":3,"names":["default","SceneMap","TabBar","TabBarIndicator","TabBarItem","TabView"],"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,SAASA,OAAO,IAAIC,QAApB,QAAoC,YAApC;AAEA,SAASD,OAAO,IAAIE,MAApB,QAAkC,UAAlC;AAEA,SAASF,OAAO,IAAIG,eAApB,QAA2C,mBAA3C;AAEA,SAASH,OAAO,IAAII,UAApB,QAAsC,cAAtC;AAEA,SAASJ,OAAO,IAAIK,OAApB,QAAmC,WAAnC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
|
-
import type {
|
|
3
|
+
import type { EventEmitterProps, NavigationState, PagerProps, Route } from './types';
|
|
4
4
|
declare type Props<T extends Route> = PagerProps & {
|
|
5
5
|
onIndexChange: (index: number) => void;
|
|
6
6
|
navigationState: NavigationState<T>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
|
-
import type {
|
|
3
|
+
import type { EventEmitterProps, Layout, NavigationState, PagerProps, Route } from './types';
|
|
4
4
|
declare type Props<T extends Route> = PagerProps & {
|
|
5
5
|
layout: Layout;
|
|
6
6
|
onIndexChange: (index: number) => void;
|
|
File without changes
|
|
@@ -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 {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import type { EventEmitterProps, NavigationState, Route, SceneRendererProps } from './types';
|
|
4
|
+
declare type Props<T extends Route> = SceneRendererProps & EventEmitterProps & {
|
|
5
|
+
navigationState: NavigationState<T>;
|
|
6
|
+
lazy: boolean;
|
|
7
|
+
lazyPreloadDistance: number;
|
|
8
|
+
index: number;
|
|
9
|
+
children: (props: {
|
|
10
|
+
loading: boolean;
|
|
11
|
+
}) => React.ReactNode;
|
|
12
|
+
style?: StyleProp<ViewStyle>;
|
|
13
|
+
};
|
|
14
|
+
export default function SceneView<T extends Route>({ children, navigationState, lazy, layout, index, lazyPreloadDistance, addEnterListener, style, }: Props<T>): JSX.Element;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import { Props as IndicatorProps } from './TabBarIndicator';
|
|
4
|
+
import { Props as TabBarItemProps } from './TabBarItem';
|
|
5
|
+
import type { Event, NavigationState, Route, Scene, SceneRendererProps } from './types';
|
|
6
|
+
export declare type Props<T extends Route> = SceneRendererProps & {
|
|
7
|
+
navigationState: NavigationState<T>;
|
|
8
|
+
scrollEnabled?: boolean;
|
|
9
|
+
bounces?: boolean;
|
|
10
|
+
activeColor?: string;
|
|
11
|
+
inactiveColor?: string;
|
|
12
|
+
pressColor?: string;
|
|
13
|
+
pressOpacity?: number;
|
|
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
|
+
renderLabel?: (scene: Scene<T> & {
|
|
19
|
+
focused: boolean;
|
|
20
|
+
color: string;
|
|
21
|
+
}) => React.ReactNode;
|
|
22
|
+
renderIcon?: (scene: Scene<T> & {
|
|
23
|
+
focused: boolean;
|
|
24
|
+
color: string;
|
|
25
|
+
}) => React.ReactNode;
|
|
26
|
+
renderBadge?: (scene: Scene<T>) => React.ReactNode;
|
|
27
|
+
renderIndicator?: (props: IndicatorProps<T>) => React.ReactNode;
|
|
28
|
+
renderTabBarItem?: (props: TabBarItemProps<T> & {
|
|
29
|
+
key: string;
|
|
30
|
+
}) => React.ReactElement;
|
|
31
|
+
onTabPress?: (scene: Scene<T> & Event) => void;
|
|
32
|
+
onTabLongPress?: (scene: Scene<T>) => void;
|
|
33
|
+
tabStyle?: StyleProp<ViewStyle>;
|
|
34
|
+
indicatorStyle?: StyleProp<ViewStyle>;
|
|
35
|
+
indicatorContainerStyle?: StyleProp<ViewStyle>;
|
|
36
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
37
|
+
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
38
|
+
style?: StyleProp<ViewStyle>;
|
|
39
|
+
gap?: number;
|
|
40
|
+
testID?: string;
|
|
41
|
+
};
|
|
42
|
+
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, testID, }: Props<T>): JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StyleProp, ViewStyle } from 'react-native';
|
|
3
|
+
import type { NavigationState, Route, SceneRendererProps } from './types';
|
|
4
|
+
export declare type GetTabWidth = (index: number) => number;
|
|
5
|
+
export declare type Props<T extends Route> = SceneRendererProps & {
|
|
6
|
+
navigationState: NavigationState<T>;
|
|
7
|
+
width: string | number;
|
|
8
|
+
style?: StyleProp<ViewStyle>;
|
|
9
|
+
getTabWidth: GetTabWidth;
|
|
10
|
+
gap?: number;
|
|
11
|
+
};
|
|
12
|
+
export default function TabBarIndicator<T extends Route>({ getTabWidth, layout, navigationState, position, width, gap, style, }: Props<T>): JSX.Element;
|