@react-navigation/bottom-tabs 7.10.1 → 8.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/lib/module/index.js +3 -2
  2. package/lib/module/index.js.map +1 -1
  3. package/lib/module/navigators/createBottomTabNavigator.js +27 -9
  4. package/lib/module/navigators/createBottomTabNavigator.js.map +1 -1
  5. package/lib/module/utils/BottomTabAnimationContext.js +5 -0
  6. package/lib/module/utils/BottomTabAnimationContext.js.map +1 -0
  7. package/lib/module/utils/useBottomTabAnimation.js +12 -0
  8. package/lib/module/utils/useBottomTabAnimation.js.map +1 -0
  9. package/lib/module/utils/useTabBarPosition.js +34 -0
  10. package/lib/module/utils/useTabBarPosition.js.map +1 -0
  11. package/lib/module/views/BottomTabBar.js +46 -49
  12. package/lib/module/views/BottomTabBar.js.map +1 -1
  13. package/lib/module/views/BottomTabItem.js +17 -15
  14. package/lib/module/views/BottomTabItem.js.map +1 -1
  15. package/lib/module/views/BottomTabViewCommon.js +16 -0
  16. package/lib/module/views/BottomTabViewCommon.js.map +1 -0
  17. package/lib/module/views/{BottomTabView.js → BottomTabViewCustom.js} +107 -106
  18. package/lib/module/views/BottomTabViewCustom.js.map +1 -0
  19. package/lib/module/views/BottomTabViewNative.android.js +4 -0
  20. package/lib/module/views/BottomTabViewNative.android.js.map +1 -0
  21. package/lib/module/views/BottomTabViewNative.ios.js +4 -0
  22. package/lib/module/views/BottomTabViewNative.ios.js.map +1 -0
  23. package/lib/module/views/BottomTabViewNative.js +5 -0
  24. package/lib/module/views/BottomTabViewNative.js.map +1 -0
  25. package/lib/module/{unstable/NativeBottomTabView.native.js → views/BottomTabViewNativeImpl.js} +103 -80
  26. package/lib/module/views/BottomTabViewNativeImpl.js.map +1 -0
  27. package/lib/module/views/ScreenContent.js +39 -0
  28. package/lib/module/views/ScreenContent.js.map +1 -0
  29. package/lib/module/views/TabBarIcon.js +62 -4
  30. package/lib/module/views/TabBarIcon.js.map +1 -1
  31. package/lib/typescript/src/index.d.ts +4 -3
  32. package/lib/typescript/src/index.d.ts.map +1 -1
  33. package/lib/typescript/src/navigators/createBottomTabNavigator.d.ts +10 -6
  34. package/lib/typescript/src/navigators/createBottomTabNavigator.d.ts.map +1 -1
  35. package/lib/typescript/src/types.d.ts +392 -114
  36. package/lib/typescript/src/types.d.ts.map +1 -1
  37. package/lib/typescript/src/utils/BottomTabAnimationContext.d.ts +4 -0
  38. package/lib/typescript/src/utils/BottomTabAnimationContext.d.ts.map +1 -0
  39. package/lib/typescript/src/utils/useBottomTabAnimation.d.ts +2 -0
  40. package/lib/typescript/src/utils/useBottomTabAnimation.d.ts.map +1 -0
  41. package/lib/typescript/src/utils/useTabBarPosition.d.ts +3 -0
  42. package/lib/typescript/src/utils/useTabBarPosition.d.ts.map +1 -0
  43. package/lib/typescript/src/views/BottomTabBar.d.ts +4 -4
  44. package/lib/typescript/src/views/BottomTabBar.d.ts.map +1 -1
  45. package/lib/typescript/src/views/BottomTabItem.d.ts +16 -14
  46. package/lib/typescript/src/views/BottomTabItem.d.ts.map +1 -1
  47. package/lib/typescript/src/views/{BottomTabView.d.ts → BottomTabViewCommon.d.ts} +2 -2
  48. package/lib/typescript/src/views/BottomTabViewCommon.d.ts.map +1 -0
  49. package/lib/typescript/src/views/BottomTabViewCustom.d.ts +10 -0
  50. package/lib/typescript/src/views/BottomTabViewCustom.d.ts.map +1 -0
  51. package/lib/typescript/src/views/BottomTabViewNative.android.d.ts +2 -0
  52. package/lib/typescript/src/views/BottomTabViewNative.android.d.ts.map +1 -0
  53. package/lib/typescript/src/views/BottomTabViewNative.d.ts +3 -0
  54. package/lib/typescript/src/views/BottomTabViewNative.d.ts.map +1 -0
  55. package/lib/typescript/src/views/BottomTabViewNative.ios.d.ts +2 -0
  56. package/lib/typescript/src/views/BottomTabViewNative.ios.d.ts.map +1 -0
  57. package/lib/typescript/src/views/BottomTabViewNativeImpl.d.ts +10 -0
  58. package/lib/typescript/src/views/BottomTabViewNativeImpl.d.ts.map +1 -0
  59. package/lib/typescript/src/views/ScreenContent.d.ts +13 -0
  60. package/lib/typescript/src/views/ScreenContent.d.ts.map +1 -0
  61. package/lib/typescript/src/views/TabBarIcon.d.ts +10 -10
  62. package/lib/typescript/src/views/TabBarIcon.d.ts.map +1 -1
  63. package/package.json +12 -17
  64. package/src/index.tsx +7 -2
  65. package/src/navigators/createBottomTabNavigator.tsx +78 -27
  66. package/src/types.tsx +425 -122
  67. package/src/utils/BottomTabAnimationContext.tsx +7 -0
  68. package/src/utils/useBottomTabAnimation.tsx +15 -0
  69. package/src/utils/useTabBarPosition.tsx +41 -0
  70. package/src/views/BottomTabBar.tsx +68 -67
  71. package/src/views/BottomTabItem.tsx +39 -34
  72. package/src/views/BottomTabViewCommon.tsx +26 -0
  73. package/src/views/{BottomTabView.tsx → BottomTabViewCustom.tsx} +142 -129
  74. package/src/views/BottomTabViewNative.android.tsx +1 -0
  75. package/src/views/BottomTabViewNative.ios.tsx +1 -0
  76. package/src/views/BottomTabViewNative.tsx +3 -0
  77. package/src/{unstable/NativeBottomTabView.native.tsx → views/BottomTabViewNativeImpl.tsx} +161 -120
  78. package/src/views/ScreenContent.tsx +58 -0
  79. package/src/views/TabBarIcon.tsx +79 -11
  80. package/lib/module/unstable/NativeBottomTabView.js +0 -6
  81. package/lib/module/unstable/NativeBottomTabView.js.map +0 -1
  82. package/lib/module/unstable/NativeBottomTabView.native.js.map +0 -1
  83. package/lib/module/unstable/NativeScreen/NativeScreen.js +0 -152
  84. package/lib/module/unstable/NativeScreen/NativeScreen.js.map +0 -1
  85. package/lib/module/unstable/NativeScreen/debounce.js +0 -12
  86. package/lib/module/unstable/NativeScreen/debounce.js.map +0 -1
  87. package/lib/module/unstable/NativeScreen/types.js +0 -4
  88. package/lib/module/unstable/NativeScreen/types.js.map +0 -1
  89. package/lib/module/unstable/NativeScreen/useAnimatedHeaderHeight.js +0 -12
  90. package/lib/module/unstable/NativeScreen/useAnimatedHeaderHeight.js.map +0 -1
  91. package/lib/module/unstable/NativeScreen/useHeaderConfig.js +0 -304
  92. package/lib/module/unstable/NativeScreen/useHeaderConfig.js.map +0 -1
  93. package/lib/module/unstable/createNativeBottomTabNavigator.js +0 -6
  94. package/lib/module/unstable/createNativeBottomTabNavigator.js.map +0 -1
  95. package/lib/module/unstable/createNativeBottomTabNavigator.native.js +0 -65
  96. package/lib/module/unstable/createNativeBottomTabNavigator.native.js.map +0 -1
  97. package/lib/module/unstable/index.js +0 -16
  98. package/lib/module/unstable/index.js.map +0 -1
  99. package/lib/module/unstable/types.js +0 -4
  100. package/lib/module/unstable/types.js.map +0 -1
  101. package/lib/module/views/BottomTabView.js.map +0 -1
  102. package/lib/module/views/ScreenFallback.js +0 -42
  103. package/lib/module/views/ScreenFallback.js.map +0 -1
  104. package/lib/typescript/src/unstable/NativeBottomTabView.d.ts +0 -10
  105. package/lib/typescript/src/unstable/NativeBottomTabView.d.ts.map +0 -1
  106. package/lib/typescript/src/unstable/NativeBottomTabView.native.d.ts +0 -10
  107. package/lib/typescript/src/unstable/NativeBottomTabView.native.d.ts.map +0 -1
  108. package/lib/typescript/src/unstable/NativeScreen/NativeScreen.d.ts +0 -8
  109. package/lib/typescript/src/unstable/NativeScreen/NativeScreen.d.ts.map +0 -1
  110. package/lib/typescript/src/unstable/NativeScreen/debounce.d.ts +0 -2
  111. package/lib/typescript/src/unstable/NativeScreen/debounce.d.ts.map +0 -1
  112. package/lib/typescript/src/unstable/NativeScreen/types.d.ts +0 -523
  113. package/lib/typescript/src/unstable/NativeScreen/types.d.ts.map +0 -1
  114. package/lib/typescript/src/unstable/NativeScreen/useAnimatedHeaderHeight.d.ts +0 -5
  115. package/lib/typescript/src/unstable/NativeScreen/useAnimatedHeaderHeight.d.ts.map +0 -1
  116. package/lib/typescript/src/unstable/NativeScreen/useHeaderConfig.d.ts +0 -11
  117. package/lib/typescript/src/unstable/NativeScreen/useHeaderConfig.d.ts.map +0 -1
  118. package/lib/typescript/src/unstable/createNativeBottomTabNavigator.d.ts +0 -2
  119. package/lib/typescript/src/unstable/createNativeBottomTabNavigator.d.ts.map +0 -1
  120. package/lib/typescript/src/unstable/createNativeBottomTabNavigator.native.d.ts +0 -16
  121. package/lib/typescript/src/unstable/createNativeBottomTabNavigator.native.d.ts.map +0 -1
  122. package/lib/typescript/src/unstable/index.d.ts +0 -13
  123. package/lib/typescript/src/unstable/index.d.ts.map +0 -1
  124. package/lib/typescript/src/unstable/types.d.ts +0 -319
  125. package/lib/typescript/src/unstable/types.d.ts.map +0 -1
  126. package/lib/typescript/src/views/BottomTabView.d.ts.map +0 -1
  127. package/lib/typescript/src/views/ScreenFallback.d.ts +0 -18
  128. package/lib/typescript/src/views/ScreenFallback.d.ts.map +0 -1
  129. package/src/unstable/NativeBottomTabView.tsx +0 -20
  130. package/src/unstable/NativeScreen/NativeScreen.tsx +0 -212
  131. package/src/unstable/NativeScreen/debounce.tsx +0 -14
  132. package/src/unstable/NativeScreen/types.ts +0 -573
  133. package/src/unstable/NativeScreen/useAnimatedHeaderHeight.tsx +0 -18
  134. package/src/unstable/NativeScreen/useHeaderConfig.tsx +0 -434
  135. package/src/unstable/createNativeBottomTabNavigator.native.tsx +0 -116
  136. package/src/unstable/createNativeBottomTabNavigator.tsx +0 -4
  137. package/src/unstable/index.tsx +0 -23
  138. package/src/unstable/types.tsx +0 -403
  139. package/src/views/ScreenFallback.tsx +0 -50
