@react-navigation/elements 3.0.0-alpha.3 → 3.0.0-alpha.30

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 (177) hide show
  1. package/lib/module/ActivityView.js +90 -0
  2. package/lib/module/ActivityView.js.map +1 -0
  3. package/lib/module/ActivityView.native.js +67 -0
  4. package/lib/module/ActivityView.native.js.map +1 -0
  5. package/lib/module/Badge.js +5 -4
  6. package/lib/module/Badge.js.map +1 -1
  7. package/lib/module/Button.js +91 -13
  8. package/lib/module/Button.js.map +1 -1
  9. package/lib/module/Color.js +552 -4
  10. package/lib/module/Color.js.map +1 -1
  11. package/lib/module/Container.js +11 -1
  12. package/lib/module/Container.js.map +1 -1
  13. package/lib/module/Header/Header.js +26 -11
  14. package/lib/module/Header/Header.js.map +1 -1
  15. package/lib/module/Header/HeaderBackButton.js +27 -13
  16. package/lib/module/Header/HeaderBackButton.js.map +1 -1
  17. package/lib/module/Header/HeaderButton.js +4 -5
  18. package/lib/module/Header/HeaderButton.js.map +1 -1
  19. package/lib/module/Header/HeaderIcon.js +29 -10
  20. package/lib/module/Header/HeaderIcon.js.map +1 -1
  21. package/lib/module/Header/HeaderSearchBar.js +31 -24
  22. package/lib/module/Header/HeaderSearchBar.js.map +1 -1
  23. package/lib/module/Header/getHeaderTitle.js.map +1 -1
  24. package/lib/module/Header/useHeaderHeight.js +1 -1
  25. package/lib/module/Header/useHeaderHeight.js.map +1 -1
  26. package/lib/module/Label/getLabel.js.map +1 -1
  27. package/lib/module/PlatformColor.js +1 -0
  28. package/lib/module/PlatformColor.js.map +1 -1
  29. package/lib/module/PlatformColor.native.js +1 -1
  30. package/lib/module/PlatformColor.native.js.map +1 -1
  31. package/lib/module/PlatformPressable.js +14 -5
  32. package/lib/module/PlatformPressable.js.map +1 -1
  33. package/lib/module/SafeAreaProviderCompat.js +1 -1
  34. package/lib/module/SafeAreaProviderCompat.js.map +1 -1
  35. package/lib/module/Screen.js +31 -18
  36. package/lib/module/Screen.js.map +1 -1
  37. package/lib/module/index.js +1 -7
  38. package/lib/module/index.js.map +1 -1
  39. package/lib/module/internal.js +1 -1
  40. package/lib/module/internal.js.map +1 -1
  41. package/lib/module/useFrameSize.js +1 -1
  42. package/lib/module/useFrameSize.js.map +1 -1
  43. package/lib/typescript/src/ActivityView.d.ts +31 -0
  44. package/lib/typescript/src/ActivityView.d.ts.map +1 -0
  45. package/lib/typescript/src/ActivityView.native.d.ts +3 -0
  46. package/lib/typescript/src/ActivityView.native.d.ts.map +1 -0
  47. package/lib/typescript/src/Badge.d.ts +3 -3
  48. package/lib/typescript/src/Badge.d.ts.map +1 -1
  49. package/lib/typescript/src/Button.d.ts +35 -4
  50. package/lib/typescript/src/Button.d.ts.map +1 -1
  51. package/lib/typescript/src/Color.d.ts +4 -4
  52. package/lib/typescript/src/Color.d.ts.map +1 -1
  53. package/lib/typescript/src/Container.d.ts +7 -4
  54. package/lib/typescript/src/Container.d.ts.map +1 -1
  55. package/lib/typescript/src/Header/Header.d.ts +2 -2
  56. package/lib/typescript/src/Header/Header.d.ts.map +1 -1
  57. package/lib/typescript/src/Header/HeaderBackButton.d.ts +1 -1
  58. package/lib/typescript/src/Header/HeaderBackButton.d.ts.map +1 -1
  59. package/lib/typescript/src/Header/HeaderBackground.d.ts +3 -3
  60. package/lib/typescript/src/Header/HeaderBackground.d.ts.map +1 -1
  61. package/lib/typescript/src/Header/HeaderButton.d.ts +6 -1
  62. package/lib/typescript/src/Header/HeaderButton.d.ts.map +1 -1
  63. package/lib/typescript/src/Header/HeaderIcon.d.ts +8 -4
  64. package/lib/typescript/src/Header/HeaderIcon.d.ts.map +1 -1
  65. package/lib/typescript/src/Header/HeaderSearchBar.d.ts +9 -6
  66. package/lib/typescript/src/Header/HeaderSearchBar.d.ts.map +1 -1
  67. package/lib/typescript/src/Header/HeaderTitle.d.ts +3 -3
  68. package/lib/typescript/src/Header/HeaderTitle.d.ts.map +1 -1
  69. package/lib/typescript/src/Header/getHeaderTitle.d.ts +1 -1
  70. package/lib/typescript/src/Header/getHeaderTitle.d.ts.map +1 -1
  71. package/lib/typescript/src/Label/getLabel.d.ts +2 -2
  72. package/lib/typescript/src/Label/getLabel.d.ts.map +1 -1
  73. package/lib/typescript/src/PlatformColor.d.ts +1 -0
  74. package/lib/typescript/src/PlatformColor.d.ts.map +1 -1
  75. package/lib/typescript/src/PlatformColor.native.d.ts +1 -1
  76. package/lib/typescript/src/PlatformColor.native.d.ts.map +1 -1
  77. package/lib/typescript/src/PlatformPressable.d.ts +12 -15
  78. package/lib/typescript/src/PlatformPressable.d.ts.map +1 -1
  79. package/lib/typescript/src/Screen.d.ts +6 -6
  80. package/lib/typescript/src/Screen.d.ts.map +1 -1
  81. package/lib/typescript/src/index.d.ts +1 -2
  82. package/lib/typescript/src/index.d.ts.map +1 -1
  83. package/lib/typescript/src/internal.d.ts +1 -1
  84. package/lib/typescript/src/internal.d.ts.map +1 -1
  85. package/lib/typescript/src/types.d.ts +119 -69
  86. package/lib/typescript/src/types.d.ts.map +1 -1
  87. package/package.json +20 -20
  88. package/src/ActivityView.native.tsx +90 -0
  89. package/src/ActivityView.tsx +129 -0
  90. package/src/Badge.tsx +9 -7
  91. package/src/Button.tsx +151 -14
  92. package/src/Color.tsx +726 -8
  93. package/src/Container.tsx +20 -4
  94. package/src/Header/Header.tsx +43 -20
  95. package/src/Header/HeaderBackButton.tsx +31 -17
  96. package/src/Header/HeaderBackground.tsx +3 -3
  97. package/src/Header/HeaderButton.tsx +16 -18
  98. package/src/Header/HeaderIcon.tsx +49 -9
  99. package/src/Header/HeaderSearchBar.tsx +50 -44
  100. package/src/Header/HeaderTitle.tsx +3 -3
  101. package/src/Header/getHeaderTitle.tsx +4 -1
  102. package/src/Header/useHeaderHeight.tsx +1 -1
  103. package/src/Label/getLabel.tsx +1 -1
  104. package/src/PlatformColor.native.tsx +1 -1
  105. package/src/PlatformColor.tsx +4 -0
  106. package/src/PlatformPressable.tsx +40 -29
  107. package/src/SafeAreaProviderCompat.tsx +1 -1
  108. package/src/Screen.tsx +40 -27
  109. package/src/index.tsx +1 -16
  110. package/src/internal.tsx +1 -1
  111. package/src/types.tsx +153 -76
  112. package/src/useFrameSize.tsx +1 -1
  113. package/lib/module/Lazy.js +0 -42
  114. package/lib/module/Lazy.js.map +0 -1
  115. package/lib/module/assets/back-icon.ios.svg +0 -4
  116. package/lib/module/assets/back-icon@1x.android.png +0 -0
  117. package/lib/module/assets/back-icon@1x.ios.png +0 -0
  118. package/lib/module/assets/back-icon@2x.android.png +0 -0
  119. package/lib/module/assets/back-icon@2x.ios.png +0 -0
  120. package/lib/module/assets/back-icon@3x.android.png +0 -0
  121. package/lib/module/assets/back-icon@3x.ios.png +0 -0
  122. package/lib/module/assets/back-icon@4x.android.png +0 -0
  123. package/lib/module/assets/back-icon@4x.ios.png +0 -0
  124. package/lib/module/assets/clear-icon@1x.png +0 -0
  125. package/lib/module/assets/clear-icon@2x.png +0 -0
  126. package/lib/module/assets/clear-icon@3x.png +0 -0
  127. package/lib/module/assets/clear-icon@4x.png +0 -0
  128. package/lib/module/assets/close-icon@1x.png +0 -0
  129. package/lib/module/assets/close-icon@2x.png +0 -0
  130. package/lib/module/assets/close-icon@3x.png +0 -0
  131. package/lib/module/assets/close-icon@4x.png +0 -0
  132. package/lib/module/assets/search-icon-legacy@1x.ios.png +0 -0
  133. package/lib/module/assets/search-icon-legacy@2x.ios.png +0 -0
  134. package/lib/module/assets/search-icon-legacy@3x.ios.png +0 -0
  135. package/lib/module/assets/search-icon-legacy@4x.ios.png +0 -0
  136. package/lib/module/assets/search-icon.ios.svg +0 -4
  137. package/lib/module/assets/search-icon@1x.android.png +0 -0
  138. package/lib/module/assets/search-icon@1x.ios.png +0 -0
  139. package/lib/module/assets/search-icon@2x.android.png +0 -0
  140. package/lib/module/assets/search-icon@2x.ios.png +0 -0
  141. package/lib/module/assets/search-icon@3x.android.png +0 -0
  142. package/lib/module/assets/search-icon@3x.ios.png +0 -0
  143. package/lib/module/assets/search-icon@4x.android.png +0 -0
  144. package/lib/module/assets/search-icon@4x.ios.png +0 -0
  145. package/lib/typescript/src/Lazy.d.ts +0 -31
  146. package/lib/typescript/src/Lazy.d.ts.map +0 -1
  147. package/src/Lazy.tsx +0 -59
  148. package/src/assets/back-icon.ios.svg +0 -4
  149. package/src/assets/back-icon@1x.android.png +0 -0
  150. package/src/assets/back-icon@1x.ios.png +0 -0
  151. package/src/assets/back-icon@2x.android.png +0 -0
  152. package/src/assets/back-icon@2x.ios.png +0 -0
  153. package/src/assets/back-icon@3x.android.png +0 -0
  154. package/src/assets/back-icon@3x.ios.png +0 -0
  155. package/src/assets/back-icon@4x.android.png +0 -0
  156. package/src/assets/back-icon@4x.ios.png +0 -0
  157. package/src/assets/clear-icon@1x.png +0 -0
  158. package/src/assets/clear-icon@2x.png +0 -0
  159. package/src/assets/clear-icon@3x.png +0 -0
  160. package/src/assets/clear-icon@4x.png +0 -0
  161. package/src/assets/close-icon@1x.png +0 -0
  162. package/src/assets/close-icon@2x.png +0 -0
  163. package/src/assets/close-icon@3x.png +0 -0
  164. package/src/assets/close-icon@4x.png +0 -0
  165. package/src/assets/search-icon-legacy@1x.ios.png +0 -0
  166. package/src/assets/search-icon-legacy@2x.ios.png +0 -0
  167. package/src/assets/search-icon-legacy@3x.ios.png +0 -0
  168. package/src/assets/search-icon-legacy@4x.ios.png +0 -0
  169. package/src/assets/search-icon.ios.svg +0 -4
  170. package/src/assets/search-icon@1x.android.png +0 -0
  171. package/src/assets/search-icon@1x.ios.png +0 -0
  172. package/src/assets/search-icon@2x.android.png +0 -0
  173. package/src/assets/search-icon@2x.ios.png +0 -0
  174. package/src/assets/search-icon@3x.android.png +0 -0
  175. package/src/assets/search-icon@3x.ios.png +0 -0
  176. package/src/assets/search-icon@4x.android.png +0 -0
  177. package/src/assets/search-icon@4x.ios.png +0 -0
