@expo/ui 58.0.20 → 58.0.22

package/ios/RNHostView.swift

@@ -47,6 +47,24 @@ struct RNHostView: ExpoSwiftUI.View {
           isEnabled: !props.layoutRoot
         )
       )
+      .onAppear {
+        updateTouchHandler()
+      }
+      .onChange(of: props.children?.first?.childIdentity) { _ in
+        updateTouchHandler()
+      }
+      .onDisappear {
+        touchHandler.detach()
+      }
+  }
+
+  // Follows the current child, which Fabric can replace or remount while this view stays.
+  private func updateTouchHandler() {
+    if props.layoutRoot, let view = firstChildUIView {
+      touchHandler.attach(to: view)
+    } else {
+      touchHandler.detach()
+    }
   }
 
   @ViewBuilder
@@ -60,14 +78,6 @@ struct RNHostView: ExpoSwiftUI.View {
       ) {
         Children()
       }
-      .onAppear {
-        if props.layoutRoot {
-          touchHandler.attach(to: childUIView)
-        }
-      }
-      .onDisappear {
-        touchHandler.detach()
-      }
     } else if matchesContents {
       // No hosted UIView (a pure SwiftUI child, e.g. Text/Image). Render it at its
       // natural size instead of falling into the fill branch below, which would
@@ -82,14 +92,6 @@ struct RNHostView: ExpoSwiftUI.View {
       Children()
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .modifier(ReportSizeToYogaNodeModifier(shadowNodeProxy: props.shadowNodeProxy))
-        .onAppear {
-          if props.layoutRoot, let view = firstChildUIView {
-            touchHandler.attach(to: view)
-          }
-        }
-        .onDisappear {
-          touchHandler.detach()
-        }
     }
   }
 
