@expo/ui 57.0.13 → 57.0.15

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 (160) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/android/build.gradle +2 -2
  3. package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt +17 -3
  4. package/android/src/main/java/expo/modules/ui/ProgressView.kt +31 -0
  5. package/android/src/main/java/expo/modules/ui/RNHostView.kt +161 -11
  6. package/build/PresentedContentContext.d.ts +18 -0
  7. package/build/PresentedContentContext.d.ts.map +1 -0
  8. package/build/community/pager-view/PagerView.android.d.ts.map +1 -1
  9. package/build/jetpack-compose/AlertDialog/index.d.ts.map +1 -1
  10. package/build/jetpack-compose/BasicAlertDialog/index.d.ts.map +1 -1
  11. package/build/jetpack-compose/DropdownMenu/index.d.ts.map +1 -1
  12. package/build/jetpack-compose/ExposedDropdownMenuBox/ExposedDropdownMenu.d.ts.map +1 -1
  13. package/build/jetpack-compose/Host/index.d.ts +3 -0
  14. package/build/jetpack-compose/Host/index.d.ts.map +1 -1
  15. package/build/jetpack-compose/ModalBottomSheet/index.d.ts.map +1 -1
  16. package/build/jetpack-compose/Progress/index.d.ts +25 -2
  17. package/build/jetpack-compose/Progress/index.d.ts.map +1 -1
  18. package/build/jetpack-compose/RNHostView/index.d.ts +6 -6
  19. package/build/jetpack-compose/RNHostView/index.d.ts.map +1 -1
  20. package/build/jetpack-compose/TextField/shared.d.ts +2 -1
  21. package/build/jetpack-compose/TextField/shared.d.ts.map +1 -1
  22. package/build/jetpack-compose/Tooltip/index.d.ts.map +1 -1
  23. package/build/keyboard/index.d.ts +43 -0
  24. package/build/keyboard/index.d.ts.map +1 -0
  25. package/build/keyboard/interop.d.ts +16 -0
  26. package/build/keyboard/interop.d.ts.map +1 -0
  27. package/build/keyboard/textInputState.d.ts +2 -0
  28. package/build/keyboard/textInputState.d.ts.map +1 -0
  29. package/build/keyboard/textInputState.web.d.ts +11 -0
  30. package/build/keyboard/textInputState.web.d.ts.map +1 -0
  31. package/build/swift-ui/Background/index.d.ts +18 -0
  32. package/build/swift-ui/Background/index.d.ts.map +1 -0
  33. package/build/swift-ui/BottomSheet/index.d.ts.map +1 -1
  34. package/build/swift-ui/Host/index.d.ts +3 -0
  35. package/build/swift-ui/Host/index.d.ts.map +1 -1
  36. package/build/swift-ui/Popover/index.d.ts.map +1 -1
  37. package/build/swift-ui/RNHostView.d.ts +4 -1
  38. package/build/swift-ui/RNHostView.d.ts.map +1 -1
  39. package/build/swift-ui/SecureField/index.d.ts.map +1 -1
  40. package/build/swift-ui/TextField/index.d.ts.map +1 -1
  41. package/build/swift-ui/index.d.ts +1 -0
  42. package/build/swift-ui/index.d.ts.map +1 -1
  43. package/build/swift-ui/modifiers/index.d.ts +9 -34
  44. package/build/swift-ui/modifiers/index.d.ts.map +1 -1
  45. package/build/swift-ui/modifiers/presentationModifiers.d.ts +3 -2
  46. package/build/swift-ui/modifiers/presentationModifiers.d.ts.map +1 -1
  47. package/build/swift-ui/modifiers/shapeStyle.d.ts +54 -0
  48. package/build/swift-ui/modifiers/shapeStyle.d.ts.map +1 -0
  49. package/build/universal/BottomSheet/index.android.d.ts +1 -1
  50. package/build/universal/BottomSheet/index.android.d.ts.map +1 -1
  51. package/build/universal/BottomSheet/index.d.ts +1 -1
  52. package/build/universal/BottomSheet/index.d.ts.map +1 -1
  53. package/build/universal/BottomSheet/index.ios.d.ts +1 -1
  54. package/build/universal/BottomSheet/index.ios.d.ts.map +1 -1
  55. package/build/universal/BottomSheet/types.d.ts +20 -0
  56. package/build/universal/BottomSheet/types.d.ts.map +1 -1
  57. package/build/universal/ListItem/ListItem.android.d.ts.map +1 -1
  58. package/build/universal/ListItem/types.d.ts +19 -0
  59. package/build/universal/ListItem/types.d.ts.map +1 -1
  60. package/build/universal/RNHostView/index.android.d.ts +1 -1
  61. package/build/universal/RNHostView/index.android.d.ts.map +1 -1
  62. package/build/universal/RNHostView/index.d.ts +1 -1
  63. package/build/universal/RNHostView/index.d.ts.map +1 -1
  64. package/build/universal/RNHostView/index.ios.d.ts +1 -1
  65. package/build/universal/RNHostView/index.ios.d.ts.map +1 -1
  66. package/build/universal/RNHostView/types.d.ts +2 -0
  67. package/build/universal/RNHostView/types.d.ts.map +1 -1
  68. package/build/utils/useMergeRefs.d.ts +12 -0
  69. package/build/utils/useMergeRefs.d.ts.map +1 -0
  70. package/expo-module.config.json +1 -1
  71. package/ios/BackgroundView.swift +34 -0
  72. package/ios/ColorPickerView.swift +1 -1
  73. package/ios/Convertibles/ShapeStyleValue.swift +129 -0
  74. package/ios/ExpoUIModule.swift +4 -0
  75. package/ios/HostView.swift +7 -0
  76. package/ios/Modifiers/ForegroundStyleModifier.swift +12 -105
  77. package/ios/Modifiers/ViewModifierRegistry.swift +29 -5
  78. package/ios/RNHostView.swift +64 -4
  79. package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.13/expo.modules.ui-57.0.13-sources.jar → 57.0.15/expo.modules.ui-57.0.15-sources.jar} +0 -0
  80. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.md5 +1 -0
  81. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha1 +1 -0
  82. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha256 +1 -0
  83. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15-sources.jar.sha512 +1 -0
  84. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar +0 -0
  85. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.md5 +1 -0
  86. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha1 +1 -0
  87. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha256 +1 -0
  88. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.aar.sha512 +1 -0
  89. package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.13/expo.modules.ui-57.0.13.module → 57.0.15/expo.modules.ui-57.0.15.module} +22 -22
  90. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.module.md5 +1 -0
  91. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.module.sha1 +1 -0
  92. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.module.sha256 +1 -0
  93. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.module.sha512 +1 -0
  94. package/local-maven-repo/expo/modules/ui/expo.modules.ui/{57.0.13/expo.modules.ui-57.0.13.pom → 57.0.15/expo.modules.ui-57.0.15.pom} +1 -1
  95. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.pom.md5 +1 -0
  96. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.pom.sha1 +1 -0
  97. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.pom.sha256 +1 -0
  98. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.15/expo.modules.ui-57.0.15.pom.sha512 +1 -0
  99. package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml +4 -4
  100. package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5 +1 -1
  101. package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1 +1 -1
  102. package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256 +1 -1
  103. package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512 +1 -1
  104. package/package.json +4 -4
  105. package/src/PresentedContentContext.tsx +22 -0
  106. package/src/community/pager-view/PagerView.android.tsx +1 -7
  107. package/src/jetpack-compose/AlertDialog/index.tsx +6 -1
  108. package/src/jetpack-compose/BasicAlertDialog/index.tsx +7 -1
  109. package/src/jetpack-compose/DropdownMenu/index.tsx +7 -1
  110. package/src/jetpack-compose/ExposedDropdownMenuBox/ExposedDropdownMenu.tsx +3 -1
  111. package/src/jetpack-compose/Host/index.tsx +28 -17
  112. package/src/jetpack-compose/ModalBottomSheet/index.tsx +8 -1
  113. package/src/jetpack-compose/Progress/index.tsx +32 -2
  114. package/src/jetpack-compose/RNHostView/index.tsx +28 -13
  115. package/src/jetpack-compose/TextField/shared.ts +7 -1
  116. package/src/jetpack-compose/Tooltip/index.tsx +2 -1
  117. package/src/keyboard/index.tsx +243 -0
  118. package/src/keyboard/interop.ts +99 -0
  119. package/src/keyboard/textInputState.ts +2 -0
  120. package/src/keyboard/textInputState.web.ts +16 -0
  121. package/src/swift-ui/Background/index.tsx +38 -0
  122. package/src/swift-ui/BottomSheet/index.tsx +4 -1
  123. package/src/swift-ui/Host/index.tsx +33 -18
  124. package/src/swift-ui/Popover/index.tsx +7 -1
  125. package/src/swift-ui/RNHostView.tsx +20 -3
  126. package/src/swift-ui/SecureField/index.tsx +8 -2
  127. package/src/swift-ui/TextField/index.tsx +8 -1
  128. package/src/swift-ui/index.tsx +1 -0
  129. package/src/swift-ui/modifiers/index.ts +10 -39
  130. package/src/swift-ui/modifiers/presentationModifiers.ts +3 -2
  131. package/src/swift-ui/modifiers/shapeStyle.ts +55 -0
  132. package/src/ts-declarations/react-native-text-input-state.d.ts +26 -0
  133. package/src/universal/BottomSheet/index.android.tsx +4 -0
  134. package/src/universal/BottomSheet/index.ios.tsx +5 -0
  135. package/src/universal/BottomSheet/index.tsx +4 -0
  136. package/src/universal/BottomSheet/types.ts +22 -0
  137. package/src/universal/ListItem/ListItem.android.tsx +2 -1
  138. package/src/universal/ListItem/types.ts +21 -0
  139. package/src/universal/RNHostView/index.android.tsx +2 -1
  140. package/src/universal/RNHostView/index.ios.tsx +6 -2
  141. package/src/universal/RNHostView/index.tsx +2 -0
  142. package/src/universal/RNHostView/types.ts +3 -0
  143. package/src/utils/useMergeRefs.ts +47 -0
  144. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13-sources.jar.md5 +0 -1
  145. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13-sources.jar.sha1 +0 -1
  146. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13-sources.jar.sha256 +0 -1
  147. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13-sources.jar.sha512 +0 -1
  148. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.aar +0 -0
  149. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.aar.md5 +0 -1
  150. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.aar.sha1 +0 -1
  151. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.aar.sha256 +0 -1
  152. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.aar.sha512 +0 -1
  153. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.module.md5 +0 -1
  154. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.module.sha1 +0 -1
  155. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.module.sha256 +0 -1
  156. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.module.sha512 +0 -1
  157. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.pom.md5 +0 -1
  158. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.pom.sha1 +0 -1
  159. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.pom.sha256 +0 -1
  160. package/local-maven-repo/expo/modules/ui/expo.modules.ui/57.0.13/expo.modules.ui-57.0.13.pom.sha512 +0 -1