@@ -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":"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"}
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": "3.0.0-alpha.3",
4
+ "version": "3.0.0-alpha.30",
5
5
  "keywords": [
6
6
  "react-native",
7
7
  "react-navigation",
@@ -47,32 +47,32 @@
47
47
  "clean": "del lib"
48
48
  },
49
49
  "dependencies": {
50
- "color": "^4.2.3",
51
- "use-latest-callback": "^0.3.2",
52
- "use-sync-external-store": "^1.5.0"
50
+ "sf-symbols-typescript": "^2.2.0",
51
+ "use-latest-callback": "^0.3.3",
52
+ "use-sync-external-store": "^1.6.0"
53
53
  },
54
54
  "devDependencies": {
55
- "@callstack/liquid-glass": "^0.6.0",
56
- "@jest/globals": "^30.0.0",
57
- "@react-navigation/native": "^8.0.0-alpha.3",
58
- "@testing-library/react-native": "^13.2.1",
59
- "@types/react": "~19.1.10",
55
+ "@callstack/liquid-glass": "^0.7.1",
56
+ "@jest/globals": "^30.3.0",
57
+ "@react-navigation/native": "^8.0.0-alpha.27",
58
+ "@testing-library/react-native": "^13.3.3",
59
+ "@types/react": "~19.2.2",
60
60
  "@types/use-sync-external-store": "^1.5.0",
61
- "del-cli": "^6.0.0",
62
- "react": "19.1.0",
63
- "react-native": "0.81.4",
64
- "react-native-builder-bob": "^0.40.12",
65
- "react-native-screens": "^4.20.0",
66
- "react-test-renderer": "19.1.0",
67
- "typescript": "^5.9.2"
61
+ "del-cli": "^7.0.0",
62
+ "react": "19.2.0",
63
+ "react-native": "0.83.4",
64
+ "react-native-builder-bob": "^0.41.0",
65
+ "react-native-screens": "^4.25.0",
66
+ "react-test-renderer": "19.2.0",
67
+ "typescript": "^6.0.2"
68
68
  },
