@react-navigation/bottom-tabs 7.8.12 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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} +100 -77
  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 +40 -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 +383 -115
  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 +9 -9
  62. package/lib/typescript/src/views/TabBarIcon.d.ts.map +1 -1
  63. package/package.json +16 -21
  64. package/src/index.tsx +7 -2
  65. package/src/navigators/createBottomTabNavigator.tsx +78 -27
  66. package/src/types.tsx +417 -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} +147 -116
  78. package/src/views/ScreenContent.tsx +58 -0
  79. package/src/views/TabBarIcon.tsx +63 -10
  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 -169
  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 -283
  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 -467
  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 -302
  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 -244
  131. package/src/unstable/NativeScreen/debounce.tsx +0 -14
  132. package/src/unstable/NativeScreen/types.ts +0 -517
  133. package/src/unstable/NativeScreen/useAnimatedHeaderHeight.tsx +0 -18
  134. package/src/unstable/NativeScreen/useHeaderConfig.tsx +0 -423
  135. package/src/unstable/createNativeBottomTabNavigator.native.tsx +0 -116
  136. package/src/unstable/createNativeBottomTabNavigator.tsx +0 -4
  137. package/src/unstable/index.tsx +0 -22
  138. package/src/unstable/types.tsx +0 -385
  139. package/src/views/ScreenFallback.tsx +0 -50
