@react-navigation/bottom-tabs 7.9.0 → 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} +95 -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 +11 -16
  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} +139 -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 -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 -405
  139. package/src/views/ScreenFallback.tsx +0 -50
@@ -1,11 +0,0 @@
1
- import { type Route } from '@react-navigation/native';
2
- import { type ScreenStackHeaderConfigProps } from 'react-native-screens';
3
- import type { NativeHeaderOptions } from './types';
4
- type Props = NativeHeaderOptions & {
5
- headerTopInsetEnabled: boolean;
6
- headerHeight: number;
7
- route: Route<string>;
8
- };
9
- export declare function useHeaderConfig({ headerShadowVisible, headerLargeStyle, headerLargeTitleEnabled, headerLargeTitleShadowVisible, headerLargeTitleStyle, headerBackground, headerLeft, headerRight, headerShown, headerStyle, headerBlurEffect, headerTintColor, headerTitle, headerTitleAlign, headerTitleStyle, headerTransparent, headerSearchBarOptions, headerTopInsetEnabled, route, title, unstable_headerLeftItems: headerLeftItems, unstable_headerRightItems: headerRightItems, }: Props): ScreenStackHeaderConfigProps;
10
- export {};
11
- //# sourceMappingURL=useHeaderConfig.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useHeaderConfig.d.ts","sourceRoot":"","sources":["../../../../../src/unstable/NativeScreen/useHeaderConfig.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,KAAK,EAIX,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAML,KAAK,4BAA4B,EAKlC,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EACV,mBAAmB,EAIpB,MAAM,SAAS,CAAC;AAEjB,KAAK,KAAK,GAAG,mBAAmB,GAAG;IACjC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACtB,CAAC;AAoIF,wBAAgB,eAAe,CAAC,EAC9B,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,EACvB,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,KAAK,EACL,wBAAwB,EAAE,eAAe,EACzC,yBAAyB,EAAE,gBAAgB,GAC5C,EAAE,KAAK,GAAG,4BAA4B,CAqPtC"}
@@ -1,2 +0,0 @@
1
- export declare const createNativeBottomTabNavigator: typeof import('./createNativeBottomTabNavigator.native').createNativeBottomTabNavigator;
2
- //# sourceMappingURL=createNativeBottomTabNavigator.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createNativeBottomTabNavigator.d.ts","sourceRoot":"","sources":["../../../../src/unstable/createNativeBottomTabNavigator.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B,EAAE,cAAc,yCAAyC,EAAE,8BAGnG,CAAC"}
@@ -1,16 +0,0 @@
1
- import { type NavigatorTypeBagBase, type ParamListBase, type StaticConfig, type TabNavigationState, type TypedNavigator } from '@react-navigation/native';
2
- import type { NativeBottomTabNavigationEventMap, NativeBottomTabNavigationOptions, NativeBottomTabNavigationProp, NativeBottomTabNavigatorProps } from './types';
3
- declare function NativeBottomTabNavigator({ id, initialRouteName, backBehavior, children, layout, screenListeners, screenOptions, screenLayout, UNSTABLE_router, UNSTABLE_routeNamesChangeBehavior, ...rest }: NativeBottomTabNavigatorProps): import("react/jsx-runtime").JSX.Element;
4
- export declare function createNativeBottomTabNavigator<const ParamList extends ParamListBase, const NavigatorID extends string | undefined = string | undefined, const TypeBag extends NavigatorTypeBagBase = {
5
- ParamList: ParamList;
6
- NavigatorID: NavigatorID;
7
- State: TabNavigationState<ParamList>;
8
- ScreenOptions: NativeBottomTabNavigationOptions;
9
- EventMap: NativeBottomTabNavigationEventMap;
10
- NavigationList: {
11
- [RouteName in keyof ParamList]: NativeBottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
12
- };
13
- Navigator: typeof NativeBottomTabNavigator;
14
- }, const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>>(config?: Config): TypedNavigator<TypeBag, Config>;
15
- export {};
16
- //# sourceMappingURL=createNativeBottomTabNavigator.native.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createNativeBottomTabNavigator.native.d.ts","sourceRoot":"","sources":["../../../../src/unstable/createNativeBottomTabNavigator.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAElB,KAAK,YAAY,EAEjB,KAAK,kBAAkB,EAGvB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAIlC,OAAO,KAAK,EACV,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC9B,MAAM,SAAS,CAAC;AAEjB,iBAAS,wBAAwB,CAAC,EAChC,EAAE,EACF,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iCAAiC,EACjC,GAAG,IAAI,EACR,EAAE,6BAA6B,2CAyD/B;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,CAAC,SAAS,SAAS,aAAa,EACrC,KAAK,CAAC,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,EACjE,KAAK,CAAC,OAAO,SAAS,oBAAoB,GAAG;IAC3C,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACrC,aAAa,EAAE,gCAAgC,CAAC;IAChD,QAAQ,EAAE,iCAAiC,CAAC;IAC5C,cAAc,EAAE;SACb,SAAS,IAAI,MAAM,SAAS,GAAG,6BAA6B,CAC3D,SAAS,EACT,SAAS,EACT,WAAW,CACZ;KACF,CAAC;IACF,SAAS,EAAE,OAAO,wBAAwB,CAAC;CAC5C,EACD,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,OAAO,CAAC,EAClE,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAElD"}
@@ -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, NativeBottomTabIcon, 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,mBAAmB,EACnB,iCAAiC,EACjC,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,SAAS,CAAC"}
@@ -1,319 +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 NativeBottomTabIcon = 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?: NativeBottomTabIcon | ((props: {
142
- focused: boolean;
143
- }) => NativeBottomTabIcon);
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
- * Function which returns a React element to display as an accessory view.
267
- *
268
- * Accepts a `placement` parameter which can be one of the following values:
269
- * - `regular` - at bottom of the screen, above the tab bar if tab bar is at the bottom
270
- * - `inline` - inline with the collapsed bottom tab bar (e.g. when minimized based on `tabBarMinimizeBehavior`)
271
- *
272
- * Note: the content is rendered twice for both placements, but only one is visible at a time based on the tab bar state.
273
- * Any shared state should be stored outside of the component to keep both versions in sync.
274
- *
275
- * Available starting from iOS 26.
276
- *
277
- * @platform ios
278
- */
279
- bottomAccessory?: (options: {
280
- placement: 'regular' | 'inline';
281
- }) => React.ReactNode;
282
- /**
283
- * Whether this screens should render the first time it's accessed. Defaults to `true`.
284
- * Set it to `false` if you want to render the screen on initial render.
285
- */
286
- lazy?: boolean;
287
- /**
288
- * Whether any nested stack should be popped to top when navigating away from the tab.
289
- * Defaults to `false`.
290
- */
291
- popToTopOnBlur?: boolean;
292
- };
293
- export type NativeBottomTabDescriptor = Descriptor<NativeBottomTabNavigationOptions, NativeBottomTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
294
- export type NativeBottomTabDescriptorMap = Record<string, NativeBottomTabDescriptor>;
295
- export type NativeBottomTabNavigationConfig = {};
296
- export type NativeBottomTabBarProps = {
297
- state: TabNavigationState<ParamListBase>;
298
- descriptors: NativeBottomTabDescriptorMap;
299
- navigation: NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap>;
300
- insets: EdgeInsets;
301
- };
302
- export type NativeBottomTabNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, TabNavigationState<ParamListBase>, NativeBottomTabNavigationOptions, NativeBottomTabNavigationEventMap, NativeBottomTabNavigationProp<ParamListBase>> & TabRouterOptions & NativeBottomTabNavigationConfig;
303
- export type NativeBottomTabNavigationHelpers = NavigationHelpers<ParamListBase, NativeBottomTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
304
- export type NativeBottomTabHeaderProps = {
305
- /**
306
- * Options for the current screen.
307
- */
308
- options: NativeBottomTabNavigationOptions;
309
- /**
310
- * Route object for the current screen.
311
- */
312
- route: RouteProp<ParamListBase>;
313
- /**
314
- * Navigation prop for the header.
315
- */
316
- navigation: NativeBottomTabNavigationProp<ParamListBase>;
317
- };
318
- export {};
319
- //# 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,212 +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
- StyleSheet,
12
- useAnimatedValue,
13
- View,
14
- } from 'react-native';
15
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
16
- import { ScreenStack, ScreenStackItem } from 'react-native-screens';
17
-
18
- import type { NativeBottomTabHeaderProps } from '../types';
19
- import { debounce } from './debounce';
20
- import { AnimatedHeaderHeightContext } from './useAnimatedHeaderHeight';
21
- import { useHeaderConfig } from './useHeaderConfig';
22
-
23
- type Props = NativeBottomTabHeaderProps & {
24
- children: React.ReactNode;
25
- };
26
-
27
- const ANDROID_DEFAULT_HEADER_HEIGHT = 56;
28
-
29
- export function NativeScreen({ route, navigation, options, children }: Props) {
30
- const {
31
- header: renderCustomHeader,
32
- headerShown = renderCustomHeader != null,
33
- headerTransparent,
34
- headerBackground,
35
- } = options;
36
-
37
- const isModal = false;
38
- const insets = useSafeAreaInsets();
39
-
40
- // Modals are fullscreen in landscape only on iPhone
41
- const isIPhone = Platform.OS === 'ios' && !(Platform.isPad || Platform.isTV);
42
-
43
- const isParentHeaderShown = React.useContext(HeaderShownContext);
44
- const parentHeaderHeight = React.useContext(HeaderHeightContext);
45
-
46
- const isLandscape = useFrameSize((frame) => frame.width > frame.height);
47
-
48
- const topInset =
49
- isParentHeaderShown ||
50
- (Platform.OS === 'ios' && isModal) ||
51
- (isIPhone && isLandscape)
52
- ? 0
53
- : insets.top;
54
-
55
- const defaultHeaderHeight = useFrameSize((frame) =>
56
- Platform.select({
57
- // FIXME: Currently screens isn't using Material 3
58
- // So our `getDefaultHeaderHeight` doesn't return the correct value
59
- // So we hardcode the value here for now until screens is updated
60
- android: ANDROID_DEFAULT_HEADER_HEIGHT + topInset,
61
- default: getDefaultHeaderHeight(frame, isModal, topInset),
62
- })
63
- );
64
-
65
- const [headerHeight, setHeaderHeight] = React.useState(defaultHeaderHeight);
66
-
67
- // eslint-disable-next-line react-hooks/exhaustive-deps
68
- const setHeaderHeightDebounced = React.useCallback(
69
- // Debounce the header height updates to avoid excessive re-renders
70
- debounce(setHeaderHeight, 100),
71
- []
72
- );
73
-
74
- const hasCustomHeader = renderCustomHeader != null;
75
-
76
- const animatedHeaderHeight = useAnimatedValue(defaultHeaderHeight);
77
-
78
- const headerTopInsetEnabled = topInset !== 0;
79
-
80
- const onHeaderHeightChange = Animated.event(
81
- [
82
- {
83
- nativeEvent: {
84
- headerHeight: animatedHeaderHeight,
85
- },
86
- },
87
- ],
88
- {
89
- useNativeDriver: true,
90
- listener: (e) => {
91
- if (hasCustomHeader) {
92
- // If we have a custom header, don't use native header height
93
- return;
94
- }
95
-
96
- if (
97
- e.nativeEvent &&
98
- typeof e.nativeEvent === 'object' &&
99
- 'headerHeight' in e.nativeEvent &&
100
- typeof e.nativeEvent.headerHeight === 'number'
101
- ) {
102
- const headerHeight = e.nativeEvent.headerHeight;
103
-
104
- // Only debounce if header has large title or search bar
105
- // As it's the only case where the header height can change frequently
106
- const doesHeaderAnimate =
107
- Platform.OS === 'ios' &&
108
- (options.headerLargeTitleEnabled || options.headerSearchBarOptions);
109
-
110
- if (doesHeaderAnimate) {
111
- setHeaderHeightDebounced(headerHeight);
112
- } else {
113
- setHeaderHeight(headerHeight);
114
- }
115
- }
116
- },
117
- }
118
- );
119
-
120
- const headerConfig = useHeaderConfig({
121
- ...options,
122
- route,
123
- headerHeight,
124
- headerShown: hasCustomHeader ? false : headerShown === true,
125
- headerTopInsetEnabled,
126
- });
127
-
128
- return (
129
- <ScreenStack style={styles.container}>
130
- <ScreenStackItem
131
- screenId={route.key}
132
- // Needed to show search bar in tab bar with systemItem=search
133
- stackPresentation="push"
134
- headerConfig={headerConfig}
135
- onHeaderHeightChange={onHeaderHeightChange}
136
- >
137
- <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
138
- <HeaderHeightContext.Provider
139
- value={headerShown ? headerHeight : (parentHeaderHeight ?? 0)}
140
- >
141
- {headerBackground != null ? (
142
- /**
143
- * To show a custom header background, we render it at the top of the screen below the header
144
- * The header also needs to be positioned absolutely (with `translucent` style)
145
- */
146
- <View
147
- style={[
148
- styles.background,
149
- headerTransparent ? styles.translucent : null,
150
- { height: headerHeight },
151
- ]}
152
- >
153
- {headerBackground()}
154
- </View>
155
- ) : null}
156
- {hasCustomHeader && headerShown ? (
157
- <View
158
- onLayout={(e) => {
159
- const headerHeight = e.nativeEvent.layout.height;
160
-
161
- setHeaderHeight(headerHeight);
162
- animatedHeaderHeight.setValue(headerHeight);
163
- }}
164
- style={[
165
- styles.header,
166
- headerTransparent ? styles.absolute : null,
167
- ]}
168
- >
169
- {renderCustomHeader?.({
170
- route,
171
- navigation,
172
- options,
173
- })}
174
- </View>
175
- ) : null}
176
- <HeaderShownContext.Provider
177
- value={isParentHeaderShown || headerShown}
178
- >
179
- {children}
180
- </HeaderShownContext.Provider>
181
- </HeaderHeightContext.Provider>
182
- </AnimatedHeaderHeightContext.Provider>
183
- </ScreenStackItem>
184
- </ScreenStack>
185
- );
186
- }
187
-
188
- const styles = StyleSheet.create({
189
- container: {
190
- flex: 1,
191
- },
192
- header: {
193
- zIndex: 1,
194
- },
195
- absolute: {
196
- position: 'absolute',
197
- top: 0,
198
- start: 0,
199
- end: 0,
200
- },
201
- translucent: {
202
- position: 'absolute',
203
- top: 0,
204
- start: 0,
205
- end: 0,
206
- zIndex: 1,
207
- elevation: 1,
208
- },
209
- background: {
210
- overflow: 'hidden',
211
- },
212
- });
@@ -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
- }