69
69
  "peerDependencies": {
70
70
  "@callstack/liquid-glass": ">= 0.6.0",
71
- "@react-navigation/native": "^8.0.0-alpha.3",
72
- "react": ">= 19.0.0",
71
+ "@react-navigation/native": "^8.0.0-alpha.27",
72
+ "react": ">= 19.2.0",
73
73
  "react-native": "*",
74
74
  "react-native-safe-area-context": ">= 5.5.0",
75
- "react-native-screens": ">= 4.19.0"
75
+ "react-native-screens": ">= 4.25.0"
76
76
  },
77
77
  "react-native-builder-bob": {
78
78
  "source": "src",
@@ -92,5 +92,5 @@
92
92
  ]
93
93
  ]
94
94
  },
95
- "gitHead": "4579b7cfdf8b149ef04cfb585e2cb6b35ded52d7"
95
+ "gitHead": "b7aefd9b75d991723412d30505221d00debf3665"
96
96
  }
@@ -0,0 +1,90 @@
1
+ import { Activity, useEffect, useState } from 'react';
2
+ import {
3
+ type HostComponent,
4
+ NativeComponentRegistry,
5
+ type ViewProps,
6
+ } from 'react-native';
7
+
8
+ // eslint-disable-next-line import-x/extensions
9
+ import type { Props } from './ActivityView.tsx';
10
+ import { Container } from './Container';
11
+
12
+ export function ActivityView({
13
+ mode,
14
+ visible,
15
+ delay = 500,
16
+ style,
17
+ children,
18
+ }: Props) {
19
+ const [delayedMode, setDelayedMode] = useState(mode);
20
+
21
+ useEffect(() => {
22
+ if (!delay) {
23
+ return;
24
+ }
25
+
26
+ const timer = setTimeout(() => {
27
+ setDelayedMode(mode);
28
+ }, delay);
29
+
30
+ return () => clearTimeout(timer);
31
+ }, [delay, mode]);
32
+
33
+ const display = visible ? 'flex' : 'none';
34
+ const activityMode =
35
+ mode !== 'paused' || (delay && delayedMode !== 'paused')
36
+ ? 'visible'
37
+ : 'hidden';
38
+
39
+ return (
40
+ <Activity mode={activityMode}>
41
+ <ActivityContentView style={{ display: 'contents' }}>
42
+ <Container
43
+ inert={mode !== 'normal'}
44
+ style={{
45
+ ...style,
46
+ /**
47
+ * The visibility of the nested view is controlled by `Activity`
48
+ * It'll be overridden to `display: 'none'` when `mode="hidden"` regardless of what we set
49
+ * So we set the visibility on another view instead
50
+ */
51
+ display,
52
+ }}
53
+ >
54
+ {children}
55
+ </Container>
56
+ </ActivityContentView>
57
+ </Activity>
58
+ );
59
+ }
60
+
61
+ const STYLE: Record<string, true | { process?: (arg1: any) => any }> = {
62
+ display: {
63
+ /**
64
+ * React `Activity` sets `display: 'none'` when `mode="hidden"` to unmount effects
65
+ * But we want to keep the content visible, so we switch it to `display: 'contents'`
66
+ */
67
+ process: () => 'contents',
68
+ },
69
+ };
70
+
71
+ const VIEW_CONFIG = {
72
+ uiViewClassName: 'RCTView',
73
+ validAttributes: {
74
+ style: STYLE,
75
+ },
76
+ };
77
+
78
+ type ActivityContentViewProps = Omit<ViewProps, 'style'> & {
79
+ style?:
80
+ | {
81
+ display?: 'contents' | undefined;
82
+ }
83
+ | undefined;
84
+ };
85
+
86
+ const ActivityContentView: HostComponent<ActivityContentViewProps> =
87
+ NativeComponentRegistry.get<ActivityContentViewProps>(
88
+ 'ReactNavigationActivityContentView',
89
+ () => VIEW_CONFIG
90
+ );
@@ -0,0 +1,129 @@
1
+ import { Activity, useCallback, useEffect, useState } from 'react';
2
+ import { Platform, View, type ViewStyle } from 'react-native';
3
+
4
+ import { Container } from './Container';
5
+
6
+ export type Props = {
7
+ /**
8
+ * Mode of the activity view
9
+ * - `normal`: The view renders normally
10
+ * - `inert`: Content is not interactive
11
+ * - `paused`: Effects are unmounted and content is not interactive
12
+ */
13
+ mode: 'normal' | 'inert' | 'paused';
14
+ /**
15
+ * Whether the content is visible or not
16
+ */
17
+ visible: boolean;
18
+ /**
19
+ * Delay before pausing effects.
20
+ * So pending animations have time to finish.
21
+ *
22
+ * Defaults to 500ms.
23
+ */
24
+ delay?: number | undefined;
25
+ /**
26
+ * The style for the container view
27
+ */
28
+ style?: Omit<React.CSSProperties & ViewStyle, 'display'> | undefined;
29
+ /**
30
+ * The content of the activity view
31
+ */
32
+ children: React.ReactNode;
33
+ };
34
+
35
+ export function ActivityView({
36
+ mode,
37
+ visible,
38
+ delay = 500,
39
+ style,
40
+ children,
41
+ }: Props) {
42
+ const [delayedMode, setDelayedMode] = useState(mode);
43
+
44
+ useEffect(() => {
45
+ if (!delay) {
46
+ return;
47
+ }
48
+
49
+ const timer = setTimeout(() => {
50
+ setDelayedMode(mode);
51
+ }, delay);
52
+
53
+ return () => clearTimeout(timer);
54
+ }, [delay, mode]);
55
+
56
+ const display = visible ? 'flex' : 'none';
57
+ const activityMode =
58
+ mode !== 'paused' || (delay && delayedMode !== 'paused')
59
+ ? 'visible'
60
+ : 'hidden';
61
+
62
+ /**
63
+ * Activity has 2 modes, visible and hidden - hidden unmounts effects
64
+ * But what we want is to unmount effects, without hiding content
65
+ * So we use hidden mode, but unset display: none to make content visible
66
+ */
67
+ const onRef = useCallback(
68
+ (node: HTMLDivElement | View | null) => {
69
+ if (Platform.OS !== 'web' || !(node && node instanceof HTMLElement)) {
70
+ return;
71
+ }
72
+
73
+ const observers: MutationObserver[] = [];
74
+
75
+ const observe = () => {
76
+ // Remove previous observers
77
+ observers.forEach((o) => o.disconnect());
78
+ observers.length = 0;
79
+
80
+ const children = node.childNodes;
81
+
82
+ // When the style attribute for children is updated by React
83
+ // We observe it and update display to make content visible
84
+ children.forEach((child) => {
85
+ if (child instanceof HTMLElement) {
86
+ child.style.display = display;
87
+
88
+ const o = new MutationObserver(() => {
89
+ child.style.display = display;
90
+ });
91
+
92
+ o.observe(child, {
93
+ attributes: true,
94
+ attributeFilter: ['style'],
95
+ });
96
+
97
+ observers.push(o);
98
+ }
99
+ });
100
+ };
101
+
102
+ observe();
103
+
104
+ // React removes refs when `Activity` is hidden
105
+ // So we render outside of the `Activity` and observer child list
106
+ const observer = new MutationObserver(observe);
107
+
108
+ observer.observe(node, {
109
+ childList: true,
110
+ });
111
+
112
+ return () => {
113
+ observer.disconnect();
114
+ observers.forEach((o) => o.disconnect());
115
+ };
116
+ },
117
+ [display]
118
+ );
119
+
120
+ return (
121
+ <Container ref={onRef} style={{ display: 'contents' }}>
122
+ <Activity mode={activityMode}>
123
+ <Container inert={mode !== 'normal'} style={{ ...style, display }}>
124
+ {children}
125
+ </Container>
126
+ </Activity>
127
+ </Container>
128
+ );
129
+ }
package/src/Badge.tsx CHANGED
@@ -19,15 +19,15 @@ type Props = TextProps & {
19
19
  /**
20
20
  * Content of the `Badge`.
21
21
  */
22
- children?: string | number;
22
+ children?: string | number | undefined;
23
23
  /**
24
24
  * Size of the `Badge`.
25
25
  */
26
- size?: number;
26
+ size?: number | undefined;
27
27
  /**
28
28
  * Style object for the tab bar container.
29
29
  */
30
- style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
30
+ style?: Animated.WithAnimatedValue<StyleProp<TextStyle>> | undefined;
31
31
  };
