@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
@@ -0,0 +1,8 @@
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 const PlatformColor:
7
+ | typeof import('react-native').PlatformColor
8
+ | undefined = undefined;
@@ -2,6 +2,7 @@ import { useTheme } from '@react-navigation/native';
2
2
  import * as React from 'react';
3
3
  import {
4
4
  Animated,
5
+ type ColorValue,
5
6
  Easing,
6
7
  type GestureResponderEvent,
7
8
  Platform,
@@ -19,7 +20,7 @@ type HoverEffectProps = {
19
20
 
20
21
  export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
21
22
  href?: string;
22
- pressColor?: string;
23
+ pressColor?: ColorValue;
23
24
  pressOpacity?: number;
24
25
  hoverEffect?: HoverEffectProps;
25
26
  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
package/src/Screen.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import {
2
- NavigationContext,
3
2
  type NavigationProp,
4
- NavigationRouteContext,
3
+ NavigationProvider,
5
4
  type ParamListBase,
6
5
  type RouteProp,
6
+ useTheme,
7
7
  } from '@react-navigation/native';
8
8
  import * as React from 'react';
9
9
  import {
@@ -15,7 +15,6 @@ import {
15
15
  } from 'react-native';
16
16
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
17
17
 
18
- import { Background } from './Background';
19
18
  import { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
20
19
  import { HeaderHeightContext } from './Header/HeaderHeightContext';
21
20
  import { HeaderShownContext } from './Header/HeaderShownContext';
@@ -36,6 +35,7 @@ type Props = {
36
35
 
37
36
  export function Screen(props: Props) {
38
37
  const insets = useSafeAreaInsets();
38
+ const { colors } = useTheme();
39
39
 
40
40
  const isParentHeaderShown = React.useContext(HeaderShownContext);
41
41
  const parentHeaderHeight = React.useContext(HeaderHeightContext);
@@ -54,7 +54,11 @@ export function Screen(props: Props) {
54
54
  } = props;
55
55
 
56
56
  const defaultHeaderHeight = useFrameSize((size) =>
57
- getDefaultHeaderHeight(size, modal, headerStatusBarHeight)
57
+ getDefaultHeaderHeight({
58
+ landscape: size.width > size.height,
59
+ modalPresentation: modal,
60
+ topInset: headerStatusBarHeight,
61
+ })
58
62
  );
59
63
 
60
64
  const headerRef = React.useRef<View>(null);
@@ -68,33 +72,27 @@ export function Screen(props: Props) {
68
72
  }, [route.name]);
69
73
 
70
74
  return (
71
- <Background
75
+ <Animated.View
72
76
  aria-hidden={!focused}
73
- style={[styles.container, style]}
77
+ style={[styles.container, { backgroundColor: colors.background }, style]}
74
78
  // On Fabric we need to disable collapsing for the background to ensure
75
79
  // that we won't render unnecessary views due to the view flattening.
76
80
  collapsable={false}
77
81
  >
78
82
  {headerShown ? (
79
- <NavigationContext.Provider value={navigation}>
80
- <NavigationRouteContext.Provider value={route}>
81
- <View
82
- ref={headerRef}
83
- pointerEvents="box-none"
84
- onLayout={(e) => {
85
- const { height } = e.nativeEvent.layout;
83
+ <NavigationProvider navigation={navigation} route={route}>
84
+ <View
85
+ ref={headerRef}
86
+ onLayout={(e) => {
87
+ const { height } = e.nativeEvent.layout;
86
88
 
87
- setHeaderHeight(height);
88
- }}
89
- style={[
90
- styles.header,
91
- headerTransparent ? styles.absolute : null,
92
- ]}
93
- >
94
- {header}
95
- </View>
96
- </NavigationRouteContext.Provider>
97
- </NavigationContext.Provider>
89
+ setHeaderHeight(height);
90
+ }}
91
+ style={[styles.header, headerTransparent ? styles.absolute : null]}
92
+ >
93
+ {header}
94
+ </View>
95
+ </NavigationProvider>
98
96
  ) : null}
99
97
  <View style={styles.content}>
100
98
  <HeaderShownContext.Provider
@@ -107,7 +105,7 @@ export function Screen(props: Props) {
107
105
  </HeaderHeightContext.Provider>
108
106
  </HeaderShownContext.Provider>
109
107
  </View>
110
- </Background>
108
+ </Animated.View>
111
109
  );
112
110
  }
113
111
 
@@ -120,6 +118,7 @@ const styles = StyleSheet.create({
120
118
  },
121
119
  header: {
122
120
  zIndex: 1,
121
+ pointerEvents: 'box-none',
123
122
  },
124
123
  absolute: {
125
124
  position: 'absolute',
@@ -0,0 +1,4 @@
1
+ <svg viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.527 1.485L1.584 10.5L10.559 19.542" stroke="#0c0000" stroke-width="2.5" stroke-linecap="round"
3
+ stroke-linejoin="round" />
4
+ </svg>
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,4 @@
1
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="9.75" cy="9.75" r="8" stroke="#000" stroke-width="2" />
3
+ <path d="M15.5 15.5L22 22" stroke="#000" stroke-width="2" stroke-linecap="round" />
4
+ </svg>
Binary file
Binary file
Binary file
Binary file
@@ -0,0 +1,68 @@
1
+ /**
2
+ * Copied from expo-blur
3
+ * https://github.com/expo/expo/blob/d9cec38a1db4dcf3306a1814651386a99b9aaa73/packages/expo-blur/src/getBackgroundColor.ts
4
+ */
5
+
6
+ export type BlurEffectType =
7
+ | 'extraLight'
8
+ | 'light'
9
+ | 'dark'
10
+ | 'regular'
11
+ | 'prominent'
12
+ | 'systemUltraThinMaterial'
13
+ | 'systemThinMaterial'
14
+ | 'systemMaterial'
15
+ | 'systemThickMaterial'
16
+ | 'systemChromeMaterial'
17
+ | 'systemUltraThinMaterialLight'
18
+ | 'systemThinMaterialLight'
19
+ | 'systemMaterialLight'
20
+ | 'systemThickMaterialLight'
21
+ | 'systemChromeMaterialLight'
22
+ | 'systemUltraThinMaterialDark'
23
+ | 'systemThinMaterialDark'
24
+ | 'systemMaterialDark'
25
+ | 'systemThickMaterialDark'
26
+ | 'systemChromeMaterialDark';
27
+
28
+ export function getBlurBackgroundColor(type: BlurEffectType): string {
29
+ const multiplier = 0.5;
30
+
31
+ switch (type) {
32
+ // From Apple iOS 14 Sketch Kit - https://developer.apple.com/design/resources/
33
+ case 'dark':
34
+ case 'systemMaterialDark':
35
+ return `rgba(25,25,25,${multiplier * 0.78})`;
36
+ case 'light':
37
+ case 'extraLight':
38
+ case 'systemMaterialLight':
39
+ case 'systemUltraThinMaterialLight':
40
+ case 'systemThickMaterialLight':
41
+ return `rgba(249,249,249,${multiplier * 0.78})`;
42
+ case 'prominent':
43
+ case 'systemMaterial':
44
+ return `rgba(255,255,255,${multiplier * 0.3})`;
45
+ case 'regular':
46
+ return `rgba(179,179,179,${multiplier * 0.82})`;
47
+ case 'systemThinMaterial':
48
+ return `rgba(199,199,199,${multiplier * 0.97})`;
49
+ case 'systemChromeMaterial':
50
+ return `rgba(255,255,255,${multiplier * 0.75})`;
51
+ case 'systemChromeMaterialLight':
52
+ return `rgba(255,255,255,${multiplier * 0.97})`;
53
+ case 'systemUltraThinMaterial':
54
+ return `rgba(191,191,191,${multiplier * 0.44})`;
55
+ case 'systemThickMaterial':
56
+ return `rgba(191,191,191,${multiplier * 0.44})`;
57
+ case 'systemThickMaterialDark':
58
+ return `rgba(37,37,37,${multiplier * 0.9})`;
59
+ case 'systemThinMaterialDark':
60
+ return `rgba(37,37,37,${multiplier * 0.7})`;
61
+ case 'systemUltraThinMaterialDark':
62
+ return `rgba(37,37,37,${multiplier * 0.55})`;
63
+ case 'systemChromeMaterialDark':
64
+ return `rgba(0,0,0,${multiplier * 0.75})`;
65
+ case 'systemThinMaterialLight':
66
+ return `rgba(199,199,199,${multiplier * 0.78})`;
67
+ }
68
+ }
package/src/index.tsx CHANGED
@@ -1,10 +1,9 @@
1
1
  import backIcon from './assets/back-icon.png';
2
- import backIconMask from './assets/back-icon-mask.png';
3
2
  import clearIcon from './assets/clear-icon.png';
4
3
  import closeIcon from './assets/close-icon.png';
5
4
  import searchIcon from './assets/search-icon.png';
5
+ import searchIconLegacy from './assets/search-icon-legacy.png';
6
6
 
7
- export { Background } from './Background';
8
7
  export { Badge } from './Badge';
9
8
  export { Button } from './Button';
10
9
  export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
@@ -21,19 +20,14 @@ export { HeaderTitle } from './Header/HeaderTitle';
21
20
  export { useHeaderHeight } from './Header/useHeaderHeight';
22
21
  export { getLabel } from './Label/getLabel';
23
22
  export { Label } from './Label/Label';
24
- export { Lazy } from './Lazy';
25
- export { MissingIcon } from './MissingIcon';
26
23
  export { PlatformPressable } from './PlatformPressable';
27
- export { ResourceSavingView } from './ResourceSavingView';
28
- export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
29
- export { Screen } from './Screen';
30
24
  export { Text } from './Text';
31
25
  export { useFrameSize } from './useFrameSize';
32
26
 
33
27
  export const Assets = [
34
28
  backIcon,
35
- backIconMask,
36
29
  searchIcon,
30
+ searchIconLegacy,
37
31
  closeIcon,
38
32
  clearIcon,
39
33
  ];
@@ -0,0 +1,7 @@
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';
package/src/types.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type {
2
2
  Animated,
3
+ ColorValue,
3
4
  LayoutChangeEvent,
4
5
  StyleProp,
5
6
  TextInputProps,
@@ -7,6 +8,8 @@ import type {
7
8
  ViewStyle,
8
9
  } from 'react-native';
9
10
 
11
+ import type { BlurEffectType } from './getBlurBackgroundColor';
12
+
10
13
  export type HeaderBackButtonDisplayMode = 'default' | 'generic' | 'minimal';
11
14
 
12
15
  export type Layout = { width: number; height: number };
@@ -66,7 +69,7 @@ export type HeaderSearchBarOptions = {
66
69
  * A callback that gets called when the text changes.
67
70
  * It receives the current text value of the search input.
68
71
  */
69
- onChangeText?: TextInputProps['onChange'];
72
+ onChange?: TextInputProps['onChange'];
70
73
  /**
71
74
  * Callback that is called when the submit button is pressed.
72
75
  * It receives the current text value of the search input.
@@ -159,8 +162,8 @@ export type HeaderOptions = {
159
162
  * Function which returns a React Element to display on the right side of the header.
160
163
  */
161
164
  headerRight?: (props: {
162
- tintColor?: string;
163
- pressColor?: string;
165
+ tintColor?: ColorValue;
166
+ pressColor?: ColorValue;
164
167
  pressOpacity?: number;
165
168
  canGoBack: boolean;
166
169
  }) => React.ReactNode;
@@ -171,7 +174,7 @@ export type HeaderOptions = {
171
174
  /**
172
175
  * Color for material ripple (Android >= 5.0 only).
173
176
  */
174
- headerPressColor?: string;
177
+ headerPressColor?: ColorValue;
175
178
  /**
176
179
  * Color for material ripple (Android >= 5.0 only).
177
180
  */
@@ -179,7 +182,7 @@ export type HeaderOptions = {
179
182
  /**
180
183
  * Tint color for the header.
181
184
  */
182
- headerTintColor?: string;
185
+ headerTintColor?: ColorValue;
183
186
  /**
184
187
  * Function which returns a React Element to render as the background of the header.
185
188
  * This is useful for using backgrounds such as an image, a gradient, blur effect etc.
@@ -200,6 +203,15 @@ export type HeaderOptions = {
200
203
  * This is useful if you want to render a semi-transparent header or a blurred background.
201
204
  */
202
205
  headerTransparent?: boolean;
206
+ /**
207
+ * Blur effect for the translucent header.
208
+ * The `headerTransparent` option needs to be set to `true` for this to work.
209
+ *
210
+ * Only supported on Web.
211
+ *
212
+ * @platform web
213
+ */
214
+ headerBlurEffect?: BlurEffectType | 'none';
203
215
  /**
204
216
  * Style object for the header. You can specify a custom background color here, for example.
205
217
  */
@@ -241,7 +253,7 @@ export type HeaderTitleProps = {
241
253
  /**
242
254
  * Tint color for the header.
243
255
  */
244
- tintColor?: string;
256
+ tintColor?: ColorValue;
245
257
  /**
246
258
  * Callback to trigger when the size of the title element changes.
247
259
  */
@@ -276,11 +288,11 @@ export type HeaderButtonProps = {
276
288
  /**
277
289
  * Tint color for the header button.
278
290
  */
279
- tintColor?: string;
291
+ tintColor?: ColorValue;
280
292
  /**
281
293
  * Color for material ripple (Android >= 5.0 only).
282
294
  */
283
- pressColor?: string;
295
+ pressColor?: ColorValue;
284
296
  /**
285
297
  * Opacity when the button is pressed, used when ripple is not supported.
286
298
  */
@@ -299,7 +311,7 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
299
311
  /**
300
312
  * Function which returns a React Element to display custom image in header's back button.
301
313
  */
302
- backImage?: (props: { tintColor: string }) => React.ReactNode;
314
+ backImage?: (props: { tintColor: ColorValue }) => React.ReactNode;
303
315
  /**
304
316
  * Label text for the button. Usually the title of the previous screen.
305
317
  * By default, this is only shown on iOS.
@@ -328,16 +340,4 @@ export type HeaderBackButtonProps = Omit<HeaderButtonProps, 'children'> & {
328
340
  * Whether label font should scale to respect Text Size accessibility settings.
329
341
  */
330
342
  allowFontScaling?: boolean;
331
- /**
332
- * Callback to trigger when the size of the label changes.
333
- */
334
- onLabelLayout?: (e: LayoutChangeEvent) => void;
335
- /**
336
- * Layout of the screen.
337
- */
338
- screenLayout?: Layout;
339
- /**
340
- * Layout of the title element in the header.
341
- */
342
- titleLayout?: Layout;
343
343
  };
@@ -59,15 +59,15 @@ export function FrameSizeProvider({
59
59
  height: initialFrame.height,
60
60
  });
61
61
 
62
- const listeners = React.useRef<Set<Listener>>(new Set());
62
+ const listeners = React.useRef<Set<Listener>>(new Set()).current;
63
63
 
64
64
  const getCurrent = useLatestCallback(() => frameRef.current);
65
65
 
66
66
  const subscribe = useLatestCallback((listener: Listener): RemoveListener => {
67
- listeners.current.add(listener);
67
+ listeners.add(listener);
68
68
 
69
69
  return () => {
70
- listeners.current.delete(listener);
70
+ listeners.delete(listener);
71
71
  };
72
72
  });
73
73
 
@@ -131,7 +131,7 @@ export function FrameSizeProvider({
131
131
  }
132
132
 
133
133
  frameRef.current = { width: frame.width, height: frame.height };
134
- listeners.current.forEach((listener) => listener());
134
+ listeners.forEach((listener) => listener());
135
135
  });
136
136
 
137
137
  const viewRef = React.useRef<View>(null);
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- import { useTheme } from '@react-navigation/native';
4
- import * as React from 'react';
5
- import { Animated } from 'react-native';
6
- import { jsx as _jsx } from "react/jsx-runtime";
7
- export function Background({
8
- style,
9
- ...rest
10
- }) {
11
- const {
12
- colors
13
- } = useTheme();
14
- return /*#__PURE__*/_jsx(Animated.View, {
15
- ...rest,
16
- style: [{
17
- flex: 1,
18
- backgroundColor: colors.background
19
- }, style]
20
- });
21
- }
22
- //# sourceMappingURL=Background.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useTheme","React","Animated","jsx","_jsx","Background","style","rest","colors","View","flex","backgroundColor","background"],"sourceRoot":"../../src","sources":["Background.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,QAIH,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtB,OAAO,SAASC,UAAUA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,EAAE;EACpD,MAAM;IAAEC;EAAO,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAE7B,oBACEI,IAAA,CAACF,QAAQ,CAACO,IAAI;IAAA,GACRF,IAAI;IACRD,KAAK,EAAE,CAAC;MAAEI,IAAI,EAAE,CAAC;MAAEC,eAAe,EAAEH,MAAM,CAACI;IAAW,CAAC,EAAEN,KAAK;EAAE,CACjE,CAAC;AAEN","ignoreList":[]}
@@ -1,4 +0,0 @@
1
- "use strict";
2
-
3
- export { MaskedView } from "./MaskedViewNative.js";
4
- //# sourceMappingURL=MaskedView.android.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["MaskedView"],"sourceRoot":"../../src","sources":["MaskedView.android.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,uBAAoB","ignoreList":[]}
@@ -1,4 +0,0 @@
1
- "use strict";
2
-
3
- export { MaskedView } from "./MaskedViewNative.js";
4
- //# sourceMappingURL=MaskedView.ios.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["MaskedView"],"sourceRoot":"../../src","sources":["MaskedView.ios.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,uBAAoB","ignoreList":[]}
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- /**
4
- * Use a stub for MaskedView on all Platforms that don't support it.
5
- */
6
-
7
- export function MaskedView({
8
- children
9
- }) {
10
- return children;
11
- }
12
- //# sourceMappingURL=MaskedView.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["MaskedView","children"],"sourceRoot":"../../src","sources":["MaskedView.tsx"],"mappings":";;AAAA;AACA;AACA;;AAQA,OAAO,SAASA,UAAUA,CAAC;EAAEC;AAAgB,CAAC,EAAE;EAC9C,OAAOA,QAAQ;AACjB","ignoreList":[]}
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- /**
4
- * The native MaskedView that we explicitly re-export for supported platforms: Android, iOS.
5
- */
6
- import * as React from 'react';
7
- import { UIManager } from 'react-native';
8
- import { jsx as _jsx } from "react/jsx-runtime";
9
- let RNCMaskedView;
10
- try {
11
- // Add try/catch to support usage even if it's not installed, since it's optional.
12
- // Newer versions of Metro will handle it properly.
13
- RNCMaskedView = require('@react-native-masked-view/masked-view').default;
14
- } catch (e) {
15
- // Ignore
16
- }
17
- const isMaskedViewAvailable = UIManager.getViewManagerConfig('RNCMaskedView') != null;
18
- export function MaskedView({
19
- children,
20
- ...rest
21
- }) {
22
- if (isMaskedViewAvailable && RNCMaskedView) {
23
- return /*#__PURE__*/_jsx(RNCMaskedView, {
24
- ...rest,
25
- children: children
26
- });
27
- }
28
- return children;
29
- }
30
- //# sourceMappingURL=MaskedViewNative.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","UIManager","jsx","_jsx","RNCMaskedView","require","default","e","isMaskedViewAvailable","getViewManagerConfig","MaskedView","children","rest"],"sourceRoot":"../../src","sources":["MaskedViewNative.tsx"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASzC,IAAIC,aAAyC;AAE7C,IAAI;EACF;EACA;EACAA,aAAa,GAAGC,OAAO,CAAC,uCAAuC,CAAC,CAACC,OAAO;AAC1E,CAAC,CAAC,OAAOC,CAAC,EAAE;EACV;AAAA;AAGF,MAAMC,qBAAqB,GACzBP,SAAS,CAACQ,oBAAoB,CAAC,eAAe,CAAC,IAAI,IAAI;AAEzD,OAAO,SAASC,UAAUA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAY,CAAC,EAAE;EACvD,IAAIJ,qBAAqB,IAAIJ,aAAa,EAAE;IAC1C,oBAAOD,IAAA,CAACC,aAAa;MAAA,GAAKQ,IAAI;MAAAD,QAAA,EAAGA;IAAQ,CAAgB,CAAC;EAC5D;EAEA,OAAOA,QAAQ;AACjB","ignoreList":[]}
@@ -1,57 +0,0 @@
1
- "use strict";
2
-
3
- import * as React from 'react';
4
- import { Platform, StyleSheet, View } from 'react-native';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- const FAR_FAR_AWAY = 30000; // this should be big enough to move the whole view out of its container
7
-
8
- export function ResourceSavingView({
9
- visible,
10
- children,
11
- style,
12
- ...rest
13
- }) {
14
- if (Platform.OS === 'web') {
15
- return /*#__PURE__*/_jsx(View
16
- // @ts-expect-error: hidden exists on web, but not in React Native
17
- , {
18
- hidden: !visible,
19
- style: [{
20
- display: visible ? 'flex' : 'none'
21
- }, styles.container, style],
22
- pointerEvents: visible ? 'auto' : 'none',
23
- ...rest,
24
- children: children
25
- });
26
- }
27
- return /*#__PURE__*/_jsx(View, {
28
- style: [styles.container, style]
29
- // box-none doesn't seem to work properly on Android
30
- ,
31
- pointerEvents: visible ? 'auto' : 'none',
32
- children: /*#__PURE__*/_jsx(View, {
33
- collapsable: false,
34
- removeClippedSubviews:
35
- // On iOS & macOS, set removeClippedSubviews to true only when not focused
36
- // This is an workaround for a bug where the clipped view never re-appears
37
- Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true,
38
- pointerEvents: visible ? 'auto' : 'none',
39
- style: visible ? styles.attached : styles.detached,
40
- children: children
41
- })
42
- });
43
- }
44
- const styles = StyleSheet.create({
45
- container: {
46
- flex: 1,
47
- overflow: 'hidden'
48
- },
49
- attached: {
50
- flex: 1
51
- },
52
- detached: {
53
- flex: 1,
54
- top: FAR_FAR_AWAY
55
- }
56
- });
57
- //# sourceMappingURL=ResourceSavingView.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","Platform","StyleSheet","View","jsx","_jsx","FAR_FAR_AWAY","ResourceSavingView","visible","children","style","rest","OS","hidden","display","styles","container","pointerEvents","collapsable","removeClippedSubviews","attached","detached","create","flex","overflow","top"],"sourceRoot":"../../src","sources":["ResourceSavingView.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EAERC,UAAU,EACVC,IAAI,QAEC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQtB,MAAMC,YAAY,GAAG,KAAK,CAAC,CAAC;;AAE5B,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,OAAO;EACPC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACE,CAAC,EAAE;EACR,IAAIV,QAAQ,CAACW,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEP,IAAA,CAACF;IACC;IAAA;MACAU,MAAM,EAAE,CAACL,OAAQ;MACjBE,KAAK,EAAE,CACL;QAAEI,OAAO,EAAEN,OAAO,GAAG,MAAM,GAAG;MAAO,CAAC,EACtCO,MAAM,CAACC,SAAS,EAChBN,KAAK,CACL;MACFO,aAAa,EAAET,OAAO,GAAG,MAAM,GAAG,MAAO;MAAA,GACrCG,IAAI;MAAAF,QAAA,EAEPA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEJ,IAAA,CAACF,IAAI;IACHO,KAAK,EAAE,CAACK,MAAM,CAACC,SAAS,EAAEN,KAAK;IAC/B;IAAA;IACAO,aAAa,EAAET,OAAO,GAAG,MAAM,GAAG,MAAO;IAAAC,QAAA,eAEzCJ,IAAA,CAACF,IAAI;MACHe,WAAW,EAAE,KAAM;MACnBC,qBAAqB;MACnB;MACA;MACAlB,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIX,QAAQ,CAACW,EAAE,KAAK,OAAO,GAAG,CAACJ,OAAO,GAAG,IAC/D;MACDS,aAAa,EAAET,OAAO,GAAG,MAAM,GAAG,MAAO;MACzCE,KAAK,EAAEF,OAAO,GAAGO,MAAM,CAACK,QAAQ,GAAGL,MAAM,CAACM,QAAS;MAAAZ,QAAA,EAElDA;IAAQ,CACL;EAAC,CACH,CAAC;AAEX;AAEA,MAAMM,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE;EACZ,CAAC;EACDJ,QAAQ,EAAE;IACRG,IAAI,EAAE;EACR,CAAC;EACDF,QAAQ,EAAE;IACRE,IAAI,EAAE,CAAC;IACPE,GAAG,EAAEnB;EACP;AACF,CAAC,CAAC","ignoreList":[]}
@@ -1,9 +0,0 @@
1
- import * as React from 'react';
2
- import { Animated, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
3
- type Props = Omit<ViewProps, 'style'> & {
4
- style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
5
- children: React.ReactNode;
6
- };
7
- export declare function Background({ style, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
8
- export {};
9
- //# sourceMappingURL=Background.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../src/Background.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG;IACtC,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CASnD"}
@@ -1,2 +0,0 @@
1
- export { MaskedView } from './MaskedViewNative';
2
- //# sourceMappingURL=MaskedView.android.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MaskedView.android.d.ts","sourceRoot":"","sources":["../../../src/MaskedView.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}
@@ -1,11 +0,0 @@
1
- /**
2
- * Use a stub for MaskedView on all Platforms that don't support it.
3
- */
4
- import type * as React from 'react';
5
- type Props = {
6
- maskElement: React.ReactElement;
7
- children: React.ReactElement;
8
- };
9
- export declare function MaskedView({ children }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
10
- export {};
11
- //# sourceMappingURL=MaskedView.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MaskedView.d.ts","sourceRoot":"","sources":["../../../src/MaskedView.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,0EAE7C"}
@@ -1,2 +0,0 @@
1
- export { MaskedView } from './MaskedViewNative';
2
- //# sourceMappingURL=MaskedView.ios.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MaskedView.ios.d.ts","sourceRoot":"","sources":["../../../src/MaskedView.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}