@@ -1,13 +0,0 @@
1
- /**
2
- * Navigators
3
- */
4
- export { createNativeBottomTabNavigator } from './createNativeBottomTabNavigator';
5
- /**
6
- * Views
7
- */
8
- export { NativeBottomTabView } from './NativeBottomTabView';
9
- /**
10
- * Types
11
- */
12
- export type { NativeBottomTabBarProps, NativeBottomTabNavigationEventMap, NativeBottomTabNavigationOptions, NativeBottomTabNavigationProp, NativeBottomTabNavigatorProps, NativeBottomTabOptionsArgs, NativeBottomTabScreenProps, } from './types';
13
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/unstable/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAElF;;GAEG;AACH,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,YAAY,EACV,uBAAuB,EACvB,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,SAAS,CAAC"}
@@ -1,302 +0,0 @@
1
- import type { DefaultNavigatorOptions, Descriptor, NavigationHelpers, NavigationProp, ParamListBase, RouteProp, TabActionHelpers, TabNavigationState, TabRouterOptions, Theme } from '@react-navigation/native';
2
- import type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native';
3
- import type { EdgeInsets } from 'react-native-safe-area-context';
4
- import type { BottomTabsScreenBlurEffect, BottomTabsSystemItem, TabBarControllerMode, TabBarItemLabelVisibilityMode, TabBarMinimizeBehavior } from 'react-native-screens';
5
- import type { SFSymbol } from 'sf-symbols-typescript';
6
- import type { NativeHeaderOptions } from './NativeScreen/types';
7
- export type Layout = {
8
- width: number;
9
- height: number;
10
- };
11
- export type NativeBottomTabNavigationEventMap = {
12
- /**
13
- * Event which fires on tapping on the tab in the tab bar.
14
- */
15
- tabPress: {
16
- data: undefined;
17
- canPreventDefault: false;
18
- };
19
- /**
20
- * Event which fires when a transition animation starts.
21
- */
22
- transitionStart: {
23
- data: {
24
- closing: boolean;
25
- };
26
- };
27
- /**
28
- * Event which fires when a transition animation ends.
29
- */
30
- transitionEnd: {
31
- data: {
32
- closing: boolean;
33
- };
34
- };
35
- };
36
- export type NativeBottomTabNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, TabNavigationState<ParamList>, NativeBottomTabNavigationOptions, NativeBottomTabNavigationEventMap> & TabActionHelpers<ParamList>;
37
- export type NativeBottomTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
38
- navigation: NativeBottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
39
- route: RouteProp<ParamList, RouteName>;
40
- };
41
- export type NativeBottomTabOptionsArgs<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NativeBottomTabScreenProps<ParamList, RouteName, NavigatorID> & {
42
- theme: Theme;
43
- };
44
- type IconImage = {
45
- /**
46
- * - `image` - Use a local image as the icon.
47
- */
48
- type: 'image';
49
- /**
50
- * Image source to use as the icon.
51
- * e.g., `require('./path/to/image.png')`
52
- */
53
- source: ImageSourcePropType;
54
- /**
55
- * Whether to apply tint color to the icon.
56
- * Defaults to `true`.
57
- *
58
- * @platform ios
59
- */
60
- tinted?: boolean;
61
- };
62
- type IconIOSSfSymbol = {
63
- /**
64
- * - `sfSymbol` - Use an SF Symbol as the icon on iOS.
65
- */
66
- type: 'sfSymbol';
67
- /**
68
- * Name of the SF Symbol to use as the icon.
69
- *
70
- * @platform ios
71
- */
72
- name: SFSymbol;
73
- };
74
- type IconAndroidDrawable = {
75
- /**
76
- * - `drawableResource` - Use a drawable resource as the icon on Android.
77
- */
78
- type: 'drawableResource';
79
- /**
80
- * Name of the drawable resource to use as the icon.
81
- *
82
- * @platform android
83
- */
84
- name: string;
85
- };
86
- type IconIOS = IconIOSSfSymbol | IconImage;
87
- type IconAndroid = IconAndroidDrawable | IconImage;
88
- export type Icon = IconIOS | IconAndroid;
89
- export type NativeBottomTabNavigationOptions = NativeHeaderOptions & {
90
- /**
91
- * Title text for the screen.
92
- */
93
- title?: string;
94
- /**
95
- * Uses iOS built-in tab bar items with standard iOS styling and localized titles.
96
- * If set to `search`, it's positioned next to the tab bar on iOS 26 and above.
97
- *
98
- * The `tabBarIcon` and `tabBarLabel` options will override the icon and label from the system item.
99
- * If you want to keep the system behavior on iOS, but need to provide icon and label for other platforms,
100
- * Use `Platform.OS` or `Platform.select` to conditionally set `undefined` for `tabBarIcon` and `tabBarLabel` on iOS.
101
- *
102
- * @platform ios
103
- */
104
- tabBarSystemItem?: BottomTabsSystemItem;
105
- /**
106
- * Title string of the tab displayed in the tab bar
107
- *
108
- * Overrides the label provided by `tabBarSystemItem` on iOS.
109
- *
110
- * If not provided, or set to `undefined`:
111
- * - The system values are used if `tabBarSystemItem` is set on iOS.
112
- * - Otherwise, it falls back to the `title` or route name.
113
- */
114
- tabBarLabel?: string;
115
- /**
116
- * Label visibility mode for the tab bar items.
117
- *
118
- * The following values are currently supported:
119
- *
120
- * - `auto` - the system decides when to show or hide labels
121
- * - `selected` - labels are shown only for the selected tab
122
- * - `labeled` - labels are always shown
123
- * - `unlabeled` - labels are never shown
124
- *
125
- * Defaults to `auto`.
126
- *
127
- * @platform android
128
- */
129
- tabBarLabelVisibilityMode?: TabBarItemLabelVisibilityMode;
130
- /**
131
- * Style object for the tab label.
132
- */
133
- tabBarLabelStyle?: Pick<TextStyle, 'fontFamily' | 'fontSize' | 'fontWeight' | 'fontStyle'>;
134
- /**
135
- * Icon to display for the tab.
136
- *
137
- * Showing a different icon for focused tab is only supported on iOS.
138
- *
139
- * Overrides the icon provided by `tabBarSystemItem` on iOS.
140
- */
141
- tabBarIcon?: Icon | ((props: {
142
- focused: boolean;
143
- }) => Icon);
144
- /**
145
- * Text to show in a badge on the tab icon.
146
- */
147
- tabBarBadge?: number | string;
148
- /**
149
- * Custom style for the tab bar badge.
150
- * You can specify a background color or text color here.
151
- *
152
- * @platform android
153
- */
154
- tabBarBadgeStyle?: {
155
- backgroundColor?: ColorValue;
156
- color?: ColorValue;
157
- };
158
- /**
159
- * Color for the icon and label in the active tab.
160
- */
161
- tabBarActiveTintColor?: ColorValue;
162
- /**
163
- * Color for the icon and label in the inactive tabs.
164
- *
165
- * @platform android
166
- */
167
- tabBarInactiveTintColor?: ColorValue;
168
- /**
169
- * Background color of the active indicator.
170
- *
171
- * @platform android
172
- */
173
- tabBarActiveIndicatorColor?: ColorValue;
174
- /**
175
- * Specifies if the active indicator should be used. Defaults to `true`.
176
- *
177
- * @platform android
178
- */
179
- tabBarActiveIndicatorEnabled?: boolean;
180
- /**
181
- * Color of tab bar item's ripple effect.
182
- *
183
- * @platform android
184
- */
185
- tabBarRippleColor?: ColorValue;
186
- /**
187
- * Style object for the tab bar container.
188
- */
189
- tabBarStyle?: {
190
- /**
191
- * Background color of the tab bar.
192
- *
193
- * Only supported on Android and iOS 18 and below.
194
- */
195
- backgroundColor?: ColorValue;
196
- /**
197
- * Shadow color of the tab bar.
198
- *
199
- * Only supported on iOS 18 and below.
200
- */
201
- shadowColor?: ColorValue;
202
- };
203
- /**
204
- * Blur effect applied to the tab bar when tab screen is selected.
205
- *
206
- * Works with backgroundColor's alpha < 1.
207
- *
208
- * Only supported on iOS 18 and lower.
209
- *
210
- * The following values are currently supported:
211
- *
212
- * - `none` - disables blur effect
213
- * - `systemDefault` - uses UIKit's default tab bar blur effect
214
- * - one of styles mapped from UIKit's UIBlurEffectStyle, e.g. `systemUltraThinMaterial`
215
- *
216
- * Defaults to `systemDefault`.
217
- *
218
- * Complete list of possible blur effect styles is available in the official UIKit documentation:
219
- * @see {@link https://developer.apple.com/documentation/uikit/uiblureffect/style|UIBlurEffect.Style}
220
- *
221
- * @platform ios
222
- */
223
- tabBarBlurEffect?: BottomTabsScreenBlurEffect;
224
- /**
225
- * Display mode for the tab bar.
226
- *
227
- * Available starting from iOS 18.
228
- * Not supported on tvOS.
229
- *
230
- * The following values are currently supported:
231
- *
232
- * - `auto` - the system sets the display mode based on the tab’s content
233
- * - `tabBar` - the system displays the content only as a tab bar
234
- * - `tabSidebar` - the tab bar is displayed as a sidebar
235
- *
236
- * Defaults to `auto`.
237
- *
238
- * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/mode|UITabBarController.Mode}
239
- *
240
- * @platform ios
241
- */
242
- tabBarControllerMode?: TabBarControllerMode;
243
- /**
244
- * Minimize behavior for the tab bar.
245
- *
246
- * Available starting from iOS 26.
247
- *
248
- * The following values are currently supported:
249
- *
250
- * - `auto` - resolves to the system default minimize behavior
251
- * - `never` - the tab bar does not minimize
252
- * - `onScrollDown` - the tab bar minimizes when scrolling down and
253
- * expands when scrolling back up
254
- * - `onScrollUp` - the tab bar minimizes when scrolling up and expands
255
- * when scrolling back down
256
- *
257
- * Defaults to `auto`.
258
- *
259
- * The supported values correspond to the official UIKit documentation:
260
- * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
261
- *
262
- * @platform ios
263
- */
264
- tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
265
- /**
266
- * Whether this screens should render the first time it's accessed. Defaults to `true`.
267
- * Set it to `false` if you want to render the screen on initial render.
268
- */
269
- lazy?: boolean;
270
- /**
271
- * Whether any nested stack should be popped to top when navigating away from the tab.
272
- * Defaults to `false`.
273
- */
274
- popToTopOnBlur?: boolean;
275
- };
276
- export type NativeBottomTabDescriptor = Descriptor<NativeBottomTabNavigationOptions, NativeBottomTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
277
- export type NativeBottomTabDescriptorMap = Record<string, NativeBottomTabDescriptor>;
278
- export type NativeBottomTabNavigationConfig = {};
279
- export type NativeBottomTabBarProps = {
280
- state: TabNavigationState<ParamListBase>;
281
- descriptors: NativeBottomTabDescriptorMap;
282
- navigation: NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap>;
283
- insets: EdgeInsets;
284
- };
285
- export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, NativeBottomTabNavigationOptions, NativeBottomTabNavigationEventMap, NativeBottomTabNavigationProp<ParamListBase>> & TabRouterOptions & NativeBottomTabNavigationConfig;
286
- export type NativeBottomTabNavigationHelpers = NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
287
- export type NativeBottomTabHeaderProps = {
288
- /**
289
- * Options for the current screen.
290
- */
291
- options: NativeBottomTabNavigationOptions;
292
- /**
293
- * Route object for the current screen.
294
- */
295
- route: RouteProp<ParamListBase>;
296
- /**
297
- * Navigation prop for the header.
298
- */
299
- navigation: NativeBottomTabNavigationProp<ParamListBase>;
300
- };
301
- export {};
302
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/unstable/types.tsx"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"BottomTabView.d.ts","sourceRoot":"","sources":["../../../../src/views/BottomTabView.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AASlC,OAAO,KAAK,EAEV,sBAAsB,EAEtB,yBAAyB,EACzB,0BAA0B,EAG3B,MAAM,UAAU,CAAC;AAOlB,KAAK,KAAK,GAAG,yBAAyB,GAAG;IACvC,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IACzC,UAAU,EAAE,0BAA0B,CAAC;IACvC,WAAW,EAAE,sBAAsB,CAAC;CACrC,CAAC;AAmCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,2CA2RzC"}
@@ -1,18 +0,0 @@
1
- import * as React from 'react';
2
- import { Animated, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
3
- type Props = {
4
- enabled: boolean;
5
- active: 0 | 1 | 2 | Animated.AnimatedInterpolation<0 | 1>;
6
- children: React.ReactNode;
7
- freezeOnBlur?: boolean;
8
- shouldFreeze: boolean;
9
- style?: StyleProp<ViewStyle>;
10
- };
11
- export declare const MaybeScreenContainer: ({ enabled, ...rest }: ViewProps & {
12
- enabled: boolean;
13
- hasTwoStates: boolean;
14
- children: React.ReactNode;
15
- }) => import("react/jsx-runtime").JSX.Element;
16
- export declare function MaybeScreen({ enabled, active, ...rest }: ViewProps & Props): import("react/jsx-runtime").JSX.Element;
17
- export {};
18
- //# sourceMappingURL=ScreenFallback.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ScreenFallback.d.ts","sourceRoot":"","sources":["../../../../src/views/ScreenFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAEd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAUF,eAAO,MAAM,oBAAoB,GAAI,sBAGlC,SAAS,GAAG;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAMA,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,GAAG,KAAK,2CAQ1E"}
@@ -1,20 +0,0 @@
1
- import {
2
- type ParamListBase,
3
- type TabNavigationState,
4
- } from '@react-navigation/native';
5
-
6
- import type {
7
- NativeBottomTabDescriptorMap,
8
- NativeBottomTabNavigationConfig,
9
- NativeBottomTabNavigationHelpers,
10
- } from './types';
11
-
12
- type Props = NativeBottomTabNavigationConfig & {
13
- state: TabNavigationState<ParamListBase>;
14
- navigation: NativeBottomTabNavigationHelpers;
15
- descriptors: NativeBottomTabDescriptorMap;
16
- };
17
-
18
- export function NativeBottomTabView(_: Props) {
19
- throw new Error('Native Bottom Tabs are not supported on this platform.');
20
- }
@@ -1,244 +0,0 @@
1
- import {
2
- getDefaultHeaderHeight,
3
- HeaderHeightContext,
4
- HeaderShownContext,
5
- useFrameSize,
6
- } from '@react-navigation/elements';
7
- import * as React from 'react';
8
- import {
9
- Animated,
10
- Platform,
11
- StatusBar,
12
- StyleSheet,
13
- useAnimatedValue,
14
- View,
15
- } from 'react-native';
16
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
17
- import { ScreenStack, ScreenStackItem } from 'react-native-screens';
18
-
19
- import type { NativeBottomTabHeaderProps } from '../types';
20
- import { debounce } from './debounce';
21
- import { AnimatedHeaderHeightContext } from './useAnimatedHeaderHeight';
22
- import { useHeaderConfig } from './useHeaderConfig';
23
-
24
- type Props = NativeBottomTabHeaderProps & {
25
- children: React.ReactNode;
26
- };
27
-
28
- const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
29
-
30
- export function NativeScreen({ route, navigation, options, children }: Props) {
31
- const {
32
- header: renderCustomHeader,
33
- headerShown = renderCustomHeader != null,
34
- headerTransparent,
35
- headerBackground,
36
- } = options;
37
-
38
- const isModal = false;
39
- const insets = useSafeAreaInsets();
40
-
41
- // Modals are fullscreen in landscape only on iPhone
42
- const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);
43
-
44
- const isParentHeaderShown = React.useContext(HeaderShownContext);
45
- const parentHeaderHeight = React.useContext(HeaderHeightContext);
46
-
47
- const isLandscape = useFrameSize((frame) => frame.width > frame.height);
48
-
49
- const topInset =
50
- isParentHeaderShown ||
51
- (Platform.OS === 'ios' && isModal) ||
52
- (isIPhone && isLandscape)
53
- ? 0
54
- : insets.top;
55
-
56
- const defaultHeaderHeight = useFrameSize((frame) =>
57
- Platform.select({
58
- // FIXME: Currently screens isn't using Material 3
59
- // So our `getDefaultHeaderHeight` doesn't return the correct value
60
- // So we hardcode the value here for now until screens is updated
61
- android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
62
- default: getDefaultHeaderHeight(frame, isModal, topInset),
63
- })
64
- );
65
-
66
- const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
67
-
68
- // eslint-disable-next-line react-hooks/exhaustive-deps
69
- const setHeaderHeightDebounced = React.useCallback(
70
- // Debounce the header height updates to avoid excessive re-renders
71
- debounce(setHeaderHeight, 100),
72
- []
73
- );
74
-
75
- const hasCustomHeader = renderCustomHeader != null;
76
-
77
- let headerHeightCorrectionOffset = 0;
78
-
79
- if (Platform.OS === 'android' && !hasCustomHeader) {
80
- const statusBarHeight = StatusBar.currentHeight ?? 0;
81
-
82
- // FIXME: On Android, the native header height is not correctly calculated
83
- // It includes status bar height even if statusbar is not translucent
84
- // And the statusbar value itself doesn't match the actual status bar height
85
- // So we subtract the bogus status bar height and add the actual top inset
86
- headerHeightCorrectionOffset = -statusBarHeight + topInset;
87
- }
88
-
89
- const rawAnimatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
90
- const animatedHeaderHeight = React.useMemo(
91
- () =>
92
- Animated.add<number>(
93
- rawAnimatedHeaderHeight,
94
- headerHeightCorrectionOffset
95
- ),
96
- [headerHeightCorrectionOffset, rawAnimatedHeaderHeight]
97
- );
98
-
99
- const headerTopInsetEnabled = topInset !== 0;
100
-
101
- const onHeaderHeightChange = Animated.event(
102
- [
103
- {
104
- nativeEvent: {
105
- headerHeight: rawAnimatedHeaderHeight,
106
- },
107
- },
108
- ],
109
- {
110
- useNativeDriver: true,
111
- listener: (e) => {
112
- if (hasCustomHeader) {
113
- // If we have a custom header, don't use native header height
114
- return;
115
- }
116
-
117
- if (
118
- Platform.OS === 'android' &&
119
- (options.headerBackground != null || options.headerTransparent)
120
- ) {
121
- // FIXME: On Android, we get 0 if the header is translucent
122
- // So we set a default height in that case
123
- setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
124
- return;
125
- }
126
-
127
- if (
128
- e.nativeEvent &&
129
- typeof e.nativeEvent === 'object' &&
130
- 'headerHeight' in e.nativeEvent &&
131
- typeof e.nativeEvent.headerHeight === 'number'
132
- ) {
133
- const headerHeight =
134
- e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
135
-
136
- // Only debounce if header has large title or search bar
137
- // As it's the only case where the header height can change frequently
138
- const doesHeaderAnimate =
139
- Platform.OS === 'ios' &&
140
- (options.headerLargeTitleEnabled || options.headerSearchBarOptions);
141
-
142
- if (doesHeaderAnimate) {
143
- setHeaderHeightDebounced(headerHeight);
144
- } else {
145
- setHeaderHeight(headerHeight);
146
- }
147
- }
148
- },
149
- }
150
- );
151
-
152
- const headerConfig = useHeaderConfig({
153
- ...options,
154
- route,
155
- headerHeight,
156
- headerShown: hasCustomHeader ? false : headerShown === true,
157
- headerTopInsetEnabled,
158
- });
159
-
160
- return (
161
- <ScreenStack style={styles.container}>
162
- <ScreenStackItem
163
- screenId={route.key}
164
- // Needed to show search bar in tab bar with systemItem=search
165
- stackPresentation="push"
166
- headerConfig={headerConfig}
167
- onHeaderHeightChange={onHeaderHeightChange}
168
- >
169
- <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
170
- <HeaderHeightContext.Provider
171
- value={headerShown ? headerHeight : (parentHeaderHeight ?? 0)}
172
- >
173
- {headerBackground != null ? (
174
- /**
175
- * To show a custom header background, we render it at the top of the screen below the header
176
- * The header also needs to be positioned absolutely (with `translucent` style)
177
- */
178
- <View
179
- style={[
180
- styles.background,
181
- headerTransparent ? styles.translucent : null,
182
- { height: headerHeight },
183
- ]}
184
- >
185
- {headerBackground()}
186
- </View>
187
- ) : null}
188
- {hasCustomHeader && headerShown ? (
189
- <View
190
- onLayout={(e) => {
191
- const headerHeight = e.nativeEvent.layout.height;
192
-
193
- setHeaderHeight(headerHeight);
194
- rawAnimatedHeaderHeight.setValue(headerHeight);
195
- }}
196
- style={[
197
- styles.header,
198
- headerTransparent ? styles.absolute : null,
199
- ]}
200
- >
201
- {renderCustomHeader?.({
202
- route,
203
- navigation,
204
- options,
205
- })}
206
- </View>
207
- ) : null}
208
- <HeaderShownContext.Provider
209
- value={isParentHeaderShown || headerShown}
210
- >
211
- {children}
212
- </HeaderShownContext.Provider>
213
- </HeaderHeightContext.Provider>
214
- </AnimatedHeaderHeightContext.Provider>
215
- </ScreenStackItem>
216
- </ScreenStack>
217
- );
218
- }
219
-
220
- const styles = StyleSheet.create({
221
- container: {
222
- flex: 1,
223
- },
224
- header: {
225
- zIndex: 1,
226
- },
227
- absolute: {
228
- position: 'absolute',
229
- top: 0,
230
- start: 0,
231
- end: 0,
232
- },
233
- translucent: {
234
- position: 'absolute',
235
- top: 0,
236
- start: 0,
237
- end: 0,
238
- zIndex: 1,
239
- elevation: 1,
240
- },
241
- background: {
242
- overflow: 'hidden',
243
- },
244
- });
@@ -1,14 +0,0 @@
1
- export function debounce<T extends (...args: any[]) => void>(
2
- func: T,
3
- duration: number
4
- ): T {
5
- let timeout: ReturnType<typeof setTimeout>;
6
-
7
- return function (this: unknown, ...args) {
8
- clearTimeout(timeout);
9
-
10
- timeout = setTimeout(() => {
11
- func.apply(this, args);
12
- }, duration);
13
- } as T;
14
- }