32
32
 
33
33
  const useNativeDriver = Platform.OS !== 'web';
@@ -49,17 +49,19 @@ export function Badge({
49
49
  return;
50
50
  }
51
51
 
52
- Animated.timing(opacity, {
52
+ const animation = Animated.timing(opacity, {
53
53
  toValue: visible ? 1 : 0,
54
54
  duration: 150,
55
55
  useNativeDriver,
56
- }).start(({ finished }) => {
56
+ });
57
+
58
+ animation.start(({ finished }) => {
57
59
  if (finished && !visible) {
58
60
  setRendered(false);
59
61
  }
60
62
  });
61
63
 
62
- return () => opacity.stopAnimation();
64
+ return () => animation.stop();
63
65
  }, [opacity, rendered, visible]);
64
66
 
65
67
  if (!rendered) {
@@ -73,7 +75,7 @@ export function Badge({
73
75
  // @ts-expect-error: backgroundColor definitely exists
74
76
  const { backgroundColor = colors.notification, ...restStyle } =
75
77
  StyleSheet.flatten(style) || {};
76
- const textColor = Color(backgroundColor)?.isLight() ? 'black' : 'white';
78
+ const textColor = Color.foreground(backgroundColor);
77
79
 
78
80
  const borderRadius = size / 2;
79
81
  const fontSize = Math.floor((size * 3) / 4);
package/src/Button.tsx CHANGED
@@ -1,11 +1,19 @@
1
1
  import {
2
2
  type LinkProps,
3
+ MaterialSymbol,
3
4
  type RootParamList,
5
+ SFSymbol,
4
6
  useLinkProps,
5
7
  useTheme,
6
8
  } from '@react-navigation/native';
7
9
  import * as React from 'react';
8
- import { type ColorValue, Platform, StyleSheet } from 'react-native';
10
+ import {
11
+ type ColorValue,
12
+ Image,
13
+ Platform,
14
+ StyleSheet,
15
+ View,
16
+ } from 'react-native';
9
17
 
10
18
  import { Color } from './Color';
11
19
  import {
@@ -13,19 +21,51 @@ import {
13
21
  type Props as PlatformPressableProps,
14
22
  } from './PlatformPressable';
15
23
  import { Text } from './Text';
24
+ import type { Icon } from './types';
16
25
 
17
26
  type ButtonBaseProps = Omit<PlatformPressableProps, 'children'> & {
18
- variant?: 'plain' | 'tinted' | 'filled';
19
- color?: ColorValue;
20
- children: string | string[];
27
+ /**
28
+ * Variant of the button.
29
+ *
30
+ * - `plain`: transparent background, colored text
31
+ * - `tinted`: lightly tinted background, colored text
32
+ * - `filled`: colored background, contrasting text color
33
+ *
34
+ * @default 'tinted'
35
+ */
36
+ variant?: 'plain' | 'tinted' | 'filled' | undefined;
37
+ /**
38
+ * Custom color for the button.
39
+ * Changes the text color for `plain` and `tinted` variants,
40
+ * and background color for `filled` variant.
41
+ */
42
+ color?: ColorValue | undefined;
43
+ /**
44
+ * Icon to display before the label.
45
+ *
46
+ * Supported types:
47
+ * - image: custom image source
48
+ * - sfSymbol: SF Symbol icon (iOS only)
49
+ * - materialSymbol: material symbol icon (Android only)
50
+ * - React Node: function that returns a React Element
51
+ */
52
+ icon?:
53
+ | Icon
54
+ | ((props: { color: ColorValue; size: number }) => Icon | React.ReactNode)
55
+ | undefined;
56
+ /**
57
+ * Label text to display inside the button.
58
+ */
59
+ children: string | string[] | React.ReactElement | React.ReactElement[];
21
60
  };
22
61
 
23
62
  type ButtonLinkProps<
24
63
  ParamList extends {} = RootParamList,
25
64
  RouteName extends keyof ParamList = keyof ParamList,
26
- > = LinkProps<ParamList, RouteName> & Omit<ButtonBaseProps, 'onPress'>;
65
+ > = LinkProps<ParamList, RouteName> & ButtonBaseProps;
27
66
 
28
67
  const BUTTON_RADIUS = 40;
68
+ const ICON_SIZE = 14;
29
69
 
30
70
  export function Button<
31
71
  ParamList extends {} = RootParamList,
@@ -54,18 +94,30 @@ function ButtonLink<
54
94
  params,
55
95
  action,
56
96
  href,
97
+ onPress,
57
98
  ...rest
58
99
  }: ButtonLinkProps<ParamList, RouteName>) {
59
100
  // @ts-expect-error: This is already type-checked by the prop types
60
101
  const props = useLinkProps({ screen, params, action, href });
61
102
 
62
- return <ButtonBase {...rest} {...props} />;
103
+ return (
104
+ <ButtonBase
105
+ {...rest}
106
+ {...props}
107
+ onPress={(e) => {
108
+ onPress?.(e);
109
+ props.onPress?.(e);
110
+ }}
111
+ />
112
+ );
63
113
  }
64
114
 
65
115
  function ButtonBase({
66
116
  variant = 'tinted',
67
117
  color: customColor,
118
+ icon,
68
119
  android_ripple,
120
+ disabled,
69
121
  style,
70
122
  children,
71
123
  ...rest
@@ -90,18 +142,35 @@ function ButtonBase({
90
142
  break;
91
143
  case 'filled':
92
144
  backgroundColor = color;
93
- textColor = Color(color)?.isDark()
94
- ? 'white'
95
- : (Color(color)?.darken(0.71).string() ?? '#fff');
145
+ textColor = Color.foreground(backgroundColor);
96
146
  break;
97
147
  }
98
148
 
149
+ if (disabled) {
150
+ textColor = dark ? 'rgba(235, 235, 245, 0.3)' : 'rgba(60, 60, 67, 0.3)';
151
+
152
+ if (variant !== 'plain') {
153
+ backgroundColor = dark
154
+ ? 'rgba(118, 118, 128, 0.24)'
155
+ : 'rgba(118, 118, 128, 0.12)';
156
+ }
157
+ }
158
+
159
+ const rippleColor =
160
+ Color(textColor)?.fade(0.88).string() ??
161
+ (variant === 'filled' || dark
162
+ ? 'rgba(255, 255, 255, 0.12)'
163
+ : 'rgba(0, 0, 0, 0.12)');
164
+
165
+ const iconNode = renderIcon(icon, textColor, ICON_SIZE);
166
+
99
167
  return (
100
168
  <PlatformPressable
101
169
  {...rest}
170
+ disabled={disabled}
102
171
  android_ripple={{
103
- radius: BUTTON_RADIUS,
104
- color: Color(textColor)?.fade(0.85).string() ?? 'rgba(0, 0, 0, 0.1)',
172
+ foreground: true,
173
+ color: rippleColor,
105
174
  ...android_ripple,
106
175
  }}
107
176
  pressOpacity={Platform.OS === 'ios' ? undefined : 1}
@@ -110,19 +179,87 @@ function ButtonBase({
110
179
  }
111
180
  style={[{ backgroundColor }, styles.button, style]}
112
181
  >
113
- <Text style={[{ color: textColor }, fonts.regular, styles.text]}>
114
- {children}
115
- </Text>
182
+ <View style={styles.content}>
183
+ {iconNode && <View style={styles.icon}>{iconNode}</View>}
184
+ <Text style={[{ color: textColor }, fonts.regular, styles.text]}>
185
+ {children}
186
+ </Text>
187
+ </View>
116
188
  </PlatformPressable>
117
189
  );
118
190
  }
119
191
 
192
+ function renderIcon(
193
+ icon: ButtonBaseProps['icon'],
194
+ color: ColorValue,
195
+ size: number
196
+ ) {
197
+ if (!icon) {
198
+ return null;
199
+ }
200
+
201
+ const iconValue = typeof icon === 'function' ? icon({ color, size }) : icon;
202
+
203
+ if (React.isValidElement(iconValue)) {
204
+ return iconValue;
205
+ }
206
+
207
+ if (
208
+ typeof iconValue === 'object' &&
209
+ iconValue != null &&
210
+ 'type' in iconValue
211
+ ) {
212
+ switch (iconValue.type) {
213
+ case 'image':
214
+ return (
215
+ <Image
216
+ source={iconValue.source}
217
+ style={{
218
+ width: size,
219
+ height: size,
220
+ tintColor: iconValue.tinted === false ? undefined : color,
221
+ }}
222
+ />
223
+ );
224
+ case 'sfSymbol':
225
+ return <SFSymbol name={iconValue.name} size={size} color={color} />;
226
+ case 'materialSymbol':
227
+ return (
228
+ <MaterialSymbol
229
+ name={iconValue.name}
230
+ variant={iconValue.variant}
231
+ weight={iconValue.weight}
232
+ size={size}
233
+ color={color}
234
+ />
235
+ );
236
+ default: {
237
+ const _exhaustiveCheck: never = iconValue;
238
+
239
+ return _exhaustiveCheck;
240
+ }
241
+ }
242
+ }
243
+
244
+ return null;
245
+ }
246
+
120
247
  const styles = StyleSheet.create({
121
248
  button: {
122
249
  paddingHorizontal: 24,
123
250
  paddingVertical: 10,
124
251
  borderRadius: BUTTON_RADIUS,
125
252
  borderCurve: 'continuous',
253
+ overflow: 'hidden',
254
+ },
255
+ content: {
256
+ flexDirection: 'row',
257
+ alignItems: 'center',
258
+ justifyContent: 'center',
259
+ gap: 8,
260
+ },
261
+ icon: {
262
+ marginLeft: -6,
126
263
  },
127
264
  text: {
128
265
  fontSize: 14,