1 | import * as React from 'react';
|
2 | import {
|
3 | AccessibilityRole,
|
4 | AccessibilityStates,
|
5 | StyleProp,
|
6 | TextStyle,
|
7 | ViewStyle,
|
8 | } from 'react-native';
|
9 | import SafeAreaView from 'react-native-safe-area-view';
|
10 | import Animated from 'react-native-reanimated';
|
11 | import {
|
12 | NavigationRoute,
|
13 | NavigationState,
|
14 | NavigationScreenProp,
|
15 | NavigationParams,
|
16 | NavigationDescriptor,
|
17 | NavigationScreenConfig,
|
18 | SupportedThemes,
|
19 | } from 'react-navigation';
|
20 |
|
21 | export type NavigationTabState = NavigationState;
|
22 |
|
23 | export type NavigationTabProp<
|
24 | State = NavigationRoute,
|
25 | Params = NavigationParams
|
26 | > = NavigationScreenProp<State, Params> & {
|
27 | jumpTo(routeName: string, key?: string): void;
|
28 | };
|
29 |
|
30 | export type ThemedColor =
|
31 | | string
|
32 | | {
|
33 | light: string;
|
34 | dark: string;
|
35 | };
|
36 |
|
37 | export type Orientation = 'horizontal' | 'vertical';
|
38 |
|
39 | export type LabelPosition = 'beside-icon' | 'below-icon';
|
40 |
|
41 | interface BaseAnimation {
|
42 | useNativeDriver?: boolean;
|
43 | }
|
44 | interface TimingAnimation extends BaseAnimation {
|
45 | easing?: (value: number) => number;
|
46 | duration?: number;
|
47 | delay?: number;
|
48 | }
|
49 | interface SpringAnimation extends BaseAnimation {
|
50 | overshootClamping?: boolean;
|
51 | restDisplacementThreshold?: number;
|
52 | restSpeedThreshold?: number;
|
53 | velocity?: number | { x: number; y: number };
|
54 | bounciness?: number;
|
55 | speed?: number;
|
56 | tension?: number;
|
57 | friction?: number;
|
58 | stiffness?: number;
|
59 | mass?: number;
|
60 | damping?: number;
|
61 | delay?: number;
|
62 | }
|
63 | export type TimingKeyboardAnimationConfig = {
|
64 | animation: 'timing';
|
65 | config?: TimingAnimation;
|
66 | };
|
67 | export type SpringKeyboardAnimationConfig = {
|
68 | animation: 'spring';
|
69 | config?: SpringAnimation;
|
70 | };
|
71 | export type KeyboardAnimationConfig =
|
72 | | TimingKeyboardAnimationConfig
|
73 | | SpringKeyboardAnimationConfig;
|
74 | export type KeyboardHidesTabBarAnimationConfig = {
|
75 | show: KeyboardAnimationConfig;
|
76 | hide: KeyboardAnimationConfig;
|
77 | };
|
78 |
|
79 | export type BottomTabBarOptions = {
|
80 | keyboardHidesTabBar?: boolean;
|
81 | keyboardHidesTabBarAnimationConfig?: Partial<
|
82 | KeyboardHidesTabBarAnimationConfig
|
83 | >;
|
84 | activeTintColor?: ThemedColor;
|
85 | inactiveTintColor?: ThemedColor;
|
86 | activeBackgroundColor?: ThemedColor;
|
87 | inactiveBackgroundColor?: ThemedColor;
|
88 | allowFontScaling?: boolean;
|
89 | showLabel?: boolean;
|
90 | showIcon?: boolean;
|
91 | labelStyle?: StyleProp<TextStyle>;
|
92 | tabStyle?: StyleProp<ViewStyle>;
|
93 | labelPosition?:
|
94 | | LabelPosition
|
95 | | ((options: { deviceOrientation: Orientation }) => LabelPosition);
|
96 | adaptive?: boolean;
|
97 | safeAreaInset?: React.ComponentProps<typeof SafeAreaView>['forceInset'];
|
98 | style?: StyleProp<ViewStyle>;
|
99 | };
|
100 |
|
101 | export type ButtonComponentProps = {
|
102 | route: NavigationRoute;
|
103 | focused: boolean;
|
104 | onPress: () => void;
|
105 | onLongPress: () => void;
|
106 | testID?: string;
|
107 | accessibilityLabel?: string;
|
108 | accessibilityRole?: AccessibilityRole;
|
109 | accessibilityStates?: AccessibilityStates[];
|
110 | style?: StyleProp<ViewStyle>;
|
111 | };
|
112 |
|
113 | export type BottomTabBarProps = BottomTabBarOptions & {
|
114 | navigation: NavigationTabProp;
|
115 | onTabPress: (props: { route: NavigationRoute }) => void;
|
116 | onTabLongPress: (props: { route: NavigationRoute }) => void;
|
117 | getAccessibilityLabel: (props: {
|
118 | route: NavigationRoute;
|
119 | }) => string | undefined;
|
120 | getAccessibilityRole: (props: {
|
121 | route: NavigationRoute;
|
122 | }) => AccessibilityRole | undefined;
|
123 | getAccessibilityStates: (props: {
|
124 | route: NavigationRoute;
|
125 | focused: boolean;
|
126 | }) => AccessibilityStates[];
|
127 | getButtonComponent: (props: {
|
128 | route: NavigationRoute;
|
129 | }) => React.ComponentType<ButtonComponentProps> | undefined;
|
130 | getLabelText: (props: {
|
131 | route: NavigationRoute;
|
132 | }) =>
|
133 | | ((scene: {
|
134 | focused: boolean;
|
135 | tintColor?: string;
|
136 | orientation?: 'horizontal' | 'vertical';
|
137 | }) => string | undefined)
|
138 | | string
|
139 | | undefined;
|
140 | getTestID: (props: { route: NavigationRoute }) => string | undefined;
|
141 | renderIcon: (props: {
|
142 | route: NavigationRoute;
|
143 | focused: boolean;
|
144 | tintColor?: string;
|
145 | horizontal?: boolean;
|
146 | }) => React.ReactNode;
|
147 | dimensions: { width: number; height: number };
|
148 | isLandscape: boolean;
|
149 | jumpTo: (key: string) => void;
|
150 | screenProps: unknown;
|
151 | };
|
152 |
|
153 | export type MaterialTabBarOptions = {
|
154 | activeTintColor?: string;
|
155 | allowFontScaling?: boolean;
|
156 | bounces?: boolean;
|
157 | inactiveTintColor?: string;
|
158 | pressColor?: string;
|
159 | pressOpacity?: number;
|
160 | scrollEnabled?: boolean;
|
161 | showIcon?: boolean;
|
162 | showLabel?: boolean;
|
163 | upperCaseLabel?: boolean;
|
164 | tabStyle?: StyleProp<ViewStyle>;
|
165 | indicatorStyle?: StyleProp<ViewStyle>;
|
166 | iconStyle?: StyleProp<ViewStyle>;
|
167 | labelStyle?: StyleProp<TextStyle>;
|
168 | contentContainerStyle?: StyleProp<ViewStyle>;
|
169 | style?: StyleProp<ViewStyle>;
|
170 | };
|
171 |
|
172 | export type MaterialTabBarProps = MaterialTabBarOptions & {
|
173 | layout: {
|
174 | width: number;
|
175 | height: number;
|
176 | };
|
177 | position: Animated.Node<number>;
|
178 | jumpTo: (key: string) => void;
|
179 | getLabelText: (scene: {
|
180 | route: NavigationRoute;
|
181 | }) =>
|
182 | | ((scene: { focused: boolean; tintColor: string }) => string | undefined)
|
183 | | string
|
184 | | undefined;
|
185 | getAccessible?: (scene: { route: NavigationRoute }) => boolean | undefined;
|
186 | getAccessibilityLabel: (scene: {
|
187 | route: NavigationRoute;
|
188 | }) => string | undefined;
|
189 | getTestID: (scene: { route: NavigationRoute }) => string | undefined;
|
190 | renderIcon: (scene: {
|
191 | route: NavigationRoute;
|
192 | focused: boolean;
|
193 | tintColor: string;
|
194 | horizontal?: boolean;
|
195 | }) => React.ReactNode;
|
196 | renderBadge?: (scene: { route: NavigationRoute }) => React.ReactNode;
|
197 | onTabPress?: (scene: { route: NavigationRoute }) => void;
|
198 | onTabLongPress?: (scene: { route: NavigationRoute }) => void;
|
199 | tabBarPosition?: 'top' | 'bottom';
|
200 | screenProps: unknown;
|
201 | navigation: NavigationTabProp;
|
202 | };
|
203 |
|
204 | export type NavigationCommonTabOptions = {
|
205 | title?: string;
|
206 | tabBarLabel?: React.ReactNode;
|
207 | tabBarVisible?: boolean;
|
208 | tabBarAccessibilityLabel?: string;
|
209 | tabBarTestID?: string;
|
210 | tabBarIcon?:
|
211 | | React.ReactNode
|
212 | | ((props: {
|
213 | focused: boolean;
|
214 | tintColor?: string;
|
215 | horizontal?: boolean;
|
216 | }) => React.ReactNode);
|
217 | tabBarOnPress?: (props: {
|
218 | navigation: NavigationTabProp;
|
219 | defaultHandler: () => void;
|
220 | }) => void;
|
221 | tabBarOnLongPress?: (props: {
|
222 | navigation: NavigationTabProp;
|
223 | defaultHandler: () => void;
|
224 | }) => void;
|
225 | };
|
226 |
|
227 | export type NavigationBottomTabOptions = NavigationCommonTabOptions & {
|
228 | tabBarButtonComponent?: React.ComponentType<ButtonComponentProps>;
|
229 | };
|
230 |
|
231 | export type NavigationMaterialTabOptions = NavigationCommonTabOptions & {
|
232 | tabBarButtonComponent?: React.ComponentType<any>;
|
233 | swipeEnabled?: boolean | ((state: NavigationState) => boolean);
|
234 | };
|
235 |
|
236 | export type NavigationTabScreenProps<
|
237 | Params = NavigationParams,
|
238 | ScreenProps = unknown
|
239 | > = {
|
240 | theme: SupportedThemes;
|
241 | navigation: NavigationTabProp<NavigationRoute, Params>;
|
242 | screenProps: ScreenProps;
|
243 | };
|
244 |
|
245 | export type NavigationMaterialTabScreenComponent<
|
246 | Params = NavigationParams,
|
247 | ScreenProps = unknown
|
248 | > = React.ComponentType<NavigationTabScreenProps<Params, ScreenProps>> & {
|
249 | navigationOptions?: NavigationScreenConfig<
|
250 | NavigationMaterialTabOptions,
|
251 | NavigationTabProp<NavigationRoute, Params>,
|
252 | ScreenProps
|
253 | >;
|
254 | };
|
255 |
|
256 | export type NavigationBottomTabScreenComponent<
|
257 | Params = NavigationParams,
|
258 | ScreenProps = unknown
|
259 | > = React.ComponentType<NavigationTabScreenProps<Params, ScreenProps>> & {
|
260 | navigationOptions?: NavigationScreenConfig<
|
261 | NavigationBottomTabOptions,
|
262 | NavigationTabProp<NavigationRoute, Params>,
|
263 | ScreenProps
|
264 | >;
|
265 | };
|
266 |
|
267 | export type SceneDescriptorMap = {
|
268 | [key: string]: NavigationDescriptor<
|
269 | NavigationParams,
|
270 | NavigationBottomTabOptions | NavigationMaterialTabOptions,
|
271 | NavigationTabProp
|
272 | >;
|
273 | };
|
274 |
|
\ | No newline at end of file |