@@ -1,15 +1,20 @@
1
1
  import { requireNativeView } from 'expo';
2
+ import type { LayoutChangeEvent } from 'react-native';
3
+
4
+ import { PresentedContentContext, useIsPresentedInOwnWindow } from '../PresentedContentContext';
2
5
 
3
6
  const RNHostNativeView: React.ComponentType<any> = requireNativeView('ExpoUI', 'RNHostView');
4
7
 
5
8
  export interface RNHostViewProps {
6
9
  /**
7
- * When `true`, the RNHost will update its size in the React Native view tree to match the children's size.
10
+ * When `true`, the RNHost will update its size in the React Native view tree to match the
11
+ * children's size.
8
12
  * When `false`, the RNHost will use the size of the parent SwiftUI View.
9
13
  * Can be only set once on mount.
10
14
  * @default false
11
15
  */
12
16
  matchContents?: boolean;
17
+ onLayout?: (event: LayoutChangeEvent) => void;
13
18
  /**
14
19
  * The RN View to be hosted.
15
20
  */
@@ -17,12 +22,24 @@ export interface RNHostViewProps {
17
22
  }
18
23
 
19
24
  export function RNHostView(props: RNHostViewProps) {
25
+ // A sheet or popover presents its content in its own view controller, where the React Native
26
+ // surface root is not an ancestor and so touch dispatches don't work.
27
+ // Hosted content there owns its touches and is the origin it is measured from; native reads
28
+ // this one prop for both.
29
+ const layoutRoot = useIsPresentedInOwnWindow();
30
+
20
31
  return (
21
32
  <RNHostNativeView
22
33
  {...props}
34
+ layoutRoot={layoutRoot}
35
+ expoInternalSizeFromChildren={props.matchContents}
23
36
  // `matchContents` can only be used once on mount
24
37
  // So we force unmount when it changes to prevent unexpected layout
25
- key={props.matchContents ? 'matchContents' : 'noMatchContents'}
26
- />
38
+ key={props.matchContents ? 'matchContents' : 'noMatchContents'}>
39
+ {/* Reset context here so only nearest RNHostView becomes the layout root for its children, and not any other RNHostView above it in the tree. */}
40
+ <PresentedContentContext.Provider value={false}>
41
+ {props.children}
42
+ </PresentedContentContext.Provider>
43
+ </RNHostNativeView>
27
44
  );
28
45
  }
@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
2
2
  import type { Ref } from 'react';
3
3
 
4
4
  import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
5
+ import { useHostedTextInput } from '../../keyboard';
5
6
  import type { ViewEvent } from '../../types';
6
7
  import { Slot } from '../SlotView';
7
8
  import { createViewModifierEventListener } from '../modifiers/utils';
@@ -74,14 +75,19 @@ function Placeholder({ children }: { children: React.ReactNode }) {
74
75
  * Renders a SwiftUI `SecureField` for password input.
75
76
  */
76
77
  export function SecureField(props: SecureFieldProps) {
77
- const { text, onTextChange, onFocusChange, modifiers, ...restProps } = props;
78
+ const { text, onTextChange, onFocusChange, modifiers, ref, ...restProps } = props;
78
79
 
79
80
  const isWorklet = !!onTextChange && !!worklets?.isWorkletFunction?.(onTextChange);
80
81
  const workletCallback = useWorkletProp(isWorklet ? onTextChange : undefined, 'onTextChange');
82
+ // `blurOnUnmount`: a field left first responder while its row is removed makes UIKit
83
+ // assert ("refused to resign"); native teardown hooks run too late to clear SwiftUI's
84
+ // `@FocusState`. https://github.com/expo/expo/issues/49348
85
+ const hosted = useHostedTextInput<SecureFieldRef>(ref, onFocusChange, { blurOnUnmount: true });
81
86
 
82
87
  return (
83
88
  <SecureFieldNativeView
84
89
  {...restProps}
90
+ ref={hosted.ref}
85
91
  modifiers={modifiers}
86
92
  {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
87
93
  text={getStateId(text)}
@@ -89,7 +95,7 @@ export function SecureField(props: SecureFieldProps) {
89
95
  onTextChange={
90
96
  !isWorklet && onTextChange ? (event) => onTextChange(event.nativeEvent.value) : undefined
91
97
  }
92
- onFocusChange={onFocusChange ? (event) => onFocusChange(event.nativeEvent.value) : undefined}
98
+ onFocusChange={(event) => hosted.onFocusChange(event.nativeEvent.value)}
93
99
  />
94
100
  );
95
101
  }
@@ -2,6 +2,7 @@ import { requireNativeView } from 'expo';
2
2
  import type { Ref } from 'react';
3
3
 
4
4
  import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
5
+ import { useHostedTextInput } from '../../keyboard';
5
6
  import type { ViewEvent } from '../../types';
6
7
  import { Slot } from '../SlotView';
7
8
  import { createViewModifierEventListener } from '../modifiers/utils';
@@ -114,15 +115,21 @@ export function TextField(props: TextFieldProps) {
114
115
  onFocusChange,
115
116
  onSelectionChange,
116
117
  modifiers,
118
+ ref,
117
119
  ...restProps
118
120
  } = props;
119
121
 
120
122
  const isWorklet = !!onTextChange && !!worklets?.isWorkletFunction?.(onTextChange);
121
123
  const workletCallback = useWorkletProp(isWorklet ? onTextChange : undefined, 'onTextChange');
124
+ // `blurOnUnmount`: a field left first responder while its row is removed makes UIKit
125
+ // assert ("refused to resign"); native teardown hooks run too late to clear SwiftUI's
126
+ // `@FocusState`. https://github.com/expo/expo/issues/49348
127
+ const hosted = useHostedTextInput<TextFieldRef>(ref, onFocusChange, { blurOnUnmount: true });
122
128
 
123
129
  return (
124
130
  <TextFieldNativeView
125
131
  {...restProps}
132
+ ref={hosted.ref}
126
133
  modifiers={modifiers}
127
134
  {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
128
135
  text={getStateId(text)}
@@ -131,7 +138,7 @@ export function TextField(props: TextFieldProps) {
131
138
  onTextChange={
132
139
  !isWorklet && onTextChange ? (event) => onTextChange(event.nativeEvent.value) : undefined
133
140
  }
134
- onFocusChange={onFocusChange ? (event) => onFocusChange(event.nativeEvent.value) : undefined}
141
+ onFocusChange={(event) => hosted.onFocusChange(event.nativeEvent.value)}
135
142
  onSelectionChange={
136
143
  onSelectionChange
137
144
  ? (event) =>
@@ -52,6 +52,7 @@ export * from './ScrollView';
52
52
  export * from './Shapes';
53
53
  export * from './Mask';
54
54
  export * from './Overlay';
55
+ export * from './Background';
55
56
  export * from './Popover';
56
57
  export * from './Grid';
57
58
  export * from './RNHostView';
@@ -21,6 +21,7 @@ import { gaugeStyle } from './gaugeStyle';
21
21
  import { progressViewStyle } from './progressViewStyle';
22
22
  import { onScrollPhaseChange, useScrollGeometryChange } from './scrollObservation';
23
23
  import { id, scrollPosition } from './scrollPosition';
24
+ import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
24
25
  import { symbolEffect } from './symbolEffect';
25
26
  import type { Color } from './types';
26
27
  import { activityBackgroundTint, widgetAccentedRenderingMode, widgetURL } from './widgets';
@@ -457,51 +458,20 @@ export const foregroundColor = (color: Color) => createModifier('foregroundColor
457
458
  * })]}>
458
459
  * Gradient Text
459
460
  * </Text>
461
+ *
462
+ * // Material
463
+ * <Text modifiers={[foregroundStyle({ type: 'material', material: 'regular' })]}>
464
+ * Text painted with a material
465
+ * </Text>
460
466
  * ```
461
467
  *
468
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material or a gradient.
462
469
  * @returns A view modifier that applies the specified foreground style
463
470
  * @since iOS 15.0+ (hierarchical quinary requires iOS 16.0+)
464
471
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/foregroundstyle(_:)).
465
472
  */
466
- export const foregroundStyle = (
467
- style:
468
- | Color // Simple color (hex string, color name, or React Native ColorValue)
469
- | { type: 'color'; color: Color }
470
- | {
471
- type: 'hierarchical';
472
- style: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
473
- }
474
- | {
475
- type: 'linearGradient';
476
- colors: Color[];
477
- startPoint: { x: number; y: number };
478
- endPoint: { x: number; y: number };
479
- }
480
- | {
481
- type: 'radialGradient';
482
- colors: Color[];
483
- center: { x: number; y: number };
484
- startRadius: number;
485
- endRadius: number;
486
- }
487
- | {
488
- type: 'angularGradient';
489
- colors: Color[];
490
- center: { x: number; y: number };
491
- }
492
- ) => {
493
- if (style == null || typeof style !== 'object' || !('type' in style)) {
494
- return createModifier('foregroundStyle', { styleType: 'color', color: style });
495
- }
496
- if (style.type === 'hierarchical') {
497
- return createModifier('foregroundStyle', {
498
- styleType: 'hierarchical',
499
- hierarchicalStyle: style.style,
500
- });
501
- }
502
- const { type, ...rest } = style;
503
- return createModifier('foregroundStyle', { styleType: type, ...rest });
504
- };
473
+ export const foregroundStyle = (style: ShapeStyle) =>
474
+ createModifier('foregroundStyle', { style: resolveShapeStyle(style) });
505
475
 
506
476
  /**
507
477
  * Makes text bold.
@@ -1854,6 +1824,7 @@ export * from './progressViewStyle';
1854
1824
  export * from './gaugeStyle';
1855
1825
  export * from './presentationModifiers';
1856
1826
  export * from './environment';
1827
+ export type { ShapeStyle } from './shapeStyle';
1857
1828
  export * from './scrollPosition';
1858
1829
  export * from './symbolEffect';
1859
1830
  export * from './scrollObservation';
@@ -3,6 +3,7 @@ import {
3
3
  createModifierWithEventListener,
4
4
  type ModifierConfig,
5
5
  } from './createModifier';
6
+ import type { Color } from './types';
6
7
 
7
8
  /**
8
9
  * Presentation detent type for controlling sheet heights.
@@ -88,12 +89,12 @@ export const presentationBackgroundInteraction = (
88
89
  * Sets the background of a sheet presentation. Paints the entire sheet chrome
89
90
  * including the drag-indicator zone and home-indicator safe-area inset, which
90
91
  * a regular `background()` modifier cannot reach.
91
- * @param color - The background color (hex string). For example, `#FF0000`.
92
+ * @param color - The background color.
92
93
  * @platform ios 16.4+
93
94
  * @see Official [SwiftUI
94
95
  documentation](https://developer.apple.com/documentation/swiftui/view/presentationbackground(_:)).
95
96
  */
96
- export const presentationBackground = (color: string) =>
97
+ export const presentationBackground = (color: Color) =>
97
98
  createModifier('presentationBackground', { color });
98
99
 
99
100
  /**
@@ -0,0 +1,55 @@
1
+ import type { Color } from './types';
2
+
3
+ /**
4
+ * A style that paints an area, mirroring SwiftUI's `ShapeStyle`.
5
+ * A bare color is a shorthand for `{ type: 'color', color }`.
6
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/shapestyle).
7
+ */
8
+ export type ShapeStyle =
9
+ | Color // Simple color (hex string, color name, or React Native ColorValue)
10
+ | { type: 'color'; color: Color }
11
+ | {
12
+ type: 'hierarchical';
13
+ style: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
14
+ }
15
+ | {
16
+ /**
17
+ * A blurred backdrop that samples the content behind the view and adapts to the current
18
+ * color scheme. `'bar'` has no tvOS counterpart and is ignored there.
19
+ */
20
+ type: 'material';
21
+ material: 'ultraThin' | 'thin' | 'regular' | 'thick' | 'ultraThick' | 'bar';
22
+ }
23
+ | {
24
+ type: 'linearGradient';
25
+ colors: Color[];
26
+ startPoint: { x: number; y: number };
27
+ endPoint: { x: number; y: number };
28
+ }
29
+ | {
30
+ type: 'radialGradient';
31
+ colors: Color[];
32
+ center: { x: number; y: number };
33
+ startRadius: number;
34
+ endRadius: number;
35
+ }
36
+ | {
37
+ type: 'angularGradient';
38
+ colors: Color[];
39
+ center: { x: number; y: number };
40
+ };
41
+
42
+ /**
43
+ * Normalizes a style into the shape the native side reads. A `Color` may itself be an object
44
+ * (for example the one returned by `PlatformColor`), so a style is only treated as a tagged
45
+ * variant when it carries a `type` field.
46
+ */
47
+ export function resolveShapeStyle(style: ShapeStyle): Record<string, any> {
48
+ if (style == null || typeof style !== 'object' || !('type' in style)) {
49
+ return { type: 'color', color: style };
50
+ }
51
+ if (style.type === 'hierarchical') {
52
+ return { type: 'hierarchical', hierarchical: style.style };
53
+ }
54
+ return { ...style };
55
+ }
@@ -0,0 +1,26 @@
1
+ declare module 'react-native/Libraries/Components/TextInput/TextInputState' {
2
+ import type { ReactNativeElement } from 'react-native';
3
+
4
+ /**
5
+ * React Native's registry of focusable text inputs. `ScrollView` reads it to
6
+ * decide whether a touch landed on the focused input, and `Keyboard.dismiss()`
7
+ * blurs whatever it points at. `TextInput.State` re-exports only a read-only
8
+ * subset publicly, so participating in the registry requires this module.
9
+ */
10
+ const TextInputState: {
11
+ currentlyFocusedInput(): ReactNativeElement | null;
12
+ /** Marks an instance as focused. Does not dispatch a native focus command. */
13
+ focusInput(instance: ReactNativeElement | null): void;
14
+ /** Clears the focused instance, but only if it is the one passed in. */
15
+ blurInput(instance: ReactNativeElement | null): void;
16
+ registerInput(instance: ReactNativeElement): void;
17
+ unregisterInput(instance: ReactNativeElement): void;
18
+ isTextInput(instance: ReactNativeElement): boolean;
19
+ /** Marks an instance as focused, then dispatches a native `focus` command. */
20
+ focusTextInput(instance: ReactNativeElement | null): void;
21
+ /** Clears the focused instance, then dispatches a native `blur` command. */
22
+ blurTextInput(instance: ReactNativeElement | null): void;
23
+ };
24
+
25
+ export default TextInputState;
26
+ }
@@ -43,6 +43,8 @@ export function BottomSheet({
43
43
  shouldDismissOnClickOutside = true,
44
44
  scrimColor,
45
45
  contentPadding,
46
+ containerColor,
47
+ contentColor,
46
48
  }: BottomSheetProps) {
47
49
  const sheetRef = useRef<ModalBottomSheetRef>(null);
48
50
  const [mount, setMount] = useState(isPresented);
@@ -86,6 +88,8 @@ export function BottomSheet({
86
88
  skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
87
89
  properties={{ shouldDismissOnBackPress, shouldDismissOnClickOutside }}
88
90
  scrimColor={scrimColor}
91
+ containerColor={containerColor}
92
+ contentColor={contentColor}
89
93
  modifiers={modifiers}>
90
94
  <Column modifiers={contentModifiers}>{children}</Column>
91
95
  </ModalBottomSheet>
@@ -2,6 +2,7 @@ import { BottomSheet as SwiftUIBottomSheet, Group, Host } from '@expo/ui/swift-u
2
2
  import {
3
3
  frame,
4
4
  padding,
5
+ presentationBackground,
5
6
  presentationDetents,
6
7
  presentationDragIndicator,
7
8
  type ModifierConfig,
@@ -26,6 +27,7 @@ export function BottomSheet({
26
27
  testID,
27
28
  modifiers,
28
29
  contentPadding,
30
+ containerColor,
29
31
  }: BottomSheetProps) {
30
32
  const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
31
33
  top: 16,
@@ -41,6 +43,9 @@ export function BottomSheet({
41
43
  if (snapPoints && snapPoints.length > 0) {
42
44
  presentationModifiers.push(presentationDetents(snapPoints.map(snapPointToDetent)));
43
45
  }
46
+ if (containerColor) {
47
+ presentationModifiers.push(presentationBackground(containerColor));
48
+ }
44
49
  if (modifiers?.length) {
45
50
  presentationModifiers.push(...modifiers);
46
51
  }
@@ -35,6 +35,7 @@ export function BottomSheet({
35
35
  snapPoints,
36
36
  testID,
37
37
  contentPadding,
38
+ containerColor,
38
39
  }: BottomSheetProps) {
39
40
  const isDark = useColorScheme() === 'dark';
40
41
  const { top, bottom, left, right } = resolveContentPadding(contentPadding, {
@@ -63,6 +64,9 @@ export function BottomSheet({
63
64
  // The drawer has to fill the viewport or it gets pushed off-screen.
64
65
  ...(hasSnapPoints ? snapPointContentStyle : noSnapPointContentStyle),
65
66
  ...(showDragIndicator && dragIndicatorSpacing),
67
+ // An explicit containerColor overrides both the 'white' default
68
+ // above and the bare isDark fallback.
69
+ ...(typeof containerColor === 'string' && { backgroundColor: containerColor }),
66
70
  }}
67
71
  aria-describedby={undefined}>
68
72
  {/* Radix Dialog requires a title for a11y; render visually-hidden. */}
@@ -110,4 +110,26 @@ export interface BottomSheetProps {
110
110
  * from `@expo/ui/swift-ui/modifiers` or `@expo/ui/jetpack-compose/modifiers`.
111
111
  */
112
112
  modifiers?: ModifierConfig[];
113
+
114
+ /**
115
+ * The sheet's own background color, painting its full chrome (including the
116
+ * drag-indicator zone and, on iOS, the home-indicator safe-area inset).
117
+ * When omitted, each platform keeps its own default.
118
+ *
119
+ * This only paints the background. `children` are React Native views on
120
+ * every platform, so they don't pick up a contrasting text color
121
+ * automatically -- set one explicitly if you use a dark `containerColor`.
122
+ * @platform android
123
+ * @platform ios 16.4+
124
+ * @platform web
125
+ */
126
+ containerColor?: ColorValue;
127
+
128
+ /**
129
+ * The preferred color for native Compose content that doesn't set its own
130
+ * color. Doesn't reach a `BottomSheet`'s (React Native) `children` -- see
131
+ * `containerColor`'s doc.
132
+ * @platform android
133
+ */
134
+ contentColor?: ColorValue;
113
135
  }
@@ -26,6 +26,7 @@ export function ListItem(props: ListItemProps) {
26
26
  trailing: trailingProp,
27
27
  supportingText,
28
28
  modifiers,
29
+ colors,
29
30
  } = props;
30
31
  const slots = extractListItemSlots(children);
31
32
  const leading = slots.leading ?? leadingProp;
@@ -34,7 +35,7 @@ export function ListItem(props: ListItemProps) {
34
35
  const itemModifiers = [...(onPress ? [clickable(onPress)] : []), ...(modifiers ?? [])];
35
36
 
36
37
  return (
37
- <ComposeListItem modifiers={itemModifiers.length ? itemModifiers : undefined}>
38
+ <ComposeListItem colors={colors} modifiers={itemModifiers.length ? itemModifiers : undefined}>
38
39
  <ComposeListItem.HeadlineContent>
39
40
  <>{wrapStrings(slots.headline)}</>
40
41
  </ComposeListItem.HeadlineContent>
@@ -1,7 +1,22 @@
1
1
  import type { ReactNode } from 'react';
2
+ import type { ColorValue } from 'react-native';
2
3
 
3
4
  import type { ModifierConfig } from '../../types';
4
5
 
6
+ /**
7
+ * Colors for a `ListItem`'s row elements, matching Jetpack Compose's
8
+ * `ListItemDefaults.colors()` on Android.
9
+ * @platform android
10
+ */
11
+ export interface ListItemColors {
12
+ containerColor?: ColorValue;
13
+ contentColor?: ColorValue;
14
+ leadingContentColor?: ColorValue;
15
+ trailingContentColor?: ColorValue;
16
+ supportingContentColor?: ColorValue;
17
+ overlineContentColor?: ColorValue;
18
+ }
19
+
5
20
  /**
6
21
  * Props for the [`ListItem.Leading`](#listitemleading) slot marker.
7
22
  */
@@ -74,4 +89,10 @@ export interface ListItemProps {
74
89
  * its default `buttonStyle(.plain)`.
75
90
  */
76
91
  modifiers?: ModifierConfig[];
92
+
93
+ /**
94
+ * Row colors. Applied on Android via Compose's `ListItem.colors`.
95
+ * @platform android
96
+ */
97
+ colors?: ListItemColors;
77
98
  }
@@ -15,6 +15,7 @@ export function RNHostView({
15
15
  disabled,
16
16
  hidden,
17
17
  testID,
18
+ onLayout,
18
19
  modifiers: extraModifiers,
19
20
  }: RNHostViewProps) {
20
21
  const modifiers = transformToModifiers(
@@ -24,7 +25,7 @@ export function RNHostView({
24
25
  );
25
26
 
26
27
  return (
27
- <ComposeRNHostView matchContents={matchContents} modifiers={modifiers}>
28
+ <ComposeRNHostView matchContents={matchContents} modifiers={modifiers} onLayout={onLayout}>
28
29
  {children}
29
30
  </ComposeRNHostView>
30
31
  );
@@ -5,8 +5,12 @@ import type { RNHostViewProps } from './types';
5
5
  /**
6
6
  * Hosts React Native views inside SwiftUI views.
7
7
  */
8
- export function RNHostView({ children, matchContents }: RNHostViewProps) {
9
- return <SwiftUIRNHostView matchContents={matchContents}>{children}</SwiftUIRNHostView>;
8
+ export function RNHostView({ children, matchContents, onLayout }: RNHostViewProps) {
9
+ return (
10
+ <SwiftUIRNHostView matchContents={matchContents} onLayout={onLayout}>
11
+ {children}
12
+ </SwiftUIRNHostView>
13
+ );
10
14
  }
11
15
 
12
16
  export * from './types';
@@ -20,12 +20,14 @@ export function RNHostView({
20
20
  hidden = false,
21
21
  testID,
22
22
  matchContents = false,
23
+ onLayout,
23
24
  }: RNHostViewProps) {
24
25
  useUniversalLifecycle(onAppear, onDisappear);
25
26
 
26
27
  return (
27
28
  <View
28
29
  testID={testID}
30
+ onLayout={onLayout}
29
31
  style={[
30
32
  matchContents ? styles.matchContents : styles.fillParent,
31
33
  style,
@@ -1,4 +1,5 @@
1
1
  import type { ReactElement } from 'react';
2
+ import type { LayoutChangeEvent } from 'react-native';
2
3
 
3
4
  import type { UniversalBaseProps } from '../types';
4
5
 
@@ -18,6 +19,8 @@ export interface RNHostViewProps extends UniversalBaseProps {
18
19
  */
19
20
  matchContents?: boolean;
20
21
 
22
+ onLayout?: (event: LayoutChangeEvent) => void;
23
+
21
24
  /**
22
25
  * The React Native view to host.
23
26
  */
@@ -0,0 +1,47 @@
1
+ import { useCallback, useRef, type Ref } from 'react';
2
+
3
+ /**
4
+ * Builds a ref that forwards its value to each of the given refs, in the order
5
+ * they are given. Handles object refs and callback refs, including a callback
6
+ * ref that returns its own cleanup function.
7
+ *
8
+ * A copy of React Native's `useMergeRefs`, which lives behind a deep internal
9
+ * import: those are deprecated, warn in development, and have no counterpart in
10
+ * React Native for web.
11
+ */
12
+ export function useMergeRefs<T>(...refs: (Ref<T> | undefined)[]): (instance: T | null) => void {
13
+ const cleanups = useRef<(void | (() => void))[]>([]);
14
+
15
+ return useCallback(
16
+ (instance: T | null) => {
17
+ for (const cleanup of cleanups.current) {
18
+ cleanup?.();
19
+ }
20
+ cleanups.current = [];
21
+ if (instance == null) {
22
+ return;
23
+ }
24
+ cleanups.current = refs.map((ref) => {
25
+ if (ref == null) {
26
+ return undefined;
27
+ }
28
+ if (typeof ref === 'function') {
29
+ const cleanup = ref(instance);
30
+ return typeof cleanup === 'function' ? cleanup : () => ref(null);
31
+ }
32
+ // React's `RefObject<T>` type does not admit null, but a detached ref has
33
+ // to be cleared, which is what React itself does here.
34
+ const refObject = ref as { current: T | null };
35
+ refObject.current = instance;
36
+ return () => {
37
+ refObject.current = null;
38
+ };
39
+ });
40
+ },
41
+ // The refs are the dependencies. Changing one has to produce a new ref so that
42
+ // React detaches the old one and attaches the new, which is how React Native's
43
+ // own `useMergeRefs` behaves.
44
+ // eslint-disable-next-line react-hooks/exhaustive-deps
45
+ refs
46
+ );
47
+ }
@@ -1 +0,0 @@
1
- 477d48b6fb609e6e83752cf761439f3432207248
@@ -1 +0,0 @@
1
- 202b4f6d1b483d93f4a457a0c2823fb597e90e2ceb05a355e35bbd2a0f847097
@@ -1 +0,0 @@
1
- e5168296d77aefce39432efe6ebece0da6c78ee8dfcde914ae0166912b335b277f482bd0a347c52fc02d95a4f1bab27c004d0fd46b5aa90c3e047b036b2b316f
@@ -1 +0,0 @@
1
- bd3b99b6985648ac5a8b5250422386cb9777482e
@@ -1 +0,0 @@
1
- 8ba276c06e3fda532a8966a0adc15f3c5e32067ffea21c69b9bf91c449cef93a
@@ -1 +0,0 @@
1
- faa66634546960f551adaa7cda25a99fc7cff82c44a44f9ff7e6e272d562fa26bea6d54c54f0135e50c7cfab38cf0eee9496ab9ddb8f2c704a9a11a690568817
@@ -1 +0,0 @@
1
- 2ca889048dabe7adaf8e995c1b6ee7cb264db4af
@@ -1 +0,0 @@
1
- 53956f3eaea9d27b0d6ba5966fe3bd89e250c09c3f3bf784b0d53d4c2c89e66d
@@ -1 +0,0 @@
1
- fb51c628e57517d5458762c91701328fafd546397314e4b8236495dc9b8743b214cc6d46f050456e191b679eb6f21d04d28572857e3a390afa7a4b8a2c07fe3d
@@ -1 +0,0 @@
1
- d9ebd441c6cd433c6510bf06e5178731f611bdd7
@@ -1 +0,0 @@
1
- 06ccdd8caa1ed60c7f57d7e76019d10f19ff59a0e63843d4ee2341c366ba3789
@@ -1 +0,0 @@
1
- 74ece0b7565cf001deeeac9eaa0dd2d23aae23e5c9822574e61242c21978a11e0ce7e9d9ddb4a13f2353d071d1351ce72e029a64c530f3941da5c18b2b196074