@@ -173,6 +175,7 @@ private final class RNHostTouchHandler: ObservableObject {
 // An axis that is not matched fills the parent and reports its size to the Yoga node instead
 private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
   @StateObject private var observer: Observer
+  let childUIView: UIView
   let horizontal: Bool
   let vertical: Bool
   let shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy
@@ -186,6 +189,7 @@ private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
     @ViewBuilder content: () -> Content
   ) {
     _observer = StateObject(wrappedValue: Observer(view: childUIView))
+    self.childUIView = childUIView
     self.horizontal = horizontal
     self.vertical = vertical
     self.shadowNodeProxy = shadowNodeProxy
@@ -193,6 +197,14 @@ private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
   }
 
   var body: some SwiftUI.View {
+    sizedContent
+      .onChange(of: childUIView) { newView in
+        observer.observe(newView)
+      }
+  }
+
+  @ViewBuilder
+  private var sizedContent: some SwiftUI.View {
     if horizontal && vertical {
       content
         .frame(width: observer.size.width, height: observer.size.height)
@@ -223,6 +235,12 @@ private struct ApplySizeFromYogaNode<Content: SwiftUI.View>: SwiftUI.View {
 
     init(view: UIView) {
       self.size = view.bounds.size
+      observe(view)
+    }
+
+    func observe(_ view: UIView) {
+      kvoToken?.invalidate()
+      size = view.bounds.size
       kvoToken = view.observe(\.bounds) { [weak self] view, _ in
         MainActor.assumeIsolated {
           self?.size = view.bounds.size

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

@@ -0,0 +1 @@
+3367880bd9dfec581496b8b5087f9ae0

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

@@ -0,0 +1 @@
+a1628408f238e018286c0c9887ebb3cf9912577d

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

@@ -0,0 +1 @@
+2487d657c68bf866e677ef379bc97b7de37edb41eb173b6d8d938b81bfcb2293

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

@@ -0,0 +1 @@
+6c228c1dcbe9ee23cca52ba20eb724d39d18533e6c31ad738ab5738e5dfc64432b7c79363f7ff772f019f8bda955d0d38ccb3f4331d3236e4beddd70e6e426f4

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

@@ -0,0 +1 @@
+6b7272e2ff6f2f155c76a4e7a3341af6

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

@@ -0,0 +1 @@
+7acd625f3cd50ad228fac699424fcff3c77942bb

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

@@ -0,0 +1 @@
+59cc7013ee6674f030b4f81641fa80fb1829815d6ab5a7903f0e7479e6adb96e

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

@@ -0,0 +1 @@
+0a89be2233ee1dd16b1cb671e0694d6d9a428f7f199e3e3efcdd621090c541d435478b39402a6da271373a70cbed690f989e938ebcbbcd35b740e1bf240dfb64

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.20/expo.modules.ui-58.0.20.module → 58.0.22/expo.modules.ui-58.0.22.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "58.0.20",
+    "version": "58.0.22",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.20.aar",
-          "url": "expo.modules.ui-58.0.20.aar",
-          "size": 1859361,
-          "sha512": "ba561fa50c9fde30184d2c36051e644fd87db59555b7b38f8e2e5b7096b03bf0d2aec3e53fff1831d2705d85b174ec1a7fc2e9cadc69c41237aac262bbea9365",
-          "sha256": "6cbb10f1e4cd5618c6997d87c2021e97c7bab1b8fc4ecc7be48f563e9c0e284a",
-          "sha1": "93a6d734857d79049d179014133d651be167840a",
-          "md5": "b51953e6905c7a42506ea0d23c859703"
+          "name": "expo.modules.ui-58.0.22.aar",
+          "url": "expo.modules.ui-58.0.22.aar",
+          "size": 1882334,
+          "sha512": "0a89be2233ee1dd16b1cb671e0694d6d9a428f7f199e3e3efcdd621090c541d435478b39402a6da271373a70cbed690f989e938ebcbbcd35b740e1bf240dfb64",
+          "sha256": "59cc7013ee6674f030b4f81641fa80fb1829815d6ab5a7903f0e7479e6adb96e",
+          "sha1": "7acd625f3cd50ad228fac699424fcff3c77942bb",
+          "md5": "6b7272e2ff6f2f155c76a4e7a3341af6"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-58.0.20.aar",
-          "url": "expo.modules.ui-58.0.20.aar",
-          "size": 1859361,
-          "sha512": "ba561fa50c9fde30184d2c36051e644fd87db59555b7b38f8e2e5b7096b03bf0d2aec3e53fff1831d2705d85b174ec1a7fc2e9cadc69c41237aac262bbea9365",
-          "sha256": "6cbb10f1e4cd5618c6997d87c2021e97c7bab1b8fc4ecc7be48f563e9c0e284a",
-          "sha1": "93a6d734857d79049d179014133d651be167840a",
-          "md5": "b51953e6905c7a42506ea0d23c859703"
+          "name": "expo.modules.ui-58.0.22.aar",
+          "url": "expo.modules.ui-58.0.22.aar",
+          "size": 1882334,
+          "sha512": "0a89be2233ee1dd16b1cb671e0694d6d9a428f7f199e3e3efcdd621090c541d435478b39402a6da271373a70cbed690f989e938ebcbbcd35b740e1bf240dfb64",
+          "sha256": "59cc7013ee6674f030b4f81641fa80fb1829815d6ab5a7903f0e7479e6adb96e",
+          "sha1": "7acd625f3cd50ad228fac699424fcff3c77942bb",
+          "md5": "6b7272e2ff6f2f155c76a4e7a3341af6"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.20-sources.jar",
-          "url": "expo.modules.ui-58.0.20-sources.jar",
-          "size": 113113,
-          "sha512": "10ed672c04082cf5f06e6ca6dca0f28229f11f3d503d46e5b61dbc7d3ad50bfdc1399838dd38dc5b8c1643ec375c4bf1672c95606ce28f7ed36384f66b829b68",
-          "sha256": "f9a24faad34f9f66bebcdde7d05a6cf72a8b4b9030819b80049de5084a694ef0",
-          "sha1": "5d7c4fd251da7578f23af5102d539533aefb3e64",
-          "md5": "83ac1d8d00a142a3ffa834c4a6c1db65"
+          "name": "expo.modules.ui-58.0.22-sources.jar",
+          "url": "expo.modules.ui-58.0.22-sources.jar",
+          "size": 115385,
+          "sha512": "6c228c1dcbe9ee23cca52ba20eb724d39d18533e6c31ad738ab5738e5dfc64432b7c79363f7ff772f019f8bda955d0d38ccb3f4331d3236e4beddd70e6e426f4",
+          "sha256": "2487d657c68bf866e677ef379bc97b7de37edb41eb173b6d8d938b81bfcb2293",
+          "sha1": "a1628408f238e018286c0c9887ebb3cf9912577d",
+          "md5": "3367880bd9dfec581496b8b5087f9ae0"
         }
       ]
     }

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

@@ -0,0 +1 @@
+9c0bd2c795559f590e2efcec2bfbdd40

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

@@ -0,0 +1 @@
+0ca2cbc2529c5570d31a5cbd827f2b9c58602e25

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

@@ -0,0 +1 @@
+113bc88759a3cbbb991dc12571a1b53722855970232edf6508469dc52c822423

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

@@ -0,0 +1 @@
+ef4e3b199c2d69deab60d857ef81dc8c786f2bdc5a4321e9397111507d9f235c8575cd91289d8c612666b901cadd7aeca414aece1769dca15ec2088f5b8c0cb4

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.20/expo.modules.ui-58.0.20.pom → 58.0.22/expo.modules.ui-58.0.22.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>58.0.20</version>
+  <version>58.0.22</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

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

@@ -0,0 +1 @@
+1fc7977e8379c6c817fa7524ff7db31f

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

@@ -0,0 +1 @@
+2a13240cd35aa73ed4d9787b4a70cbe0453431dd

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

@@ -0,0 +1 @@
+c15bb9d564da8ea75a501e89d3c855df5294966438d81168675388dab731e23e

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

@@ -0,0 +1 @@
+a1a75142fcd486afa2e7bd2f27cdc21e1997cb309fb762963b61e65c88fd6e5a62af5234f448b485b0a2f3081f74eb1c8664e9d08a1f1a445ca2c62639e7f3f1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "58.0.20",
+  "version": "58.0.22",
   "description": "A collection of UI components",
   "keywords": [
     "Jetpack Compose",
@@ -141,7 +141,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
-    "@expo/internal-scripts": "58.0.3",
+    "@expo/internal-scripts": "58.0.4",
     "@playwright/test": "^1.59.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-native": "^14.0.1",

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -135,10 +135,14 @@ export function BottomSheet(props: BottomSheetProps) {
     } else if (indexProp >= 0) {
       closedRef.current = false;
       setIsPresented(true);
-      const clampedIndex = Math.min(indexProp, detents.length - 1);
-      setCurrentIndex(clampedIndex);
-      currentIndexRef.current = clampedIndex;
     }
+  }, [indexProp]);
+
+  useEffect(() => {
+    const requestedIndex = indexProp >= 0 ? indexProp : currentIndexRef.current;
+    const clampedIndex = Math.min(requestedIndex, detents.length - 1);
+    setCurrentIndex(clampedIndex);
+    currentIndexRef.current = clampedIndex;
   }, [indexProp, detents.length]);
 
   const handlePresentedChange = useCallback((presented: boolean) => {

package/src/community/pager-view/PagerView.ios.tsx

@@ -9,7 +9,7 @@ import {
   useState,
   type ReactElement,
 } from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { useNativeState, worklets } from '../../State';
 import { Group } from '../../swift-ui/Group';
@@ -89,6 +89,12 @@ export function PagerView(props: PagerViewProps) {
   const pageCountRef = useRef(0);
   pageCountRef.current = pageCount;
 
+  const isScrollingRef = useRef(false);
+  // The SwiftUI scroll doesn't cancel React Native touches on its pages. Like
+  // React Native's `ScrollView`, take the touch from the page content while
+  // the pager moves, so a swipe or a tap that stops it doesn't press anything.
+  const shouldCaptureTouch = () => isScrollingRef.current;
+
   // Clamp on first render — out-of-range initials produce an id that matches
   // no `Group`, leaving `.scrollPosition(id:)` silently stuck at 0.
   const [clampedInitialPage] = useState(() => {
@@ -188,17 +194,24 @@ export function PagerView(props: PagerViewProps) {
   );
   const geometryModifier = useScrollGeometryChange(handleScrollGeometry);
 
-  const phaseModifier = onPageScrollStateChanged
-    ? onScrollPhaseChange((phase) =>
-        onPageScrollStateChanged(wrapNativeEvent({ pageScrollState: phaseToPageState(phase) }))
-      )
-    : null;
+  const phaseModifier = onScrollPhaseChange((phase) => {
+    const pageScrollState = phaseToPageState(phase);
+    isScrollingRef.current = pageScrollState !== 'idle';
+    onPageScrollStateChanged?.(wrapNativeEvent({ pageScrollState }));
+  });
 
   const pages = validChildren.map((child, index) => (
     <Group
       key={child.key ?? String(index)}
       modifiers={[containerRelativeFrame({ axes: 'horizontal' }), id(String(index))]}>
-      <RNHostView>{child}</RNHostView>
+      <RNHostView>
+        <View
+          style={styles.page}
+          onStartShouldSetResponderCapture={shouldCaptureTouch}
+          onMoveShouldSetResponderCapture={shouldCaptureTouch}>
+          {child}
+        </View>
+      </RNHostView>
     </Group>
   ));
 
@@ -209,7 +222,7 @@ export function PagerView(props: PagerViewProps) {
     scrollDisabled(!scrollEnabledState),
     scrollPosition(activePageState, { onChange: handleScrolledIDChange }),
     ...(geometryModifier ? [geometryModifier] : []),
-    ...(phaseModifier ? [phaseModifier] : []),
+    phaseModifier,
   ];
 
   return (
@@ -271,3 +284,7 @@ function warnIfPreIOS18ScrollCallbacksDropped(
     );
   }
 }
+
+const styles = StyleSheet.create({
+  page: { flex: 1 },
+});

package/src/community/segmented-control/SegmentedControl.ios.tsx

@@ -1,7 +1,11 @@
 import { Host } from '../../swift-ui/Host';
 import { Picker } from '../../swift-ui/Picker';
 import { Text } from '../../swift-ui/Text';
-import { disabled as disabledModifier } from '../../swift-ui/modifiers';
+import {
+  accessibilityLabel as accessibilityLabelModifier,
+  disabled as disabledModifier,
+} from '../../swift-ui/modifiers';
+import { createModifier } from '../../swift-ui/modifiers/createModifier';
 import { environment } from '../../swift-ui/modifiers/environment';
 import { pickerStyle } from '../../swift-ui/modifiers/pickerStyle';
 import { tag } from '../../swift-ui/modifiers/tag';
@@ -15,15 +19,23 @@ export function SegmentedControl(props: SegmentedControlProps) {
     enabled = true,
     onChange,
     onValueChange,
+    tintColor,
     appearance,
     style,
     testID,
+    accessibilityLabel,
   } = props;
 
   const modifiers: ModifierConfig[] = [pickerStyle('segmented')];
   if (!enabled) {
     modifiers.push(disabledModifier());
   }
+  if (accessibilityLabel) {
+    modifiers.push(accessibilityLabelModifier(accessibilityLabel));
+  }
+  if (tintColor) {
+    modifiers.push(createModifier('selectedSegmentTintColor', { color: tintColor }));
+  }
   if (appearance) {
     modifiers.push(environment('colorScheme', appearance));
   }

package/src/community/segmented-control/types.tsx

@@ -43,7 +43,6 @@ export interface SegmentedControlProps {
   onValueChange?: (value: string) => void;
   /**
    * Accent color of the control.
-   * @platform android, web
    */
   tintColor?: string;
   /**
@@ -52,6 +51,11 @@ export interface SegmentedControlProps {
   appearance?: 'dark' | 'light';
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * The name of the control that screen readers announce.
+   * @platform ios
+   */
+  accessibilityLabel?: string;
 }
 
 /**

package/src/community/segmented-control/vendor/SegmentedControl.tsx

@@ -5,7 +5,15 @@
  */
 
 import * as React from 'react';
-import { Animated, Easing, I18nManager, StyleSheet, View, useColorScheme } from 'react-native';
+import {
+  Animated,
+  Easing,
+  I18nManager,
+  Platform,
+  StyleSheet,
+  View,
+  useColorScheme,
+} from 'react-native';
 
 import { SegmentedControlTab } from './SegmentedControlTab';
 import { SegmentsSeparators } from './SegmentsSeparators';
@@ -53,7 +61,7 @@ export function SegmentedControl({
         toValue: isRTL * (selectedIndex ?? 0),
         duration: 300,
         easing: Easing.out(Easing.quad),
-        useNativeDriver: true,
+        useNativeDriver: Platform.OS !== 'web',
       }).start();
     }
   }, [animation, segmentWidth, selectedIndex]);

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

@@ -0,0 +1,43 @@
+import { requireNativeView } from 'expo';
+import type { ReactNode } from 'react';
+
+/**
+ * Composition local values that `CompositionLocalProvider` can provide.
+ */
+export type CompositionLocalValues = {
+  /**
+   * The minimum size, in dp, that Material components such as `Button`, `IconButton`, `Checkbox`, and
+   * `Switch` reserve for their touch target. Maps to `LocalMinimumInteractiveComponentSize`.
+   * Set it to `0` to let these components be smaller than Material's default of 48dp.
+   */
+  minimumInteractiveComponentSize?: number;
+};
+
+export type CompositionLocalProviderProps = {
+  /**
+   * The values to provide to the children.
+   */
+  values: CompositionLocalValues;
+  /**
+   * The content that receives the values.
+   */
+  children?: ReactNode;
+};
+
+type NativeCompositionLocalProviderProps = CompositionLocalValues & {
+  children?: ReactNode;
+};
+
+const CompositionLocalProviderNativeView: React.ComponentType<NativeCompositionLocalProviderProps> =
+  requireNativeView('ExpoUI', 'CompositionLocalProviderView');
+
+/**
+ * Provides composition local values to its children, like Jetpack Compose's `CompositionLocalProvider`.
+ * It adds no layout of its own, so children keep modifiers such as `weight` from the parent `Row`
+ * or `Column`.
+ */
+export function CompositionLocalProvider({ values, children }: CompositionLocalProviderProps) {
+  return (
+    <CompositionLocalProviderNativeView {...values}>{children}</CompositionLocalProviderNativeView>
+  );
+}

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

@@ -6,13 +6,19 @@ import {
   type StyleProp,
   type ViewStyle,
   I18nManager,
+  processColor,
   useColorScheme as useRNColorScheme,
 } from 'react-native';
 
 import { NativeTreeContext, useWarnIfNestedHost } from '../../NativeTreeContext';
 import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
 import { useMergeRefs } from '../../utils/useMergeRefs';
-import { getMaterialColors, HostPaletteContext } from '../colors';
+import {
+  getMaterialColors,
+  HostPaletteContext,
+  type MaterialColors,
+  type RgbaHex,
+} from '../colors';
 import { type PrimitiveBaseProps } from '../layout';
 
 export interface HostProps extends PrimitiveBaseProps {
@@ -52,6 +58,14 @@ export interface HostProps extends PrimitiveBaseProps {
    */
   seedColor?: ColorValue;
 
+  /**
+   * Material 3 color roles that replace the matching roles of the palette from
+   * `colorScheme` and `seedColor`. Roles you omit keep their palette value.
+   * The overrides theme Compose children and are returned by `useMaterialColors()`
+   * in the same `#RRGGBBAA` form as the other roles.
+   */
+  colorOverrides?: Partial<MaterialColors>;
+
   /**
    * The layout direction for the content.
    * Defaults to the current locale direction from I18nManager.
@@ -93,6 +107,7 @@ export function Host(props: HostProps) {
     layoutDirection,
     colorScheme,
     seedColor,
+    colorOverrides,
     ref,
     children,
     ...restProps
@@ -101,10 +116,19 @@ export function Host(props: HostProps) {
 
   const systemScheme = useRNColorScheme();
   const resolvedScheme = schemeString ?? (systemScheme === 'dark' ? 'dark' : 'light');
-  const palette = useMemo(
-    () => getMaterialColors({ scheme: resolvedScheme, seedColor }),
-    [resolvedScheme, seedColor]
+  // Key on the normalized values, not the object, so an inline `colorOverrides` object keeps
+  // the palette from `useMaterialColors()` reference-stable across re-renders.
+  const overridesKey = colorOverrides
+    ? JSON.stringify(normalizeColorOverrides(colorOverrides))
+    : null;
+  const normalizedOverrides = useMemo<Partial<MaterialColors> | undefined>(
+    () => (overridesKey ? JSON.parse(overridesKey) : undefined),
+    [overridesKey]
   );
+  const palette = useMemo(() => {
+    const basePalette = getMaterialColors({ scheme: resolvedScheme, seedColor });
+    return normalizedOverrides ? { ...basePalette, ...normalizedOverrides } : basePalette;
+  }, [resolvedScheme, seedColor, normalizedOverrides]);
   const hostRef = useTextInputHostRef();
   const mergedRef = useMergeRefs(ref, hostRef);
   useWarnIfNestedHost('Jetpack Compose');
@@ -123,6 +147,7 @@ export function Host(props: HostProps) {
           }
           colorScheme={schemeString}
           seedColor={seedColor}
+          colorOverrides={normalizedOverrides}
           onLayoutContent={onLayoutContent}
           layoutDirection={
             layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
@@ -134,3 +159,24 @@ export function Host(props: HostProps) {
     </HostPaletteContext.Provider>
   );
 }
+
+function normalizeColorOverrides(overrides: Partial<MaterialColors>): Partial<MaterialColors> {
+  const normalized: Partial<MaterialColors> = {};
+  for (const [role, color] of Object.entries(overrides) as [keyof MaterialColors, RgbaHex][]) {
+    const hex = color != null ? toRgbaHex(color) : null;
+    if (hex) {
+      normalized[role] = hex;
+    }
+  }
+  return normalized;
+}
+
+// `processColor` returns `0xAARRGGBB`; the palette uses `#RRGGBBAA` like native `toTokenMap()`.
+function toRgbaHex(color: RgbaHex): RgbaHex | null {
+  const argb = processColor(color);
+  if (typeof argb !== 'number') {
+    return null;
+  }
+  const rgba = ((argb << 8) | (argb >>> 24)) >>> 0;
+  return `#${rgba.toString(16).padStart(8, '0').toUpperCase()}`;
+}

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

@@ -39,6 +39,8 @@ export interface SwitchProps {
   enabled?: boolean;
   /**
    * Callback function that is called when the checked state changes.
+   * When omitted, the switch is not interactive on its own, so a parent with the
+   * `toggleable` modifier can handle input and accessibility for it.
    */
   onCheckedChange?: (value: boolean) => void;
   /**
@@ -58,6 +60,7 @@ export interface SwitchProps {
 
 type NativeSwitchProps = Omit<SwitchProps, 'onCheckedChange' | 'children'> & {
   children?: React.ReactNode;
+  nativeClickable: boolean;
   onCheckedChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
 };
 
@@ -94,6 +97,7 @@ function transformSwitchProps(props: SwitchProps): Omit<NativeSwitchProps, 'chil
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    nativeClickable: onCheckedChange != null,
     onCheckedChange: ({ nativeEvent: { value } }) => {
       onCheckedChange?.(value);
     },