@@ -1,16 +1,15 @@
1
1
  import type { HeaderOptions, PlatformPressable } from '@react-navigation/elements';
2
2
  import type { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, ParamListBase, RouteProp, TabActionHelpers, TabNavigationState, TabRouterOptions, Theme } from '@react-navigation/native';
3
3
  import type * as React from 'react';
4
- import type { Animated, GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
5
- import type { EdgeInsets } from 'react-native-safe-area-context';
6
- export type Layout = {
7
- width: number;
8
- height: number;
9
- };
4
+ import type { Animated, ColorValue, GestureResponderEvent, ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
5
+ import type { TabBarItemLabelVisibilityMode, TabsScreenBlurEffect, TabsSystemItem } from 'react-native-screens';
6
+ import type { SFSymbol } from 'sf-symbols-typescript';
10
7
  export type Variant = 'uikit' | 'material';
11
8
  export type BottomTabNavigationEventMap = {
12
9
  /**
13
10
  * Event which fires on tapping on the tab in the tab bar.
11
+ *
12
+ * Preventing default is only supported with `custom` implementation.
14
13
  */
15
14
  tabPress: {
16
15
  data: undefined;
@@ -18,6 +17,8 @@ export type BottomTabNavigationEventMap = {
18
17
  };
19
18
  /**
20
19
  * Event which fires on long press on the tab in the tab bar.
20
+ *
21
+ * Only supported with `custom` implementation.
21
22
  */
22
23
  tabLongPress: {
23
24
  data: undefined;
@@ -37,12 +38,12 @@ export type BottomTabNavigationEventMap = {
37
38
  };
38
39
  export type LabelPosition = 'beside-icon' | 'below-icon';
39
40
  export type BottomTabNavigationHelpers = NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
40
- export 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>;
41
- export type BottomTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
42
- navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
41
+ export type BottomTabNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = NavigationProp<ParamList, RouteName, TabNavigationState<ParamList>, BottomTabNavigationOptions, BottomTabNavigationEventMap, TabActionHelpers<ParamList>>;
42
+ export type BottomTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = {
43
+ navigation: BottomTabNavigationProp<ParamList, RouteName>;
43
44
  route: RouteProp<ParamList, RouteName>;
44
45
  };
45
- export type BottomTabOptionsArgs<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = BottomTabScreenProps<ParamList, RouteName, NavigatorID> & {
46
+ export type BottomTabOptionsArgs<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = BottomTabScreenProps<ParamList, RouteName> & {
46
47
  theme: Theme;
47
48
  };
48
49
  export type TimingKeyboardAnimationConfig = {
@@ -55,105 +56,140 @@ export type SpringKeyboardAnimationConfig = {
55
56
  };
56
57
  export type TabBarVisibilityAnimationConfig = TimingKeyboardAnimationConfig | SpringKeyboardAnimationConfig;
57
58
  export type TabAnimationName = 'none' | 'fade' | 'shift';
58
- export type BottomTabNavigationOptions = HeaderOptions & {
59
+ type IconImage = {
59
60
  /**
60
- * Title text for the screen.
61
+ * - `image` - Use a local image as the icon.
61
62
  */
62
- title?: string;
63
+ type: 'image';
64
+ /**
65
+ * Image source to use as the icon.
66
+ * e.g., `require('./path/to/image.png')`
67
+ */
68
+ source: ImageSourcePropType;
63
69
  /**
64
- * Title string of a tab displayed in the tab bar
65
- * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon', children: string } returns a React.Node to display in tab bar.
70
+ * Whether to apply tint color to the icon.
71
+ * Defaults to `true`.
66
72
  *
67
- * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
73
+ * @platform ios
68
74
  */
69
- tabBarLabel?: string | ((props: {
70
- focused: boolean;
71
- color: string;
72
- position: LabelPosition;
73
- children: string;
74
- }) => React.ReactNode);
75
+ tinted?: boolean;
76
+ };
77
+ type IconIOSSfSymbol = {
75
78
  /**
76
- * Whether the tab label should be visible. Defaults to `true`.
79
+ * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
77
80
  */
78
- tabBarShowLabel?: boolean;
81
+ type: 'sfSymbol';
79
82
  /**
80
- * Whether the label is shown below the icon or beside the icon.
83
+ * Name of the SF Symbol to use as the icon.
81
84
  *
82
- * - `below-icon`: the label is shown below the icon (typical for iPhones)
83
- * - `beside-icon` the label is shown next to the icon (typical for iPad)
85
+ * @platform ios
86
+ */
87
+ name: SFSymbol;
88
+ };
89
+ type IconAndroidDrawable = {
90
+ /**
91
+ * - `drawableResource` - Use a drawable resource as the icon on Android.
92
+ */
93
+ type: 'drawableResource';
94
+ /**
95
+ * Name of the drawable resource to use as the icon.
84
96
  *
85
- * By default, the position is chosen automatically based on device width.
97
+ * @platform android
86
98
  */
87
- tabBarLabelPosition?: LabelPosition;
99
+ name: string;
88
100
  /**
89
- * Style object for the tab label.
101
+ * Whether to apply tint color to the icon.
102
+ * Only supported with custom implementation.
103
+ *
104
+ * Defaults to `true`.
105
+ *
106
+ * @platform android
90
107
  */
91
- tabBarLabelStyle?: StyleProp<TextStyle>;
108
+ tinted?: boolean;
109
+ };
110
+ type IconIOS = IconIOSSfSymbol | IconImage;
111
+ type IconAndroid = IconAndroidDrawable | IconImage;
112
+ export type BottomTabIcon = IconIOS | IconAndroid;
113
+ type BottomTabCustomOptions = {
92
114
  /**
93
- * Whether label font should scale to respect Text Size accessibility settings.
115
+ * How the screen should animate when switching tabs.
116
+ *
117
+ * Supported values:
118
+ * - 'none': don't animate the screen (default)
119
+ * - 'fade': cross-fade the screens.
120
+ * - 'shift': shift the screens slightly shift to left/right.
121
+ *
122
+ * Only supported with `custom` implementation.
94
123
  */
95
- tabBarAllowFontScaling?: boolean;
124
+ animation?: TabAnimationName;
96
125
  /**
97
- * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
126
+ * Function which specifies interpolated styles for bottom-tab scenes.
127
+ *
128
+ * Only supported with `custom` implementation.
98
129
  */
99
- tabBarIcon?: (props: {
100
- focused: boolean;
101
- color: string;
102
- size: number;
103
- }) => React.ReactNode;
130
+ sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
104
131
  /**
105
- * Style object for the tab icon.
132
+ * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
133
+ *
134
+ * Only supported with `custom` implementation.
106
135
  */
107
- tabBarIconStyle?: StyleProp<TextStyle>;
136
+ transitionSpec?: TransitionSpec;
108
137
  /**
109
- * Text to show in a badge on the tab icon.
138
+ * Whether the label is shown below the icon or beside the icon.
139
+ *
140
+ * - `below-icon`: the label is shown below the icon (typical for iPhones)
141
+ * - `beside-icon` the label is shown next to the icon (typical for iPad)
142
+ *
143
+ * By default, the position is chosen automatically based on device width.
144
+ *
145
+ * Only supported with `custom` implementation.
110
146
  */
111
- tabBarBadge?: number | string;
147
+ tabBarLabelPosition?: LabelPosition;
112
148
  /**
113
- * Custom style for the tab bar badge.
114
- * You can specify a background color or text color here.
149
+ * Whether label font should scale to respect Text Size accessibility settings.
150
+ *
151
+ * Defaults to `true`.
152
+ *
153
+ * Only supported with `custom` implementation.
115
154
  */
116
- tabBarBadgeStyle?: StyleProp<TextStyle>;
155
+ tabBarAllowFontScaling?: boolean;
117
156
  /**
118
157
  * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
119
158
  * It's recommended to set this if you don't have a label for the tab.
159
+ *
160
+ * Only supported with `custom` implementation.
120
161
  */
121
162
  tabBarAccessibilityLabel?: string;
122
163
  /**
123
164
  * ID to locate this tab button in tests.
165
+ *
166
+ * Only supported with `custom` implementation.
124
167
  */
125
168
  tabBarButtonTestID?: string;
126
- /**
127
- * Function which returns a React element to render as the tab bar button.
128
- * Renders `PlatformPressable` by default.
129
- */
130
- tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
131
- /**
132
- * Color for the icon and label in the active tab.
133
- */
134
- tabBarActiveTintColor?: string;
135
- /**
136
- * Color for the icon and label in the inactive tabs.
137
- */
138
- tabBarInactiveTintColor?: string;
139
- /**
140
- * Background color for the active tab.
141
- */
142
- tabBarActiveBackgroundColor?: string;
143
- /**
144
- * Background color for the inactive tabs.
145
- */
146
- tabBarInactiveBackgroundColor?: string;
147
169
  /**
148
170
  * Style object for the tab item container.
171
+ *
172
+ * Only supported with `custom` implementation.
149
173
  */
150
174
  tabBarItemStyle?: StyleProp<ViewStyle>;
151
175
  /**
152
- * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
176
+ * Style object for the tab icon.
177
+ *
178
+ * Only supported with `custom` implementation.
179
+ */
180
+ tabBarIconStyle?: StyleProp<TextStyle>;
181
+ /**
182
+ * Whether the tab bar gets hidden when the keyboard is shown.
183
+ *
184
+ * Defaults to `false`.
185
+ *
186
+ * Only supported with `custom` implementation.
153
187
  */
154
188
  tabBarHideOnKeyboard?: boolean;
155
189
  /**
156
190
  * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
191
+ *
192
+ * Only supported with `custom` implementation.
157
193
  */
158
194
  tabBarVisibilityAnimationConfig?: {
159
195
  show?: TabBarVisibilityAnimationConfig;
@@ -161,10 +197,14 @@ export type BottomTabNavigationOptions = HeaderOptions & {
161
197
  };
162
198
  /**
163
199
  * Variant of the tab bar. Defaults to `uikit`.
200
+ *
201
+ * Only supported with `custom` implementation.
164
202
  */
165
203
  tabBarVariant?: Variant;
166
204
  /**
167
205
  * Style object for the tab bar container.
206
+ *
207
+ * Only supported with `custom` implementation.
168
208
  */
169
209
  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
170
210
  /**
@@ -173,61 +213,298 @@ export type BottomTabNavigationOptions = HeaderOptions & {
173
213
  *
174
214
  * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
175
215
  * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
216
+ *
217
+ * Only supported with `custom` implementation.
176
218
  */
177
219
  tabBarBackground?: () => React.ReactNode;
178
220
  /**
179
221
  * Position of the tab bar on the screen. Defaults to `bottom`.
222
+ *
223
+ * Only supported with `custom` implementation or if custom tab bar is provided.
180
224
  */
181
225
  tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
182
226
  /**
183
- * Whether this screens should render the first time it's accessed. Defaults to `true`.
184
- * Set it to `false` if you want to render the screen on initial render.
227
+ * Background color for the active tab.
228
+ *
229
+ * Only supported with `custom` implementation.
185
230
  */
186
- lazy?: boolean;
231
+ tabBarActiveBackgroundColor?: ColorValue;
187
232
  /**
188
- * Function that given returns a React Element to display as a header.
233
+ * Background color for the inactive tabs.
234
+ *
235
+ * Only supported with `custom` implementation.
189
236
  */
190
- header?: (props: BottomTabHeaderProps) => React.ReactNode;
237
+ tabBarInactiveBackgroundColor?: ColorValue;
191
238
  /**
192
- * Whether to show the header. Setting this to `false` hides the header.
193
- * Defaults to `true`.
239
+ * Function which returns a React element to render as the tab bar button.
240
+ * Renders `PlatformPressable` by default.
241
+ *
242
+ * Only supported with `custom` implementation.
194
243
  */
195
- headerShown?: boolean;
244
+ tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
245
+ };
246
+ type ScrollEdgeEffect = 'auto' | 'hard' | 'soft' | 'hidden';
247
+ type BottomTabNativeOptions = {
196
248
  /**
197
- * Whether any nested stack should be popped to top when navigating away from the tab.
198
- * Defaults to `false`.
249
+ * Uses iOS built-in tab bar items with standard iOS styling and localized titles.
250
+ * If set to `search`, it's positioned next to the tab bar on iOS 26 and above.
251
+ *
252
+ * The `tabBarIcon` and `tabBarLabel` options will override the icon and label from the system item.
253
+ * If you want to keep the system behavior on iOS, but need to provide icon and label for other platforms,
254
+ * Use `Platform.OS` or `Platform.select` to conditionally set `undefined` for `tabBarIcon` and `tabBarLabel` on iOS.
255
+ *
256
+ * @platform ios
199
257
  */
200
- popToTopOnBlur?: boolean;
258
+ tabBarSystemItem?: TabsSystemItem;
201
259
  /**
202
- * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
203
- * Defaults to `true` when `enableFreeze()` is run at the top of the application.
204
- * Requires `react-native-screens` version >=3.16.0.
260
+ * Blur effect applied to the tab bar when tab screen is selected.
261
+ *
262
+ * Works with backgroundColor's alpha < 1.
263
+ *
264
+ * The following values are currently supported:
265
+ *
266
+ * - `none` - disables blur effect
267
+ * - `systemDefault` - uses UIKit's default tab bar blur effect
268
+ * - one of styles mapped from UIKit's UIBlurEffectStyle, e.g. `systemUltraThinMaterial`
269
+ *
270
+ * Defaults to `systemDefault`.
205
271
  *
206
- * Only supported on iOS and Android.
272
+ * Complete list of possible blur effect styles is available in the official UIKit documentation:
273
+ * @see {@link https://developer.apple.com/documentation/uikit/uiblureffect/style|UIBlurEffect.Style}
274
+ *
275
+ * Only supported on iOS 18 and lower.
276
+ *
277
+ * @platform ios
207
278
  */
208
- freezeOnBlur?: boolean;
279
+ tabBarBlurEffect?: TabsScreenBlurEffect;
209
280
  /**
210
- * Style object for the component wrapping the screen content.
281
+ * Minimize behavior for the tab bar.
282
+ *
283
+ * The following values are currently supported:
284
+ *
285
+ * - `auto` - resolves to the system default minimize behavior
286
+ * - `none` - the tab bar does not minimize
287
+ * - `onScrollDown` - the tab bar minimizes when scrolling down and
288
+ * expands when scrolling back up
289
+ * - `onScrollUp` - the tab bar minimizes when scrolling up and expands
290
+ * when scrolling back down
291
+ *
292
+ * Defaults to `auto`.
293
+ *
294
+ * The supported values correspond to the official UIKit documentation:
295
+ * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
296
+ *
297
+ * Available starting from iOS 26.
298
+ *
299
+ * @platform ios
211
300
  */
212
- sceneStyle?: StyleProp<ViewStyle>;
301
+ tabBarMinimizeBehavior?: 'auto' | 'none' | 'onScrollDown' | 'onScrollUp';
213
302
  /**
214
- * How the screen should animate when switching tabs.
303
+ * Background color of the active indicator.
215
304
  *
216
- * Supported values:
217
- * - 'none': don't animate the screen (default)
218
- * - 'fade': cross-fade the screens.
219
- * - 'shift': shift the screens slightly shift to left/right.
305
+ * Only supported with `native` implementation.
306
+ *
307
+ * @platform android
220
308
  */
221
- animation?: TabAnimationName;
309
+ tabBarActiveIndicatorColor?: ColorValue;
222
310
  /**
223
- * Function which specifies interpolated styles for bottom-tab scenes.
311
+ * Specifies if the active indicator should be used. Defaults to `true`.
312
+ *
313
+ * Only supported with `native` implementation.
314
+ *
315
+ * @platform android
224
316
  */
225
- sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
317
+ tabBarActiveIndicatorEnabled?: boolean;
226
318
  /**
227
- * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
319
+ * Function which returns a React element to display as an accessory view.
320
+ *
321
+ * Accepts a `placement` parameter which can be one of the following values:
322
+ * - `regular` - at bottom of the screen, above the tab bar if tab bar is at the bottom
323
+ * - `inline` - inline with the collapsed bottom tab bar (e.g. when minimized based on `tabBarMinimizeBehavior`)
324
+ *
325
+ * Note: the content is rendered twice for both placements, but only one is visible at a time based on the tab bar state.
326
+ * Any shared state should be stored outside of the component to keep both versions in sync.
327
+ *
328
+ * Available starting from iOS 26.
329
+ *
330
+ * Only supported with `native` implementation.
331
+ *
332
+ * @platform ios
228
333
  */
229
- transitionSpec?: TransitionSpec;
334
+ bottomAccessory?: (options: {
335
+ placement: 'regular' | 'inline';
336
+ }) => React.ReactNode;
337
+ /**
338
+ * Configures the scroll edge effect for the _content ScrollView_ (the ScrollView that is present in first descendants chain of the Screen).
339
+ * Depending on values set, it will blur the scrolling content below certain UI elements (header items, search bar)
340
+ * for the specified edge of the ScrollView.
341
+ *
342
+ * When set in nested containers, i.e. Native Stack inside Native Bottom Tabs, or the other way around,
343
+ * the ScrollView will use only the innermost one's config.
344
+ *
345
+ * **Note:** Using both `headerBlurEffect` and `scrollEdgeEffects` (>= iOS 26) simultaneously may cause overlapping effects.
346
+ *
347
+ * Edge effects can be configured for each edge separately. The following values are currently supported:
348
+ *
349
+ * - `auto` - the automatic scroll edge effect style,
350
+ * - `hard` - a scroll edge effect with a hard cutoff and dividing line,
351
+ * - `soft` - a soft-edged scroll edge effect,
352
+ * - `hidden` - no scroll edge effect.
353
+ *
354
+ * Defaults to `automatic` for each edge.
355
+ *
356
+ * Available starting from iOS 26.
357
+ *
358
+ * Only supported with `native` implementation.
359
+ *
360
+ * @platform ios
361
+ */
362
+ scrollEdgeEffects?: {
363
+ bottom?: ScrollEdgeEffect;
364
+ left?: ScrollEdgeEffect;
365
+ right?: ScrollEdgeEffect;
366
+ top?: ScrollEdgeEffect;
367
+ };
230
368
  };
369
+ export type BottomTabNavigationOptions = {
370
+ /**
371
+ * Title text for the screen.
372
+ */
373
+ title?: string;
374
+ /**
375
+ * Title string of the tab displayed in the tab bar
376
+ *
377
+ * Overrides the label provided by `tabBarSystemItem` on iOS.
378
+ *
379
+ * If not provided, or set to `undefined`:
380
+ * - The system values are used if `tabBarSystemItem` is set on iOS.
381
+ * - Otherwise, it falls back to the `title` or route name.
382
+ */
383
+ tabBarLabel?: string;
384
+ /**
385
+ * Label visibility mode for the tab bar items.
386
+ *
387
+ * The following values are currently supported:
388
+ *
389
+ * - `auto` - decided based on platform and implementation
390
+ * - `labeled` - labels are always shown
391
+ * - `unlabeled` - labels are never shown
392
+ * - `selected` - labels shown only for selected tab (only supported on Android with `native` implementation)
393
+ *
394
+ * Defaults to `auto`.
395
+ *
396
+ * Supported on all platforms with `custom` implementation.
397
+ * Only supported on Android with `native` implementation.
398
+ */
399
+ tabBarLabelVisibilityMode?: TabBarItemLabelVisibilityMode;
400
+ /**
401
+ * Style object for the tab label.
402
+ */
403
+ tabBarLabelStyle?: Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'>;
404
+ /**
405
+ * Icon to display for the tab.
406
+ *
407
+ * Overrides the icon provided by `tabBarSystemItem` on iOS with native implementation.
408
+ *
409
+ * Providing different icon for focused and unfocused states is supported:
410
+ * - on all platforms with `custom` implementation
411
+ * - on iOS with `native` implementation
412
+ *
413
+ * A React element is only supported with `custom` implementation.
414
+ */
415
+ tabBarIcon?: BottomTabIcon | ((props: {
416
+ focused: boolean;
417
+ color: ColorValue;
418
+ size: number;
419
+ }) => BottomTabIcon | React.ReactNode);
420
+ /**
421
+ * Text to show in a badge on the tab icon.
422
+ */
423
+ tabBarBadge?: number | string;
424
+ /**
425
+ * Custom style for the tab bar badge.
426
+ * You can specify a background color or text color here.
427
+ *
428
+ * @platform android
429
+ */
430
+ tabBarBadgeStyle?: {
431
+ backgroundColor?: ColorValue;
432
+ color?: ColorValue;
433
+ };
434
+ /**
435
+ * Color for the icon and label in the active tab.
436
+ */
437
+ tabBarActiveTintColor?: ColorValue;
438
+ /**
439
+ * Color for the icon and label in the inactive tabs.
440
+ */
441
+ tabBarInactiveTintColor?: ColorValue;
442
+ /**
443
+ * Color of tab bar item's ripple effect.
444
+ *
445
+ * @platform android
446
+ */
447
+ tabBarRippleColor?: ColorValue;
448
+ /**
449
+ * Display mode for the tab bar.
450
+ *
451
+ * Supported values:
452
+ * - `auto` - automatic based on the tab’s content
453
+ * - `tabBar` - tab items are shown in a traditional tab bar
454
+ * - `tabSidebar` - tab items are shown in a sidebar
455
+ *
456
+ * Supported on all platforms with `custom` implementation. By default:
457
+ * - `tabBar` is positioned at the bottom
458
+ * - `tabSidebar` is positioned on the left (LTR) or right (RTL)
459
+ *
460
+ * The `tabBarPosition` option can be used to override this in `custom` implementation.
461
+ *
462
+ * Supported on iOS 18 and above with `native` implementation.
463
+ * Not supported on tvOS.
464
+ */
465
+ tabBarControllerMode?: 'auto' | 'tabBar' | 'tabSidebar';
466
+ /**
467
+ * Style object for the tab bar container.
468
+ */
469
+ tabBarStyle?: {
470
+ /**
471
+ * Background color of the tab bar.
472
+ *
473
+ * Only supported on Android and iOS 18 and below.
474
+ */
475
+ backgroundColor?: ColorValue;
476
+ /**
477
+ * Shadow color of the tab bar.
478
+ *
479
+ * Only supported on iOS 18 and below.
480
+ */
481
+ shadowColor?: ColorValue;
482
+ };
483
+ /**
484
+ * Whether this screens should render the first time it's accessed. Defaults to `true`.
485
+ * Set it to `false` if you want to render the screen on initial render.
486
+ */
487
+ lazy?: boolean;
488
+ /**
489
+ * Whether any nested stack should be popped to top when navigating away from the tab.
490
+ * Defaults to `false`.
491
+ */
492
+ popToTopOnBlur?: boolean;
493
+ /**
494
+ * Style object for the component wrapping the screen content.
495
+ */
496
+ sceneStyle?: StyleProp<ViewStyle>;
497
+ /**
498
+ * Function that returns a React Element to display as a header.
499
+ */
500
+ header?: (props: BottomTabHeaderProps) => React.ReactNode;
501
+ /**
502
+ * Whether to show the header.
503
+ *
504
+ * Defaults to `false` unless a header is provided.
505
+ */
506
+ headerShown?: boolean;
507
+ } & HeaderOptions & BottomTabNativeOptions & BottomTabCustomOptions;
231
508
  export type BottomTabDescriptor = Descriptor<BottomTabNavigationOptions, BottomTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
232
509
  export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
233
510
  export type BottomTabSceneInterpolationProps = {
@@ -274,31 +551,32 @@ export type BottomTabTransitionPreset = {
274
551
  };
275
552
  export type BottomTabNavigationConfig = {
276
553
  /**
277
- * Function that returns a React element to display as the tab bar.
554
+ * The implementation to use for rendering the bottom tabs.
555
+ *
556
+ * - `native`: uses native platform bottom tabs on Android and iOS.
557
+ * - `custom`: uses a custom JavaScript implementation for all platforms.
558
+ *
559
+ * Some feature may not be available depending on the implementation used.
560
+ *
561
+ * Defaults to `native` on Android and iOS.
562
+ *
563
+ * On other platforms, it's always `custom` and this option has no effect.
278
564
  */
279
- tabBar?: (props: BottomTabBarProps) => React.ReactNode;
565
+ implementation?: 'native' | 'custom';
280
566
  /**
281
- * 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.
282
- * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
567
+ * Function that returns a React element to display as the tab bar.
283
568
  */
284
- safeAreaInsets?: {
285
- top?: number;
286
- right?: number;
287
- bottom?: number;
288
- left?: number;
289
- };
569
+ tabBar?: (props: BottomTabBarProps) => React.ReactNode;
290
570
  /**
291
571
  * Whether inactive screens should be detached from the view hierarchy to save memory.
292
- * Make sure to call `enableScreens` from `react-native-screens` to make it work.
293
- * Defaults to `true` on Android.
572
+ *
573
+ * Defaults to `true`.
574
+ *
575
+ * Only supported with `custom` implementation.
294
576
  */
295
577
  detachInactiveScreens?: boolean;
296
578
  };
297
579
  export type BottomTabHeaderProps = {
298
- /**
299
- * Layout of the screen.
300
- */
301
- layout: Layout;
302
580
  /**
303
581
  * Options for the current screen.
304
582
  */
@@ -316,7 +594,6 @@ export type BottomTabBarProps = {
316
594
  state: TabNavigationState<ParamListBase>;
317
595
  descriptors: BottomTabDescriptorMap;
318
596
  navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
319
- insets: EdgeInsets;
320
597
  };
321
598
  export type BottomTabBarButtonProps = Omit<React.ComponentProps<typeof PlatformPressable>, 'style'> & {
322
599
  href?: string;
@@ -324,5 +601,6 @@ export type BottomTabBarButtonProps = Omit<React.ComponentProps<typeof PlatformP
324
601
  style?: StyleProp<ViewStyle>;
325
602
  onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void;
326
603
  };
327
- export type BottomTabNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, BottomTabNavigationOptions, BottomTabNavigationEventMap, BottomTabNavigationProp<ParamListBase>> & TabRouterOptions & BottomTabNavigationConfig;
604
+ export type BottomTabNavigatorProps = DefaultNavigatorOptions<ParamListBase, TabNavigationState<ParamListBase>, BottomTabNavigationOptions, BottomTabNavigationEventMap, BottomTabNavigationProp<ParamListBase>> & TabRouterOptions & BottomTabNavigationConfig;
605
+ export {};
328
606
  //# sourceMappingURL=types.d.ts.map