@expo/ui 58.0.20 → 58.0.22

package/src/jetpack-compose/TopAppBar/index.tsx

@@ -0,0 +1,113 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import type { ExpoModifier } from '../../types';
+import type { PaddingValuesRecord } from '../Carousel';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type { PaddingValuesRecord };
+
+/**
+ * Colors for the top app bar.
+ */
+export type TopAppBarColors = {
+  /**
+   * Color of the container (background).
+   */
+  containerColor?: ColorValue;
+  /**
+   * Color of the navigation icon.
+   */
+  navigationIconContentColor?: ColorValue;
+  /**
+   * Color of the title.
+   */
+  titleContentColor?: ColorValue;
+  /**
+   * Color of the action icons.
+   */
+  actionIconContentColor?: ColorValue;
+};
+
+export interface TopAppBarProps {
+  /**
+   * Colors for the app bar. Unset colors use `TopAppBarDefaults.topAppBarColors()`.
+   */
+  colors?: TopAppBarColors;
+  /**
+   * Insets in dp that the app bar adds around its content. Missing sides are `0`.
+   * When omitted, the app bar uses `TopAppBarDefaults.windowInsets`, which assumes
+   * the bar is at the top edge of the window, even inside a nested `Host`.
+   * Pass `{}` when a parent handles the insets. This removes both the top status
+   * bar inset and the horizontal system bar and display cutout insets.
+   */
+  windowInsets?: PaddingValuesRecord;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+  /**
+   * `TopAppBar.Title`, `TopAppBar.NavigationIcon`, and `TopAppBar.Actions` slots.
+   */
+  children: React.ReactNode;
+}
+
+type SlotProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const TopAppBarNativeView: React.ComponentType<TopAppBarProps> = requireNativeView(
+  'ExpoUI',
+  'TopAppBarView'
+);
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Title slot for `TopAppBar`.
+ */
+function TopAppBarTitle(props: SlotProps) {
+  return <SlotNativeView slotName="title">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Navigation icon slot for `TopAppBar`. It appears at the start of the app bar.
+ */
+function TopAppBarNavigationIcon(props: SlotProps) {
+  return <SlotNativeView slotName="navigationIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Actions slot for `TopAppBar`. Its children appear in a row at the end of the app bar.
+ */
+function TopAppBarActions(props: SlotProps) {
+  return <SlotNativeView slotName="actions">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A Material 3 small top app bar that shows a title, a navigation icon, and actions.
+ */
+function TopAppBar(props: TopAppBarProps) {
+  const { modifiers, ...restProps } = props;
+  return (
+    <TopAppBarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}
+
+TopAppBar.Title = TopAppBarTitle;
+TopAppBar.NavigationIcon = TopAppBarNavigationIcon;
+TopAppBar.Actions = TopAppBarActions;
+
+export { TopAppBar };

package/src/jetpack-compose/index.ts

@@ -59,6 +59,7 @@ export * from './SearchBar';
 export * from './Snackbar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
+export * from './TopAppBar';
 export * from './FloatingActionButton';
 export * from './PullToRefreshBox';
 export * from './RadioButton';
@@ -71,6 +72,7 @@ export * from './AnimatedVisibility';
 export * from './Box';
 export * from './Row';
 export * from './Column';
+export * from './CompositionLocalProvider';
 export * from './FlowRow';
 export { useNativeState, useWorkletCallback, type WorkletCallback } from '../State';
 export type { ViewEvent } from '../types';

package/src/jetpack-compose/modifiers/index.ts

@@ -403,13 +403,21 @@ export const selectableGroup = () => createModifier('selectableGroup');
  * @param value - The current toggle state.
  * @param handler - Function to call when toggled.
  * @param options - Optional configuration.
- * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`, `'switch'`, or `'tab'`.
+ * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`,
+ * `'switch'`, or `'tab'`.
+ * @param options.enabled - Whether the view responds to input and is reported as enabled to
+ * accessibility services. Defaults to `true`.
  */
 export const toggleable = (
   value: boolean,
   handler: () => void,
-  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab' }
-) => createModifierWithEventListener('toggleable', handler, { value, role: options?.role });
+  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab'; enabled?: boolean }
+) =>
+  createModifierWithEventListener('toggleable', handler, {
+    value,
+    role: options?.role,
+    enabled: options?.enabled,
+  });
 
 // =============================================================================
 // Lifecycle Modifiers

package/src/swift-ui/BottomSheet/index.tsx

@@ -18,6 +18,12 @@ export interface BottomSheetProps extends CommonViewModifierProps {
    * kept mounted, so presenting the sheet doesn't shift surrounding layout. Optional.
    */
   anchor?: ReactNode;
+  /**
+   * A view that fills the whole sheet behind its content, for example a `Rectangle` filled with a
+   * material. Unlike the `presentationBackground` modifier, a material in a view stays translucent
+   * on iOS 26 and later.
+   */
+  presentationBackground?: ReactNode;
   /**
    * Whether the `BottomSheet` is presented.
    */
@@ -40,7 +46,7 @@ export interface BottomSheetProps extends CommonViewModifierProps {
 
 type NativeBottomSheetProps = Omit<
   BottomSheetProps,
-  'onIsPresentedChange' | 'onDismiss' | 'anchor'
+  'onIsPresentedChange' | 'onDismiss' | 'anchor' | 'presentationBackground'
 > & {
   onIsPresentedChange: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
   onDismiss: (event: NativeSyntheticEvent<object>) => void;
@@ -55,7 +61,15 @@ const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNati
  * `BottomSheet` presents content from the bottom of the screen.
  */
 function BottomSheet(props: BottomSheetProps) {
-  const { modifiers, onIsPresentedChange, onDismiss, anchor, children, ...restProps } = props;
+  const {
+    modifiers,
+    onIsPresentedChange,
+    onDismiss,
+    anchor,
+    presentationBackground,
+    children,
+    ...restProps
+  } = props;
   const [isMounted, setIsMounted] = useState(props.isPresented);
 
   if (props.isPresented && !isMounted) {
@@ -79,7 +93,14 @@ function BottomSheet(props: BottomSheetProps) {
       {anchor != null ? <Slot name="anchor">{anchor}</Slot> : null}
       {/* Only the sheet's content is presented in its own view controller. The anchor renders in
           place, in the React Native surface, so it stays outside `PresentedContent`. */}
-      {isMounted ? <PresentedContent>{children}</PresentedContent> : null}
+      {isMounted ? (
+        <PresentedContent>
+          {presentationBackground != null ? (
+            <Slot name="presentationBackground">{presentationBackground}</Slot>
+          ) : null}
+          {children}
+        </PresentedContent>
+      ) : null}
     </BottomSheetNativeView>
   );
 }

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

@@ -1,8 +1,15 @@
 import { Checkbox as ComposeCheckbox, Row, Text } from '@expo/ui/jetpack-compose';
-import { clickable, testID as testIDModifier } from '@expo/ui/jetpack-compose/modifiers';
+import {
+  defaultMinSize,
+  testID as testIDModifier,
+  toggleable,
+} from '@expo/ui/jetpack-compose/modifiers';
 
 import type { CheckboxProps } from './types';
 
+// Material's minimum touch target.
+const MIN_INTERACTIVE_SIZE = 48;
+
 export function Checkbox({
   value,
   onValueChange,
@@ -11,22 +18,34 @@ export function Checkbox({
   testID,
   modifiers,
 }: CheckboxProps) {
+  const isLabeled = label != null;
   const checkbox = (
     <ComposeCheckbox
       value={value}
-      onCheckedChange={disabled ? undefined : onValueChange}
+      onCheckedChange={isLabeled ? undefined : onValueChange}
       enabled={!disabled}
-      modifiers={[...(modifiers ?? []), ...(testID ? [testIDModifier(testID)] : [])]}
+      modifiers={[
+        ...(modifiers ?? []),
+        ...(isLabeled
+          ? [defaultMinSize({ minWidth: MIN_INTERACTIVE_SIZE, minHeight: MIN_INTERACTIVE_SIZE })]
+          : []),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}
     />
   );
 
-  if (label == null) return checkbox;
+  if (!isLabeled) return checkbox;
 
   return (
     <Row
       verticalAlignment="center"
       horizontalArrangement={{ spacedBy: 8 }}
-      modifiers={[clickable(() => !disabled && onValueChange(!value))]}>
+      modifiers={[
+        toggleable(value, () => !disabled && onValueChange(!value), {
+          role: 'checkbox',
+          enabled: !disabled,
+        }),
+      ]}>
       {checkbox}
       <Text>{label}</Text>
     </Row>

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

@@ -1,4 +1,4 @@
-import { Group, ScrollView as SwiftUIScrollView } from '@expo/ui/swift-ui';
+import { HStack, ScrollView as SwiftUIScrollView, VStack } from '@expo/ui/swift-ui';
 import { frame, padding } from '@expo/ui/swift-ui/modifiers';
 import type { ModifierConfig } from '@expo/ui/swift-ui/modifiers';
 
@@ -18,7 +18,7 @@ export function ScrollView({
   testID,
   modifiers: extraModifiers,
 }: ScrollViewProps) {
-  // Extract padding from style — it goes on the inner Group so content is
+  // Extract padding from style — it goes on the inner stack so content is
   // inset after stretching to full width.
   const {
     padding: paddingAll,
@@ -64,13 +64,24 @@ export function ScrollView({
     );
   }
 
+  const stack =
+    direction === 'horizontal' ? (
+      <HStack alignment="top" modifiers={innerModifiers}>
+        {children}
+      </HStack>
+    ) : (
+      <VStack alignment="leading" modifiers={innerModifiers}>
+        {children}
+      </VStack>
+    );
+
   return (
     <SwiftUIScrollView
       axes={direction}
       showsIndicators={showsIndicators}
       modifiers={scrollModifiers}
       testID={testID}>
-      <Group modifiers={innerModifiers}>{children}</Group>
+      {stack}
     </SwiftUIScrollView>
   );
 }

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

@@ -1,31 +1,50 @@
 import { Row, Switch as ComposeSwitch, Text } from '@expo/ui/jetpack-compose';
 import {
+  defaultMinSize,
   fillMaxWidth,
   IntrinsicSize,
   testID as testIDModifier,
+  toggleable,
   weight,
   width,
 } from '@expo/ui/jetpack-compose/modifiers';
 
 import type { SwitchProps } from './types';
 
+// Material's minimum touch target.
+const MIN_INTERACTIVE_SIZE = 48;
+
 export function Switch({ value, onValueChange, label, disabled, testID, modifiers }: SwitchProps) {
+  const isLabeled = label != null;
   const toggle = (
     <ComposeSwitch
       value={value}
-      onCheckedChange={disabled ? undefined : onValueChange}
+      onCheckedChange={isLabeled ? undefined : onValueChange}
       enabled={!disabled}
-      modifiers={[...(modifiers ?? []), ...(testID ? [testIDModifier(testID)] : [])]}
+      modifiers={[
+        ...(modifiers ?? []),
+        ...(isLabeled
+          ? [defaultMinSize({ minWidth: MIN_INTERACTIVE_SIZE, minHeight: MIN_INTERACTIVE_SIZE })]
+          : []),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}
     />
   );
 
-  if (label == null) return toggle;
+  if (!isLabeled) return toggle;
 
   return (
     <Row
       verticalAlignment="center"
       horizontalArrangement={{ spacedBy: 8 }}
-      modifiers={[fillMaxWidth(), width(IntrinsicSize.Max)]}>
+      modifiers={[
+        fillMaxWidth(),
+        width(IntrinsicSize.Max),
+        toggleable(value, () => !disabled && onValueChange(!value), {
+          role: 'switch',
+          enabled: !disabled,
+        }),
+      ]}>
       <Text modifiers={[weight(1)]}>{label}</Text>
       {toggle}
     </Row>

package/src/universal/Switch/index.tsx

@@ -28,6 +28,7 @@ const styles = StyleSheet.create({
   },
   text: {
     color: colors.foreground,
+    flexGrow: 1,
     userSelect: 'none',
   },
   track: {

package/src/universal/Text/index.tsx

@@ -4,8 +4,8 @@ import { useUniversalLifecycle } from '../hooks';
 import type { TextProps } from './types';
 
 const styles = StyleSheet.create({
-  light: { color: '#000000' },
-  dark: { color: '#FFFFFF' },
+  light: { color: 'var(--expo-ui-foreground, #000000)' },
+  dark: { color: 'var(--expo-ui-foreground, #FFFFFF)' },
   hidden: { display: 'none' },
   disabled: { opacity: 0.5 },
 });

package/src/universal/webUtils.ts

@@ -132,6 +132,10 @@ export const globalCss = css`
     }
   }
 
+  [data-theme='light'] {
+    ${lightVariables}
+  }
+
   [data-theme='dark'] {
     ${darkVariables}
   }

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

@@ -1 +0,0 @@
-83ac1d8d00a142a3ffa834c4a6c1db65

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

@@ -1 +0,0 @@
-5d7c4fd251da7578f23af5102d539533aefb3e64

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

@@ -1 +0,0 @@
-f9a24faad34f9f66bebcdde7d05a6cf72a8b4b9030819b80049de5084a694ef0

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

@@ -1 +0,0 @@
-10ed672c04082cf5f06e6ca6dca0f28229f11f3d503d46e5b61dbc7d3ad50bfdc1399838dd38dc5b8c1643ec375c4bf1672c95606ce28f7ed36384f66b829b68

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

@@ -1 +0,0 @@
-b51953e6905c7a42506ea0d23c859703

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

@@ -1 +0,0 @@
-93a6d734857d79049d179014133d651be167840a

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

@@ -1 +0,0 @@
-6cbb10f1e4cd5618c6997d87c2021e97c7bab1b8fc4ecc7be48f563e9c0e284a

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

@@ -1 +0,0 @@
-ba561fa50c9fde30184d2c36051e644fd87db59555b7b38f8e2e5b7096b03bf0d2aec3e53fff1831d2705d85b174ec1a7fc2e9cadc69c41237aac262bbea9365

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

@@ -1 +0,0 @@
-8a77f323b246c691865ac941165d9266

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

@@ -1 +0,0 @@
-b378b5a3097dfa2a27e87822671b5b1867b14d52

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

@@ -1 +0,0 @@
-46af13485988415a3ff14c812754b46df0b5cf7d0b7ebb28a80d7b16c3306fe4

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

@@ -1 +0,0 @@
-c9fcfdbaa4dbae59c5112fffa82e03ce4c36bb3840f98c1f149c9b0d8d0634dff5c5f63e47f32e921933b5a29bdab362830aecf5f37e3fa82cd552c28e774f71

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

@@ -1 +0,0 @@
-9cd26d77ffc11275527c424abeca3563

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

@@ -1 +0,0 @@
-ff65582de003d4ba6fbfb2194fb4bb97bd523798

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

@@ -1 +0,0 @@
-fde46f8c2665d31cc8c43574f2897aed7e82a9db1e29fdf0a557e4c8d528f005

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

@@ -1 +0,0 @@
-1f1f387588df2979f0a9f2eb9db168b05343069b1ffe2f46f30da422e31d554d9133a96afc594e69824183460ab5bfb9f2982a43613d294c31eac7a3d814b23b