@react-navigation/elements 2.9.3 → 3.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 (184) hide show
  1. package/lib/module/Badge.js +2 -2
  2. package/lib/module/Badge.js.map +1 -1
  3. package/lib/module/BlurEffectBackground.js +59 -0
  4. package/lib/module/BlurEffectBackground.js.map +1 -0
  5. package/lib/module/Button.js +7 -6
  6. package/lib/module/Button.js.map +1 -1
  7. package/lib/module/Color.js +11 -0
  8. package/lib/module/Color.js.map +1 -0
  9. package/lib/module/Container.js +42 -0
  10. package/lib/module/Container.js.map +1 -0
  11. package/lib/module/Header/Header.js +152 -97
  12. package/lib/module/Header/Header.js.map +1 -1
  13. package/lib/module/Header/HeaderBackButton.js +130 -121
  14. package/lib/module/Header/HeaderBackButton.js.map +1 -1
  15. package/lib/module/Header/HeaderBackground.js +10 -17
  16. package/lib/module/Header/HeaderBackground.js.map +1 -1
  17. package/lib/module/Header/HeaderButton.js +6 -2
  18. package/lib/module/Header/HeaderButton.js.map +1 -1
  19. package/lib/module/Header/HeaderButtonBackground.js +27 -0
  20. package/lib/module/Header/HeaderButtonBackground.js.map +1 -0
  21. package/lib/module/Header/HeaderSearchBar.js +174 -123
  22. package/lib/module/Header/HeaderSearchBar.js.map +1 -1
  23. package/lib/module/Header/HeaderTitle.js.map +1 -1
  24. package/lib/module/Header/getDefaultHeaderHeight.js +22 -10
  25. package/lib/module/Header/getDefaultHeaderHeight.js.map +1 -1
  26. package/lib/module/Label/Label.js.map +1 -1
  27. package/lib/module/LiquidGlassView.ios.js +21 -0
  28. package/lib/module/LiquidGlassView.ios.js.map +1 -0
  29. package/lib/module/LiquidGlassView.js +13 -0
  30. package/lib/module/LiquidGlassView.js.map +1 -0
  31. package/lib/module/MissingIcon.js +1 -0
  32. package/lib/module/MissingIcon.js.map +1 -1
  33. package/lib/module/PlatformColor.js +9 -0
  34. package/lib/module/PlatformColor.js.map +1 -0
  35. package/lib/module/PlatformColor.native.js +4 -0
  36. package/lib/module/PlatformColor.native.js.map +1 -0
  37. package/lib/module/PlatformPressable.js.map +1 -1
  38. package/lib/module/Screen.js +29 -23
  39. package/lib/module/Screen.js.map +1 -1
  40. package/lib/module/assets/back-icon.ios.svg +4 -0
  41. package/lib/module/assets/back-icon@1x.ios.png +0 -0
  42. package/lib/module/assets/back-icon@2x.ios.png +0 -0
  43. package/lib/module/assets/back-icon@3x.ios.png +0 -0
  44. package/lib/module/assets/back-icon@4x.ios.png +0 -0
  45. package/lib/module/assets/search-icon-legacy.png +0 -0
  46. package/lib/module/assets/search-icon-legacy@1x.ios.png +0 -0
  47. package/lib/module/assets/search-icon-legacy@2x.ios.png +0 -0
  48. package/lib/module/assets/search-icon-legacy@3x.ios.png +0 -0
  49. package/lib/module/assets/search-icon-legacy@4x.ios.png +0 -0
  50. package/lib/module/assets/search-icon.ios.svg +4 -0
  51. package/lib/module/assets/search-icon@1x.ios.png +0 -0
  52. package/lib/module/assets/search-icon@2x.ios.png +0 -0
  53. package/lib/module/assets/search-icon@3x.ios.png +0 -0
  54. package/lib/module/assets/search-icon@4x.ios.png +0 -0
  55. package/lib/module/getBlurBackgroundColor.js +48 -0
  56. package/lib/module/getBlurBackgroundColor.js.map +1 -0
  57. package/lib/module/index.js +2 -8
  58. package/lib/module/index.js.map +1 -1
  59. package/lib/module/internal.js +10 -0
  60. package/lib/module/internal.js.map +1 -0
  61. package/lib/module/useFrameSize.js +4 -4
  62. package/lib/module/useFrameSize.js.map +1 -1
  63. package/lib/typescript/src/Badge.d.ts.map +1 -1
  64. package/lib/typescript/src/BlurEffectBackground.d.ts +16 -0
  65. package/lib/typescript/src/BlurEffectBackground.d.ts.map +1 -0
  66. package/lib/typescript/src/Button.d.ts +5 -4
  67. package/lib/typescript/src/Button.d.ts.map +1 -1
  68. package/lib/typescript/src/Color.d.ts +13 -0
  69. package/lib/typescript/src/Color.d.ts.map +1 -0
  70. package/lib/typescript/src/Container.d.ts +8 -0
  71. package/lib/typescript/src/Container.d.ts.map +1 -0
  72. package/lib/typescript/src/Header/Header.d.ts +1 -5
  73. package/lib/typescript/src/Header/Header.d.ts.map +1 -1
  74. package/lib/typescript/src/Header/HeaderBackButton.d.ts +1 -1
  75. package/lib/typescript/src/Header/HeaderBackButton.d.ts.map +1 -1
  76. package/lib/typescript/src/Header/HeaderBackground.d.ts +5 -3
  77. package/lib/typescript/src/Header/HeaderBackground.d.ts.map +1 -1
  78. package/lib/typescript/src/Header/HeaderButton.d.ts +2 -0
  79. package/lib/typescript/src/Header/HeaderButton.d.ts.map +1 -1
  80. package/lib/typescript/src/Header/HeaderButtonBackground.d.ts +5 -0
  81. package/lib/typescript/src/Header/HeaderButtonBackground.d.ts.map +1 -0
  82. package/lib/typescript/src/Header/HeaderSearchBar.d.ts +5 -2
  83. package/lib/typescript/src/Header/HeaderSearchBar.d.ts.map +1 -1
  84. package/lib/typescript/src/Header/HeaderTitle.d.ts +2 -2
  85. package/lib/typescript/src/Header/HeaderTitle.d.ts.map +1 -1
  86. package/lib/typescript/src/Header/getDefaultHeaderHeight.d.ts +5 -2
  87. package/lib/typescript/src/Header/getDefaultHeaderHeight.d.ts.map +1 -1
  88. package/lib/typescript/src/Label/Label.d.ts +2 -2
  89. package/lib/typescript/src/Label/Label.d.ts.map +1 -1
  90. package/lib/typescript/src/LiquidGlassView.d.ts +9 -0
  91. package/lib/typescript/src/LiquidGlassView.d.ts.map +1 -0
  92. package/lib/typescript/src/LiquidGlassView.ios.d.ts +5 -0
  93. package/lib/typescript/src/LiquidGlassView.ios.d.ts.map +1 -0
  94. package/lib/typescript/src/MissingIcon.d.ts +2 -2
  95. package/lib/typescript/src/MissingIcon.d.ts.map +1 -1
  96. package/lib/typescript/src/PlatformColor.d.ts +7 -0
  97. package/lib/typescript/src/PlatformColor.d.ts.map +1 -0
  98. package/lib/typescript/src/PlatformColor.native.d.ts +2 -0
  99. package/lib/typescript/src/PlatformColor.native.d.ts.map +1 -0
  100. package/lib/typescript/src/PlatformPressable.d.ts +3 -3
  101. package/lib/typescript/src/PlatformPressable.d.ts.map +1 -1
  102. package/lib/typescript/src/Screen.d.ts.map +1 -1
  103. package/lib/typescript/src/getBlurBackgroundColor.d.ts +7 -0
  104. package/lib/typescript/src/getBlurBackgroundColor.d.ts.map +1 -0
  105. package/lib/typescript/src/index.d.ts +0 -6
  106. package/lib/typescript/src/index.d.ts.map +1 -1
  107. package/lib/typescript/src/internal.d.ts +8 -0
  108. package/lib/typescript/src/internal.d.ts.map +1 -0
  109. package/lib/typescript/src/types.d.ts +20 -22
  110. package/lib/typescript/src/types.d.ts.map +1 -1
  111. package/package.json +19 -17
  112. package/src/Badge.tsx +3 -2
  113. package/src/BlurEffectBackground.tsx +90 -0
  114. package/src/Button.tsx +33 -21
  115. package/src/Color.tsx +21 -0
  116. package/src/Container.tsx +44 -0
  117. package/src/Header/Header.tsx +226 -156
  118. package/src/Header/HeaderBackButton.tsx +194 -168
  119. package/src/Header/HeaderBackground.tsx +17 -19
  120. package/src/Header/HeaderButton.tsx +7 -2
  121. package/src/Header/HeaderButtonBackground.tsx +29 -0
  122. package/src/Header/HeaderSearchBar.tsx +227 -129
  123. package/src/Header/HeaderTitle.tsx +2 -1
  124. package/src/Header/getDefaultHeaderHeight.tsx +29 -18
  125. package/src/Label/Label.tsx +2 -1
  126. package/src/LiquidGlassView.ios.tsx +39 -0
  127. package/src/LiquidGlassView.tsx +20 -0
  128. package/src/MissingIcon.tsx +12 -3
  129. package/src/PlatformColor.native.tsx +1 -0
  130. package/src/PlatformColor.tsx +8 -0
  131. package/src/PlatformPressable.tsx +2 -1
  132. package/src/Screen.tsx +24 -25
  133. package/src/assets/back-icon.ios.svg +4 -0
  134. package/src/assets/back-icon@1x.ios.png +0 -0
  135. package/src/assets/back-icon@2x.ios.png +0 -0
  136. package/src/assets/back-icon@3x.ios.png +0 -0
  137. package/src/assets/back-icon@4x.ios.png +0 -0
  138. package/src/assets/search-icon-legacy.png +0 -0
  139. package/src/assets/search-icon-legacy@1x.ios.png +0 -0
  140. package/src/assets/search-icon-legacy@2x.ios.png +0 -0
  141. package/src/assets/search-icon-legacy@3x.ios.png +0 -0
  142. package/src/assets/search-icon-legacy@4x.ios.png +0 -0
  143. package/src/assets/search-icon.ios.svg +4 -0
  144. package/src/assets/search-icon@1x.ios.png +0 -0
  145. package/src/assets/search-icon@2x.ios.png +0 -0
  146. package/src/assets/search-icon@3x.ios.png +0 -0
  147. package/src/assets/search-icon@4x.ios.png +0 -0
  148. package/src/getBlurBackgroundColor.tsx +68 -0
  149. package/src/index.tsx +2 -8
  150. package/src/internal.tsx +7 -0
  151. package/src/types.tsx +21 -21
  152. package/src/useFrameSize.tsx +4 -4
  153. package/lib/module/Background.js +0 -22
  154. package/lib/module/Background.js.map +0 -1
  155. package/lib/module/MaskedView.android.js +0 -4
  156. package/lib/module/MaskedView.android.js.map +0 -1
  157. package/lib/module/MaskedView.ios.js +0 -4
  158. package/lib/module/MaskedView.ios.js.map +0 -1
  159. package/lib/module/MaskedView.js +0 -12
  160. package/lib/module/MaskedView.js.map +0 -1
  161. package/lib/module/MaskedViewNative.js +0 -30
  162. package/lib/module/MaskedViewNative.js.map +0 -1
  163. package/lib/module/ResourceSavingView.js +0 -57
  164. package/lib/module/ResourceSavingView.js.map +0 -1
  165. package/lib/module/assets/back-icon-mask.png +0 -0
  166. package/lib/typescript/src/Background.d.ts +0 -9
  167. package/lib/typescript/src/Background.d.ts.map +0 -1
  168. package/lib/typescript/src/MaskedView.android.d.ts +0 -2
  169. package/lib/typescript/src/MaskedView.android.d.ts.map +0 -1
  170. package/lib/typescript/src/MaskedView.d.ts +0 -11
  171. package/lib/typescript/src/MaskedView.d.ts.map +0 -1
  172. package/lib/typescript/src/MaskedView.ios.d.ts +0 -2
  173. package/lib/typescript/src/MaskedView.ios.d.ts.map +0 -1
  174. package/lib/typescript/src/MaskedViewNative.d.ts +0 -11
  175. package/lib/typescript/src/MaskedViewNative.d.ts.map +0 -1
  176. package/lib/typescript/src/ResourceSavingView.d.ts +0 -10
  177. package/lib/typescript/src/ResourceSavingView.d.ts.map +0 -1
  178. package/src/Background.tsx +0 -24
  179. package/src/MaskedView.android.tsx +0 -1
  180. package/src/MaskedView.ios.tsx +0 -1
  181. package/src/MaskedView.tsx +0 -13
  182. package/src/MaskedViewNative.tsx +0 -33
  183. package/src/ResourceSavingView.tsx +0 -76
  184. package/src/assets/back-icon-mask.png +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAQzD"}
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAEd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG;IACtC,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAQzD"}
@@ -0,0 +1,9 @@
1
+ import { Animated } from 'react-native';
2
+ type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
3
+ export declare const LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'];
4
+ export declare const LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'];
5
+ export declare const AnimatedLiquidGlassView: Animated.AnimatedComponent<typeof LiquidGlassView>;
6
+ export declare const AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<typeof LiquidGlassContainerView>;
7
+ export declare const isLiquidGlassSupported = false;
8
+ export {};
9
+ //# sourceMappingURL=LiquidGlassView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LiquidGlassView.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAQ,MAAM,cAAc,CAAC;AAE9C,KAAK,oBAAoB,GAAG,cAAc,yBAAyB,CAAC,CAAC;AAErE,eAAO,MAAM,eAAe,EAAE,oBAAoB,CAAC,iBAAiB,CAAQ,CAAC;AAE7E,eAAO,MAAM,wBAAwB,EAAE,oBAAoB,CAAC,0BAA0B,CAChF,CAAC;AAGP,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,iBAAiB,CAC9D,OAAO,eAAe,CACP,CAAC;AAGlB,eAAO,MAAM,gCAAgC,EAAE,QAAQ,CAAC,iBAAiB,CACvE,OAAO,wBAAwB,CAChB,CAAC;AAElB,eAAO,MAAM,sBAAsB,QAAQ,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { Animated } from 'react-native';
2
+ type CallstackLiquidGlass = typeof import('@callstack/liquid-glass');
3
+ declare let isLiquidGlassSupported: boolean, LiquidGlassView: CallstackLiquidGlass['LiquidGlassView'], LiquidGlassContainerView: CallstackLiquidGlass['LiquidGlassContainerView'], AnimatedLiquidGlassView: Animated.AnimatedComponent<typeof LiquidGlassView>, AnimatedLiquidGlassContainerView: Animated.AnimatedComponent<typeof LiquidGlassContainerView>;
4
+ export { AnimatedLiquidGlassContainerView, AnimatedLiquidGlassView, isLiquidGlassSupported, LiquidGlassContainerView, LiquidGlassView, };
5
+ //# sourceMappingURL=LiquidGlassView.ios.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LiquidGlassView.ios.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassView.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAQ,MAAM,cAAc,CAAC;AAE9C,KAAK,oBAAoB,GAAG,cAAc,yBAAyB,CAAC,CAAC;AAErE,QAAA,IAAI,sBAAsB,EAAE,OAAO,EACjC,eAAe,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,EACxD,wBAAwB,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,EAC1E,uBAAuB,EAAE,QAAQ,CAAC,iBAAiB,CAAC,OAAO,eAAe,CAAC,EAC3E,gCAAgC,EAAE,QAAQ,CAAC,iBAAiB,CAC1D,OAAO,wBAAwB,CAChC,CAAC;AAsBJ,OAAO,EACL,gCAAgC,EAChC,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,GAChB,CAAC"}
@@ -1,6 +1,6 @@
1
- import { type StyleProp, type TextStyle } from 'react-native';
1
+ import { type ColorValue, type StyleProp, type TextStyle } from 'react-native';
2
2
  type Props = {
3
- color?: string;
3
+ color?: ColorValue;
4
4
  size?: number;
5
5
  style?: StyleProp<TextStyle>;
6
6
  };
