@expo/ui 56.0.9 → 56.0.11

package/src/universal/Checkbox/index.tsx

@@ -1,5 +1,12 @@
 import type { ComponentProps } from 'react';
-import { StyleSheet, Text, unstable_createElement, View, type ViewProps } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  unstable_createElement,
+  useColorScheme,
+  View,
+  type ViewProps,
+} from 'react-native';
 
 import type { CheckboxProps } from './types';
 
@@ -19,6 +26,9 @@ const styles = StyleSheet.create({
     // @ts-expect-error
     cursor: 'inherit',
   },
+  darkText: {
+    color: '#fff',
+  },
 });
 
 const NativeCheckbox = (
@@ -29,6 +39,8 @@ const NativeCheckbox = (
  * A toggle control that represents a checked or unchecked state.
  */
 export function Checkbox({ value, onValueChange, label, disabled = false, testID }: CheckboxProps) {
+  const isDark = useColorScheme() === 'dark';
+
   return (
     <View role="label" aria-disabled={disabled} style={[styles.label, disabled && styles.disabled]}>
       <NativeCheckbox
@@ -38,7 +50,7 @@ export function Checkbox({ value, onValueChange, label, disabled = false, testID
         data-testid={testID}
         style={styles.cursorInherit}
       />
-      {label != null && <Text>{label}</Text>}
+      {label != null && <Text style={isDark && styles.darkText}>{label}</Text>}
     </View>
   );
 }

package/src/universal/Collapsible/index.tsx

@@ -1,10 +1,18 @@
 import type { ComponentProps, SyntheticEvent } from 'react';
-import { StyleSheet, Text, unstable_createElement, View, type ViewProps } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  unstable_createElement,
+  useColorScheme,
+  View,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
 
 import type { CollapsibleProps } from './types';
 
 const Details = (
-  props: Omit<ComponentProps<'details'>, 'style'> & { style?: ViewProps['style'] }
+  props: Omit<ComponentProps<'details'>, 'style'> & { style?: TextProps['style'] }
 ) => unstable_createElement('details', props);
 
 const Summary = (
@@ -16,6 +24,8 @@ const Summary = (
  * header. Controlled via `isOpen` + `onOpenChange`.
  */
 export function Collapsible({ isOpen, onOpenChange, label = '', children }: CollapsibleProps) {
+  const isDark = useColorScheme() === 'dark';
+
   return (
     <Details
       open={isOpen}
@@ -25,9 +35,9 @@ export function Collapsible({ isOpen, onOpenChange, label = '', children }: Coll
           onOpenChange(nextOpen);
         }
       }}
-      style={styles.container}>
+      style={[styles.container, isDark && styles.darkText]}>
       <Summary style={styles.summary}>
-        <Text>{label}</Text>
+        <Text style={isDark && styles.darkText}>{label}</Text>
       </Summary>
       <View style={styles.content}>{children}</View>
     </Details>
@@ -53,6 +63,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingBottom: 12,
   },
+  darkText: {
+    color: '#fff',
+  },
 });
 
 export * from './types';

package/src/universal/ListItem/ListItem.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import { extractListItemSlots } from './ListItemSlots';
 import type { ListItemProps } from './types';
@@ -25,6 +25,8 @@ export function ListItem(props: ListItemProps) {
     supportingText,
     testID,
   } = props;
+
+  const isDark = useColorScheme() === 'dark';
   const slots = extractListItemSlots(children);
   const leading = slots.leading ?? leadingProp;
   const trailing = slots.trailing ?? trailingProp;
@@ -34,7 +36,7 @@ export function ListItem(props: ListItemProps) {
     <Pressable onPress={onPress} style={styles.row} testID={testID}>
       {leading != null ? <View style={styles.slot}>{leading}</View> : null}
       <View style={styles.main}>
-        <Text>{slots.headline}</Text>
+        <Text style={isDark && styles.darkText}>{slots.headline}</Text>
         {supporting != null ? renderSupporting(supporting) : null}
       </View>
       {trailing != null ? <View style={styles.slot}>{trailing}</View> : null}
@@ -67,6 +69,9 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: '#6b7280',
   },
+  darkText: {
+    color: '#fff',
+  },
 });
 
 export * from './types';

package/src/universal/RNHostView/index.android.tsx

@@ -0,0 +1,33 @@
+import { RNHostView as ComposeRNHostView } from '@expo/ui/jetpack-compose';
+
+import { transformToModifiers } from '../transformStyle';
+import type { RNHostViewProps } from './types';
+
+/**
+ * Hosts React Native views inside Jetpack Compose views.
+ */
+export function RNHostView({
+  children,
+  matchContents,
+  style,
+  onAppear,
+  onDisappear,
+  disabled,
+  hidden,
+  testID,
+  modifiers: extraModifiers,
+}: RNHostViewProps) {
+  const modifiers = transformToModifiers(
+    style,
+    { onAppear, onDisappear, disabled, hidden, testID },
+    extraModifiers
+  );
+
+  return (
+    <ComposeRNHostView matchContents={matchContents} modifiers={modifiers}>
+      {children}
+    </ComposeRNHostView>
+  );
+}
+
+export * from './types';

package/src/universal/RNHostView/index.ios.tsx

@@ -0,0 +1,12 @@
+import { RNHostView as SwiftUIRNHostView } from '@expo/ui/swift-ui';
+
+import type { RNHostViewProps } from './types';
+
+/**
+ * Hosts React Native views inside SwiftUI views.
+ */
+export function RNHostView({ children, matchContents }: RNHostViewProps) {
+  return <SwiftUIRNHostView matchContents={matchContents}>{children}</SwiftUIRNHostView>;
+}
+
+export * from './types';

package/src/universal/RNHostView/index.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet, View } from 'react-native';
+
+import type { RNHostViewProps } from './types';
+import { useUniversalLifecycle } from '../hooks';
+
+const styles = StyleSheet.create({
+  fillParent: { width: '100%', height: '100%' },
+  matchContents: { width: 'fit-content', height: 'fit-content' },
+  hidden: { display: 'none' },
+});
+
+/**
+ * Hosts React Native views inside Jetpack Compose or SwiftUI views.
+ */
+export function RNHostView({
+  children,
+  style,
+  onAppear,
+  onDisappear,
+  hidden = false,
+  testID,
+  matchContents = false,
+}: RNHostViewProps) {
+  useUniversalLifecycle(onAppear, onDisappear);
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        matchContents ? styles.matchContents : styles.fillParent,
+        style,
+        hidden && styles.hidden,
+      ]}>
+      {children}
+    </View>
+  );
+}
+
+export * from './types';

