1 | import type { HeaderOptions } from '@react-navigation/elements';
|
2 | import type { Descriptor, NavigationHelpers, NavigationProp, ParamListBase, RouteProp, TabActionHelpers, TabNavigationState } from '@react-navigation/native';
|
3 | import type * as React from 'react';
|
4 | import type { Animated, GestureResponderEvent, StyleProp, TextStyle, TouchableWithoutFeedbackProps, ViewStyle } from 'react-native';
|
5 | import type { EdgeInsets } from 'react-native-safe-area-context';
|
6 | export declare type Layout = {
|
7 | width: number;
|
8 | height: number;
|
9 | };
|
10 | export declare type BottomTabNavigationEventMap = {
|
11 | /**
|
12 | * Event which fires on tapping on the tab in the tab bar.
|
13 | */
|
14 | tabPress: {
|
15 | data: undefined;
|
16 | canPreventDefault: true;
|
17 | };
|
18 | /**
|
19 | * Event which fires on long press on the tab in the tab bar.
|
20 | */
|
21 | tabLongPress: {
|
22 | data: undefined;
|
23 | };
|
24 | };
|
25 | export declare type LabelPosition = 'beside-icon' | 'below-icon';
|
26 | export declare type BottomTabNavigationHelpers = NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
|
27 | export declare type BottomTabNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, TabNavigationState<ParamList>, BottomTabNavigationOptions, BottomTabNavigationEventMap> & TabActionHelpers<ParamList>;
|
28 | export declare type BottomTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
|
29 | navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
|
30 | route: RouteProp<ParamList, RouteName>;
|
31 | };
|
32 | export declare type TimingKeyboardAnimationConfig = {
|
33 | animation: 'timing';
|
34 | config?: Omit<Partial<Animated.TimingAnimationConfig>, 'toValue' | 'useNativeDriver'>;
|
35 | };
|
36 | export declare type SpringKeyboardAnimationConfig = {
|
37 | animation: 'spring';
|
38 | config?: Omit<Partial<Animated.SpringAnimationConfig>, 'toValue' | 'useNativeDriver'>;
|
39 | };
|
40 | export declare type TabBarVisibilityAnimationConfig = TimingKeyboardAnimationConfig | SpringKeyboardAnimationConfig;
|
41 | export declare type BottomTabNavigationOptions = HeaderOptions & {
|
42 | /**
|
43 | * Title text for the screen.
|
44 | */
|
45 | title?: string;
|
46 | /**
|
47 | * Title string of a tab displayed in the tab bar
|
48 | * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
|
49 | *
|
50 | * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
|
51 | */
|
52 | tabBarLabel?: string | ((props: {
|
53 | focused: boolean;
|
54 | color: string;
|
55 | position: LabelPosition;
|
56 | }) => React.ReactNode);
|
57 | /**
|
58 | * Whether the tab label should be visible. Defaults to `true`.
|
59 | */
|
60 | tabBarShowLabel?: boolean;
|
61 | /**
|
62 | * Whether the label is shown below the icon or beside the icon.
|
63 | *
|
64 | * - `below-icon`: the label is shown below the icon (typical for iPhones)
|
65 | * - `beside-icon` the label is shown next to the icon (typical for iPad)
|
66 | *
|
67 | * By default, the position is chosen automatically based on device width.
|
68 | */
|
69 | tabBarLabelPosition?: LabelPosition;
|
70 | /**
|
71 | * Style object for the tab label.
|
72 | */
|
73 | tabBarLabelStyle?: StyleProp<TextStyle>;
|
74 | /**
|
75 | * Whether label font should scale to respect Text Size accessibility settings.
|
76 | */
|
77 | tabBarAllowFontScaling?: boolean;
|
78 | /**
|
79 | * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
|
80 | */
|
81 | tabBarIcon?: (props: {
|
82 | focused: boolean;
|
83 | color: string;
|
84 | size: number;
|
85 | }) => React.ReactNode;
|
86 | /**
|
87 | * Style object for the tab icon.
|
88 | */
|
89 | tabBarIconStyle?: StyleProp<TextStyle>;
|
90 | /**
|
91 | * Text to show in a badge on the tab icon.
|
92 | */
|
93 | tabBarBadge?: number | string;
|
94 | /**
|
95 | * Custom style for the tab bar badge.
|
96 | * You can specify a background color or text color here.
|
97 | */
|
98 | tabBarBadgeStyle?: StyleProp<TextStyle>;
|
99 | /**
|
100 | * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
|
101 | * It's recommended to set this if you don't have a label for the tab.
|
102 | */
|
103 | tabBarAccessibilityLabel?: string;
|
104 | /**
|
105 | * ID to locate this tab button in tests.
|
106 | */
|
107 | tabBarTestID?: string;
|
108 | /**
|
109 | * Function which returns a React element to render as the tab bar button.
|
110 | * Renders `Pressable` by default.
|
111 | */
|
112 | tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
|
113 | /**
|
114 | * Color for the icon and label in the active tab.
|
115 | */
|
116 | tabBarActiveTintColor?: string;
|
117 | /**
|
118 | * Color for the icon and label in the inactive tabs.
|
119 | */
|
120 | tabBarInactiveTintColor?: string;
|
121 | /**
|
122 | * Background color for the active tab.
|
123 | */
|
124 | tabBarActiveBackgroundColor?: string;
|
125 | /**
|
126 | * Background color for the inactive tabs.
|
127 | */
|
128 | tabBarInactiveBackgroundColor?: string;
|
129 | /**
|
130 | * Style object for the tab item container.
|
131 | */
|
132 | tabBarItemStyle?: StyleProp<ViewStyle>;
|
133 | /**
|
134 | * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
|
135 | */
|
136 | tabBarHideOnKeyboard?: boolean;
|
137 | /**
|
138 | * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
|
139 | */
|
140 | tabBarVisibilityAnimationConfig?: {
|
141 | show?: TabBarVisibilityAnimationConfig;
|
142 | hide?: TabBarVisibilityAnimationConfig;
|
143 | };
|
144 | /**
|
145 | * Style object for the tab bar container.
|
146 | */
|
147 | tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
148 | /**
|
149 | * Function which returns a React Element to use as background for the tab bar.
|
150 | * You could render an image, a gradient, blur view etc.
|
151 | *
|
152 | * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
|
153 | * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
|
154 | */
|
155 | tabBarBackground?: () => React.ReactNode;
|
156 | /**
|
157 | * Whether this screens should render the first time it's accessed. Defaults to `true`.
|
158 | * Set it to `false` if you want to render the screen on initial render.
|
159 | */
|
160 | lazy?: boolean;
|
161 | /**
|
162 | * Function that given returns a React Element to display as a header.
|
163 | */
|
164 | header?: (props: BottomTabHeaderProps) => React.ReactNode;
|
165 | /**
|
166 | * Whether to show the header. Setting this to `false` hides the header.
|
167 | * Defaults to `true`.
|
168 | */
|
169 | headerShown?: boolean;
|
170 | /**
|
171 | * Whether this screen should be unmounted when navigating away from it.
|
172 | * Defaults to `false`.
|
173 | */
|
174 | unmountOnBlur?: boolean;
|
175 | /**
|
176 | * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
|
177 | * Defaults to `true` when `enableFreeze()` is run at the top of the application.
|
178 | * Requires `react-native-screens` version >=3.16.0.
|
179 | *
|
180 | * Only supported on iOS and Android.
|
181 | */
|
182 | freezeOnBlur?: boolean;
|
183 | };
|
184 | export declare type BottomTabDescriptor = Descriptor<BottomTabNavigationOptions, BottomTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
|
185 | export declare type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
|
186 | export declare type BottomTabNavigationConfig = {
|
187 | /**
|
188 | * Function that returns a React element to display as the tab bar.
|
189 | */
|
190 | tabBar?: (props: BottomTabBarProps) => React.ReactNode;
|
191 | /**
|
192 | * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
|
193 | * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
|
194 | */
|
195 | safeAreaInsets?: {
|
196 | top?: number;
|
197 | right?: number;
|
198 | bottom?: number;
|
199 | left?: number;
|
200 | };
|
201 | /**
|
202 | * Whether inactive screens should be detached from the view hierarchy to save memory.
|
203 | * Make sure to call `enableScreens` from `react-native-screens` to make it work.
|
204 | * Defaults to `true` on Android.
|
205 | */
|
206 | detachInactiveScreens?: boolean;
|
207 | /**
|
208 | * Style object for the component wrapping the screen content.
|
209 | */
|
210 | sceneContainerStyle?: StyleProp<ViewStyle>;
|
211 | };
|
212 | export declare type BottomTabHeaderProps = {
|
213 | /**
|
214 | * Layout of the screen.
|
215 | */
|
216 | layout: Layout;
|
217 | /**
|
218 | * Options for the current screen.
|
219 | */
|
220 | options: BottomTabNavigationOptions;
|
221 | /**
|
222 | * Route object for the current screen.
|
223 | */
|
224 | route: RouteProp<ParamListBase>;
|
225 | /**
|
226 | * Navigation prop for the header.
|
227 | */
|
228 | navigation: BottomTabNavigationProp<ParamListBase>;
|
229 | };
|
230 | export declare type BottomTabBarProps = {
|
231 | state: TabNavigationState<ParamListBase>;
|
232 | descriptors: BottomTabDescriptorMap;
|
233 | navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
|
234 | insets: EdgeInsets;
|
235 | };
|
236 | export declare type BottomTabBarButtonProps = Omit<TouchableWithoutFeedbackProps, 'onPress'> & {
|
237 | to?: string;
|
238 | children: React.ReactNode;
|
239 | onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void;
|
240 | };
|