@@ -1 +1 @@
1
- {"version":3,"file":"MissingIcon.d.ts","sourceRoot":"","sources":["../../../src/MissingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1E,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,2CAExD"}
1
+ {"version":3,"file":"MissingIcon.d.ts","sourceRoot":"","sources":["../../../src/MissingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,2CAMxD"}
@@ -0,0 +1,7 @@
1
+ /**
2
+ * PlatformColor is not exported in react-native-web.
3
+ * So it results in build errors with Vite.
4
+ * This is a workaround to avoid such errors.
5
+ */
6
+ export declare const PlatformColor: typeof import('react-native').PlatformColor | undefined;
7
+ //# sourceMappingURL=PlatformColor.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PlatformColor.d.ts","sourceRoot":"","sources":["../../../src/PlatformColor.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,aAAa,EACtB,cAAc,cAAc,EAAE,aAAa,GAC3C,SAAqB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { PlatformColor } from 'react-native';
2
+ //# sourceMappingURL=PlatformColor.native.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PlatformColor.native.d.ts","sourceRoot":"","sources":["../../../src/PlatformColor.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Animated, type GestureResponderEvent, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
2
+ import { Animated, type ColorValue, type GestureResponderEvent, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
3
3
  type HoverEffectProps = {
4
4
  color?: string;
5
5
  hoverOpacity?: number;
@@ -7,7 +7,7 @@ type HoverEffectProps = {
7
7
  };
8
8
  export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
9
9
  href?: string;
10
- pressColor?: string;
10
+ pressColor?: ColorValue;
11
11
  pressOpacity?: number;
12
12
  hoverEffect?: HoverEffectProps;
13
13
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -16,7 +16,7 @@ export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
16
16
  };
17
17
  export declare const PlatformPressable: React.ForwardRefExoticComponent<Omit<PressableProps, "style" | "onPress"> & {
18
18
  href?: string;
19
- pressColor?: string;
19
+ pressColor?: ColorValue;
20
20
  pressOpacity?: number;
21
21
  hoverEffect?: HoverEffectProps;
22
22
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
@@ -1 +1 @@
1
- {"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAER,KAAK,qBAAqB,EAG1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAgIF,eAAO,MAAM,iBAAiB;WAzIrB,MAAM;iBACA,MAAM;mBACJ,MAAM;kBACP,gBAAgB;YACtB,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAC9C,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI;cACC,KAAK,CAAC,SAAS;uGAiIiD,CAAC"}
1
+ {"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,UAAU,EAEf,KAAK,qBAAqB,EAG1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAgIF,eAAO,MAAM,iBAAiB;WAzIrB,MAAM;iBACA,UAAU;mBACR,MAAM;kBACP,gBAAgB;YACtB,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAC9C,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI;cACC,KAAK,CAAC,SAAS;uGAiIiD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA2ElC"}
1
+ {"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA0ElC"}
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Copied from expo-blur
3
+ * https://github.com/expo/expo/blob/d9cec38a1db4dcf3306a1814651386a99b9aaa73/packages/expo-blur/src/getBackgroundColor.ts
4
+ */
5
+ export type BlurEffectType = 'extraLight' | 'light' | 'dark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
6
+ export declare function getBlurBackgroundColor(type: BlurEffectType): string;
7
+ //# sourceMappingURL=getBlurBackgroundColor.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getBlurBackgroundColor.d.ts","sourceRoot":"","sources":["../../../src/getBlurBackgroundColor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,cAAc,GACtB,YAAY,GACZ,OAAO,GACP,MAAM,GACN,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAwCnE"}
@@ -1,4 +1,3 @@
1
- export { Background } from './Background';
2
1
  export { Badge } from './Badge';
3
2
  export { Button } from './Button';
4
3
  export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
@@ -15,12 +14,7 @@ export { HeaderTitle } from './Header/HeaderTitle';
15
14
  export { useHeaderHeight } from './Header/useHeaderHeight';
16
15
  export { getLabel } from './Label/getLabel';
17
16
  export { Label } from './Label/Label';
18
- export { Lazy } from './Lazy';
19
- export { MissingIcon } from './MissingIcon';
20
17
  export { PlatformPressable } from './PlatformPressable';
21
- export { ResourceSavingView } from './ResourceSavingView';
22
- export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
23
- export { Screen } from './Screen';
24
18
  export { Text } from './Text';
25
19
  export { useFrameSize } from './useFrameSize';
26
20
  export declare const Assets: any[];
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}
@@ -0,0 +1,8 @@
1
+ export { Color } from './Color';
2
+ export { Container, type Props as ContainerProps } from './Container';
3
+ export { Lazy } from './Lazy';
4
+ export { isLiquidGlassSupported } from './LiquidGlassView';
5
+ export { MissingIcon } from './MissingIcon';
6
+ export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
7
+ export { Screen } from './Screen';
8
+ //# sourceMappingURL=internal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/internal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,KAAK,IAAI,cAAc,EAAE,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
@@ -1,4 +1,5 @@
1
- import type { Animated, LayoutChangeEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
1
+ import type { Animated, ColorValue, LayoutChangeEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
2
+ import type { BlurEffectType } from './getBlurBackgroundColor';
2
3
  export type HeaderBackButtonDisplayMode = 'default' | 'generic' | 'minimal';
3
4
  export type Layout = {
4
5
  width: number;
@@ -53,7 +54,7 @@ export type HeaderSearchBarOptions = {
53
54
  * A callback that gets called when the text changes.
54
55
  * It receives the current text value of the search input.
55
56
  */
56
- onChangeText?: TextInputProps['onChange'];
57
+ onChange?: TextInputProps['onChange'];
57
58
  /**
58
59
  * Callback that is called when the submit button is pressed.
59
60
  * It receives the current text value of the search input.
@@ -143,8 +144,8 @@ export type HeaderOptions = {
143
144
  * Function which returns a React Element to display on the right side of the header.
144
145
  */
145
146
  headerRight?: (props: {
146
- tintColor?: string;
147
- pressColor?: string;
147
+ tintColor?: ColorValue;
148
+ pressColor?: ColorValue;
148
149
  pressOpacity?: number;
149
150
  canGoBack: boolean;
150
151
  }) => React.ReactNode;
@@ -155,7 +156,7 @@ export type HeaderOptions = {
155
156
  /**
156
157
  * Color for material ripple (Android >= 5.0 only).
157
158
  */
158
- headerPressColor?: string;
159
+ headerPressColor?: ColorValue;
159
160
  /**
160
161
  * Color for material ripple (Android >= 5.0 only).
161
162
  */
@@ -163,7 +164,7 @@ export type HeaderOptions = {
163
164
  /**
164
165
  * Tint color for the header.
165
166
  */
166
- headerTintColor?: string;
167
+ headerTintColor?: ColorValue;
167
168
  /**
168
169
  * Function which returns a React Element to render as the background of the header.
169
170
  * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
@@ -182,6 +183,15 @@ export type HeaderOptions = {
182
183
  * This is useful if you want to render a semi-transparent header or a blurred background.
183
184
  */
184
185
  headerTransparent?: boolean;
186
+ /**
187
+ * Blur effect for the translucent header.
188
+ * The `headerTransparent` option needs to be set to `true` for this to work.
189
+ *
190
+ * Only supported on Web.
191
+ *
192
+ * @platform web
193
+ */
194
+ headerBlurEffect?: BlurEffectType | 'none';
185
195
  /**
186
196
  * Style object for the header. You can specify a custom background color here, for example.
187
197
  */
@@ -222,7 +232,7 @@ export type HeaderTitleProps = {
222
232
  /**
223
233
  * Tint color for the header.
224
234
  */
225
- tintColor?: string;
235
+ tintColor?: ColorValue;
226
236
  /**
227
237
  * Callback to trigger when the size of the title element changes.
228
238
  */
@@ -256,11 +266,11 @@ export type HeaderButtonProps = {
256
266
  /**
257
267
  * Tint color for the header button.
258
268
  */
259
- tintColor?: string;
269
+ tintColor?: ColorValue;
260
270
  /**
261
271
  * Color for material ripple (Android >= 5.0 only).
262
272
  */
263
- pressColor?: string;
273
+ pressColor?: ColorValue;
264
274
  /**
265
275
  * Opacity when the button is pressed, used when ripple is not supported.
266
276
  */
@@ -279,7 +289,7 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
279
289
  * Function which returns a React Element to display custom image in header's back button.
280
290
  */
281
291
  backImage?: (props: {
282
- tintColor: string;
292
+ tintColor: ColorValue;
283
293
  }) => React.ReactNode;
284
294
  /**
285
295
  * Label text for the button. Usually the title of the previous screen.
@@ -309,17 +319,5 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
309
319
  * Whether label font should scale to respect Text Size accessibility settings.
310
320
  */
311
321
  allowFontScaling?: boolean;
312
- /**
313
- * Callback to trigger when the size of the label changes.
314
- */
315
- onLabelLayout?: (e: LayoutChangeEvent) => void;
316
- /**
317
- * Layout of the screen.
318
- */
319
- screenLayout?: Layout;
320
- /**
321
- * Layout of the title element in the header.
322
- */
323
- titleLayout?: Layout;
324
322
  };
325
323
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,MAAM,2BAA2B,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5E,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;OAEG;IACH,cAAc,CAAC,EACX,MAAM,GACN,OAAO,GACP,WAAW,GACX,YAAY,GACZ,eAAe,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACpE;;OAEG;IACH,yBAAyB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,qBAAqB,GAAG;QAC7B;;WAEG;QACH,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,KACE,KAAK,CAAC,SAAS,CAAC;IACrB;;;;;;;;;OASG;IACH,2BAA2B,CAAC,EAAE,2BAA2B,CAAC;IAC1D;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC;QAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH;;OAEG;IACH,wBAAwB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5E;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QACpB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,yBAAyB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QACzB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;KACzD,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,8BAA8B,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CACzD,SAAS,CAAC,SAAS,CAAC,CACrB,CAAC;IACF;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D;;;;;;;;;;;;;;;OAeG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IACxE;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,UAAU,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAClE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@react-navigation/elements",
3
3
  "description": "UI Components for React Navigation",
4
- "version": "2.9.3",
4
+ "version": "3.0.0-alpha.0",
5
5
  "keywords": [
6
6
  "react-native",
7
7
  "react-navigation",
@@ -26,6 +26,11 @@
26
26
  "types": "./lib/typescript/src/index.d.ts",
27
27
  "default": "./lib/module/index.js"
28
28
  },
29
+ "./internal": {
30
+ "source": "./src/internal.tsx",
31
+ "types": "./lib/typescript/src/internal.d.ts",
32
+ "default": "./lib/module/internal.js"
33
+ },
29
34
  "./package.json": "./package.json"
30
35
  },
31
36
  "files": [
@@ -43,34 +48,31 @@
43
48
  },
44
49
  "dependencies": {
45
50
  "color": "^4.2.3",
46
- "use-latest-callback": "^0.2.4",
51
+ "use-latest-callback": "^0.3.2",
47
52
  "use-sync-external-store": "^1.5.0"
48
53
  },
49
54
  "devDependencies": {
55
+ "@callstack/liquid-glass": "^0.6.0",
50
56
  "@jest/globals": "^30.0.0",
51
- "@react-native-masked-view/masked-view": "0.3.2",
52
- "@react-navigation/native": "^7.1.26",
57
+ "@react-navigation/native": "^8.0.0-alpha.0",
53
58
  "@testing-library/react-native": "^13.2.1",
54
- "@types/react": "~19.0.10",
59
+ "@types/react": "~19.1.10",
55
60
  "@types/use-sync-external-store": "^1.5.0",
56
61
  "del-cli": "^6.0.0",
57
62
  "react": "19.1.0",
58
- "react-native": "0.81.5",
59
- "react-native-builder-bob": "^0.40.17",
63
+ "react-native": "0.81.4",
64
+ "react-native-builder-bob": "^0.40.12",
65
+ "react-native-screens": "^4.19.0",
60
66
  "react-test-renderer": "19.1.0",
61
67
  "typescript": "^5.9.2"
62
68
  },
63
69
  "peerDependencies": {
64
- "@react-native-masked-view/masked-view": ">= 0.2.0",
65
- "@react-navigation/native": "^7.1.26",
66
- "react": ">= 18.2.0",
70
+ "@callstack/liquid-glass": ">= 0.6.0",
71
+ "@react-navigation/native": "^8.0.0-alpha.0",
72
+ "react": ">= 19.0.0",
67
73
  "react-native": "*",
68
- "react-native-safe-area-context": ">= 4.0.0"
69
- },
70
- "peerDependenciesMeta": {
71
- "@react-native-masked-view/masked-view": {
72
- "optional": true
73
- }
74
+ "react-native-safe-area-context": ">= 5.5.0",
75
+ "react-native-screens": ">= 4.19.0"
74
76
  },
75
77
  "react-native-builder-bob": {
76
78
  "source": "src",
@@ -90,5 +92,5 @@
90
92
  ]
91
93
  ]
92
94
  },
93
- "gitHead": "2b7ee0d2d1b1ef0390b690f59c0c1dd8bd57e9eb"
95
+ "gitHead": "46daae524ec6a59737147ed506222dd09a5b6e39"
94
96
  }
package/src/Badge.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import { useTheme } from '@react-navigation/native';
2
- import Color from 'color';
3
2
  import * as React from 'react';
4
3
  import {
5
4
  Animated,
@@ -10,6 +9,8 @@ import {
10
9
  type TextStyle,
11
10
  } from 'react-native';
12
11
 
12
+ import { Color } from './Color';
13
+
13
14
  type Props = TextProps & {
14
15
  /**
15
16
  * Whether the badge is visible
@@ -72,7 +73,7 @@ export function Badge({
72
73
  // @ts-expect-error: backgroundColor definitely exists
73
74
  const { backgroundColor = colors.notification, ...restStyle } =
74
75
  StyleSheet.flatten(style) || {};
75
- const textColor = Color(backgroundColor).isLight() ? 'black' : 'white';
76
+ const textColor = Color(backgroundColor)?.isLight() ? 'black' : 'white';
76
77
 
77
78
  const borderRadius = size / 2;
78
79
  const fontSize = Math.floor((size * 3) / 4);
@@ -0,0 +1,90 @@
1
+ import * as React from 'react';
2
+ import {
3
+ Animated,
4
+ Platform,
5
+ type StyleProp,
6
+ StyleSheet,
7
+ View,
8
+ type ViewProps,
9
+ type ViewStyle,
10
+ } from 'react-native';
11
+
12
+ import {
13
+ type BlurEffectType,
14
+ getBlurBackgroundColor,
15
+ } from './getBlurBackgroundColor';
16
+
17
+ type Props = Omit<ViewProps, 'style'> & {
18
+ blurEffect: BlurEffectType | 'none' | undefined;
19
+ style?: StyleProp<ViewStyle>;
20
+ children?: React.ReactNode;
21
+ };
22
+
23
+ /**
24
+ * Component to use as a background to provide apple-style blur effect.
25
+ *
26
+ * Only supported on web. Falls back to a regular `View` on other platforms.
27
+ */
28
+ export function BlurEffectBackground({
29
+ blurEffect,
30
+ style,
31
+ children,
32
+ ...rest
33
+ }: Props) {
34
+ let containerStyle, blurStyle, blurBackground, colorBackground;
35
+
36
+ if (Platform.OS === 'web' && blurEffect && blurEffect !== 'none') {
37
+ const blurBackgroundColor = getBlurBackgroundColor(blurEffect);
38
+
39
+ if (blurBackgroundColor) {
40
+ const backdropFilter = `saturate(180%) blur(30px)`;
41
+
42
+ blurStyle = {
43
+ // @ts-expect-error backdropFilter is web-only
44
+ backdropFilter,
45
+ webkitBackdropFilter: backdropFilter,
46
+ };
47
+
48
+ blurBackground = (
49
+ <div
50
+ style={{
51
+ position: 'absolute',
52
+ left: 0,
53
+ right: 0,
54
+ top: 0,
55
+ bottom: 0,
56
+ zIndex: -1,
57
+ backgroundColor: blurBackgroundColor,
58
+ }}
59
+ />
60
+ );
61
+
62
+ const flattenedStyle = StyleSheet.flatten(style) || {};
63
+
64
+ containerStyle = [flattenedStyle, { backgroundColor: 'transparent' }];
65
+ colorBackground =
66
+ 'backgroundColor' in flattenedStyle &&
67
+ flattenedStyle.backgroundColor !== 'transparent' ? (
68
+ <Animated.View
69
+ style={[
70
+ StyleSheet.absoluteFill,
71
+ {
72
+ zIndex: -1,
73
+ backgroundColor: flattenedStyle.backgroundColor,
74
+ },
75
+ ]}
76
+ />
77
+ ) : null;
78
+ }
79
+ } else {
80
+ containerStyle = style;
81
+ }
82
+
83
+ return (
84
+ <View style={[blurStyle, containerStyle]} {...rest}>
85
+ {blurBackground}
86
+ {colorBackground}
87
+ {children}
88
+ </View>
89
+ );
90
+ }
package/src/Button.tsx CHANGED
@@ -1,12 +1,13 @@
1
1
  import {
2
2
  type LinkProps,
3
+ type RootParamList,
3
4
  useLinkProps,
4
5
  useTheme,
5
6
  } from '@react-navigation/native';
6
- import Color from 'color';
7
7
  import * as React from 'react';
8
- import { Platform, StyleSheet } from 'react-native';
8
+ import { type ColorValue, Platform, StyleSheet } from 'react-native';
9
9
 
10
+ import { Color } from './Color';
10
11
  import {
11
12
  PlatformPressable,
12
13
  type Props as PlatformPressableProps,
@@ -15,24 +16,28 @@ import { Text } from './Text';
15
16
 
16
17
  type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
17
18
  variant?: 'plain' | 'tinted' | 'filled';
18
- color?: string;
19
+ color?: ColorValue;
19
20
  children: string | string[];
20
21
  };
21
22
 
22
- type ButtonLinkProps<ParamList extends ReactNavigation.RootParamList> =
23
- LinkProps<ParamList> & Omit<ButtonBaseProps, 'onPress'>;
23
+ type ButtonLinkProps<
24
+ ParamList extends {} = RootParamList,
25
+ RouteName extends keyof ParamList = keyof ParamList,
26
+ > = LinkProps<ParamList, RouteName> & Omit<ButtonBaseProps, 'onPress'>;
24
27
 
25
28
  const BUTTON_RADIUS = 40;
26
29
 
27
- export function Button<ParamList extends ReactNavigation.RootParamList>(
28
- props: ButtonLinkProps<ParamList>
29
- ): React.JSX.Element;
30
+ export function Button<
31
+ ParamList extends {} = RootParamList,
32
+ RouteName extends keyof ParamList = keyof ParamList,
33
+ >(props: ButtonLinkProps<ParamList, RouteName>): React.JSX.Element;
30
34
 
31
35
  export function Button(props: ButtonBaseProps): React.JSX.Element;
32
36
 
33
- export function Button<ParamList extends ReactNavigation.RootParamList>(
34
- props: ButtonBaseProps | ButtonLinkProps<ParamList>
35
- ) {
37
+ export function Button<
38
+ ParamList extends {} = RootParamList,
39
+ RouteName extends keyof ParamList = keyof ParamList,
40
+ >(props: ButtonBaseProps | ButtonLinkProps<ParamList, RouteName>) {
36
41
  if ('screen' in props || 'action' in props) {
37
42
  // @ts-expect-error: This is already type-checked by the prop types
38
43
  return <ButtonLink {...props} />;
@@ -41,13 +46,16 @@ export function Button<ParamList extends ReactNavigation.RootParamList>(
41
46
  }
42
47
  }
43
48
 
44
- function ButtonLink<ParamList extends ReactNavigation.RootParamList>({
49
+ function ButtonLink<
50
+ const ParamList extends {} = RootParamList,
51
+ const RouteName extends keyof ParamList = keyof ParamList,
52
+ >({
45
53
  screen,
46
54
  params,
47
55
  action,
48
56
  href,
49
57
  ...rest
50
- }: ButtonLinkProps<ParamList>) {
58
+ }: ButtonLinkProps<ParamList, RouteName>) {
51
59
  // @ts-expect-error: This is already type-checked by the prop types
52
60
  const props = useLinkProps({ screen, params, action, href });
53
61
 
@@ -62,12 +70,12 @@ function ButtonBase({
62
70
  children,
63
71
  ...rest
64
72
  }: ButtonBaseProps) {
65
- const { colors, fonts } = useTheme();
73
+ const { dark, colors, fonts } = useTheme();
66
74
 
67
75
  const color = customColor ?? colors.primary;
68
76
 
69
- let backgroundColor;
70
- let textColor;
77
+ let backgroundColor: ColorValue;
78
+ let textColor: ColorValue;
71
79
 
72
80
  switch (variant) {
73
81
  case 'plain':
@@ -75,14 +83,16 @@ function ButtonBase({
75
83
  textColor = color;
76
84
  break;
77
85
  case 'tinted':
78
- backgroundColor = Color(color).fade(0.85).string();
86
+ backgroundColor =
87
+ Color(color)?.fade(0.85).string() ??
88
+ (dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)');
79
89
  textColor = color;
80
90
  break;
81
91
  case 'filled':
82
92
  backgroundColor = color;
83
- textColor = Color(color).isDark()
93
+ textColor = Color(color)?.isDark()
84
94
  ? 'white'
85
- : Color(color).darken(0.71).string();
95
+ : (Color(color)?.darken(0.71).string() ?? '#fff');
86
96
  break;
87
97
  }
88
98
 
@@ -91,11 +101,13 @@ function ButtonBase({
91
101
  {...rest}
92
102
  android_ripple={{
93
103
  radius: BUTTON_RADIUS,
94
- color: Color(textColor).fade(0.85).string(),
104
+ color: Color(textColor)?.fade(0.85).string() ?? 'rgba(0, 0, 0, 0.1)',
95
105
  ...android_ripple,
96
106
  }}
97
107
  pressOpacity={Platform.OS === 'ios' ? undefined : 1}
98
- hoverEffect={{ color: textColor }}
108
+ hoverEffect={
109
+ typeof textColor === 'string' ? { color: textColor } : undefined
110
+ }
99
111
  style={[{ backgroundColor }, styles.button, style]}
100
112
  >
101
113
  <Text style={[{ color: textColor }, fonts.regular, styles.text]}>
package/src/Color.tsx ADDED
@@ -0,0 +1,21 @@
1
+ // eslint-disable-next-line no-restricted-imports
2
+ import OriginalColor from 'color';
3
+ import type { ColorValue } from 'react-native';
4
+
5
+ type ColorType = {
6
+ isLight(): boolean;
7
+ isDark(): boolean;
8
+ alpha(amount: number): ColorType;
9
+ alpha(): number;
10
+ fade(amount: number): ColorType;
11
+ darken(amount: number): ColorType;
12
+ string(): string;
13
+ };
14
+
15
+ export function Color(value: ColorValue): ColorType | undefined {
16
+ if (typeof value === 'string' && !value.startsWith('var(')) {
17
+ return OriginalColor(value);
18
+ }
19
+
20
+ return undefined;
21
+ }