package/src/universal/RNHostView/types.ts

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+
+import type { UniversalBaseProps } from '../types';
+
+/**
+ * Props for the [`RNHostView`](#rnhostview) component.
+ */
+export interface RNHostViewProps extends UniversalBaseProps {
+  /**
+   * When `true`, the host updates its size in the native view tree to match
+   * the children's size. When `false`, the host uses the size of the parent
+   * native view.
+   *
+   * Can only be set once on mount; changing it remounts the component.
+   * @default false
+   * @platform android
+   * @platform ios
+   */
+  matchContents?: boolean;
+
+  /**
+   * The React Native view to host.
+   */
+  children: ReactElement;
+}

package/src/universal/Switch/index.tsx

@@ -1,4 +1,4 @@
-import { Switch as RNSwitch, View, Text, StyleSheet } from 'react-native';
+import { Switch as RNSwitch, View, Text, StyleSheet, useColorScheme } from 'react-native';
 
 import type { SwitchProps } from './types';
 
@@ -12,16 +12,21 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.5,
   },
+  darkText: {
+    color: '#fff',
+  },
 });
 
 /**
  * A toggle control that switches between on and off states.
  */
 export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
+  const isDark = useColorScheme() === 'dark';
+
   if (label) {
     return (
       <View style={[styles.view, disabled && styles.disabled]}>
-        <Text>{label}</Text>
+        <Text style={isDark && styles.darkText}>{label}</Text>
         <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
       </View>
     );

package/src/universal/TextInput/index.tsx

@@ -1,9 +1,13 @@
 import { useImperativeHandle, useRef } from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { TextInput as RNTextInput, StyleSheet, useColorScheme } from 'react-native';
 
 import { useNativeState } from '../State';
 import type { TextInputProps } from './types';
 
+const styles = StyleSheet.create({
+  darkInput: { color: '#fff' },
+});
+
 export function TextInput({
   ref,
   value,
@@ -41,6 +45,7 @@ export function TextInput({
   onSelectionChange,
   selectTextOnFocus,
 }: TextInputProps) {
+  const isDark = useColorScheme() === 'dark';
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
   const state = value ?? fallback;
@@ -93,7 +98,12 @@ export function TextInput({
       returnKeyType={returnKeyType}
       enterKeyHint={enterKeyHint}
       cursorColor={cursorColor}
-      style={[style, textStyle, textAlign && textAlign !== 'auto' ? { textAlign } : null]}
+      style={[
+        isDark && styles.darkInput,
+        style,
+        textStyle,
+        textAlign && textAlign !== 'auto' ? { textAlign } : null,
+      ]}
       onSubmitEditing={onSubmitEditing ? (e) => onSubmitEditing(e.nativeEvent.text) : undefined}
       onFocus={onFocus ? () => onFocus() : undefined}
       onBlur={onBlur ? () => onBlur() : undefined}

package/src/universal/index.ts

@@ -14,6 +14,7 @@ export * from './Icon';
 export * from './List';
 export * from './ListItem';
 export * from './Picker';
+export * from './RNHostView';
 export * from './Spacer';
 export * from './State';
 export { TextInput, type TextInputProps, type TextInputRef } from './TextInput';

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9-sources.jar.md5

@@ -1 +0,0 @@
-792086c87c80e11e11b3e96d4b0a27d5

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9-sources.jar.sha1

@@ -1 +0,0 @@
-b68d51962848180ac90fcb20a9766fabd72327ad

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9-sources.jar.sha256

@@ -1 +0,0 @@
-e068f417d7a302f7d37e1d8648b7f61d2da46d215aede6ad991e35f780e794ea

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9-sources.jar.sha512

@@ -1 +0,0 @@
-408e70adeb3b30e509e418a2a6edbd5afb888a27f8fcd5c04032a1089ef32c4483e542854cd1621a74aa2763094cd2e6ba98b30e99e213dd06734167e6d4083c

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.aar.md5

@@ -1 +0,0 @@
-1375a9ac8dc803a405dd2fa39159a0bc

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.aar.sha1

@@ -1 +0,0 @@
-4631f8e63a9536ef63c03c7666fbaa0e5a4f60a1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.aar.sha256

@@ -1 +0,0 @@
-7f2175675f65b6caaf5ce6580cdd24a10f208ae6d80b894e4460796fe2f0dc05

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.aar.sha512

@@ -1 +0,0 @@
-ba0dfa2c02b2ad1f248bfe43a5a922a95dbb83c493eb23cd8d3b98f3e790d9be19133002ac2ab408f3a9268af3c5718072f0646c2e13b0ce2d01b8198ae8ccc6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.module.md5

@@ -1 +0,0 @@
-485b997d6738de54d6dc1a04d29b4c9a

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.module.sha1

@@ -1 +0,0 @@
-9fc748a23b388982628ba7ea8fb7beb7ce8673b9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.module.sha256

@@ -1 +0,0 @@
-824aeb287c84a0ae7a903bbcd2ed28e02606bb63ff7b752f67f12469461f5b75

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.module.sha512

@@ -1 +0,0 @@
-7a87a1877c5555ab2b67f662d16481ef097240be1ac1ffaf3866ce167bf086cd272977ed945aafaf0143ee82c0fba1af5a5edc9fd6dd3715976708eea8beb901

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.pom.md5

@@ -1 +0,0 @@
-f2d9d3bd7c4ea14a224a23d28ed45f95

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.pom.sha1

@@ -1 +0,0 @@
-5f7de9f68a75a8180e441e1d8f88d38db511ea4d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.pom.sha256

@@ -1 +0,0 @@
-d8cabffaed7874f9cdaa99bdb3148847466647b3d8e38175a0d6129f42fc54ea

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.9/expo.modules.ui-56.0.9.pom.sha512

@@ -1 +0,0 @@
-d1b858cfe33845e3584fe8fe75da774a06c2d6ddef4c44e59671a832d9c5df04dad92780c7aa6f1a0183e337e4998d89598f6c08e91fda083ae0cd5c4a7cfb37