@expo/ui

Patch Changes

• [Internal] Bump precompiled artifacts due to ABI breakage in expo-modules-jsi, which makes JavaScriptValue a non-copyable struct.

• [iOS] Fix the community BottomSheet clipping its content when the sheet is narrower than the window, as on iPhone Duo. When the sheet sized itself to its content, the content was pinned to the window width and centered in the sheet, so its leading edge was cut off. The content now takes its width from the sheet and its height from the content. presentationSizing takes a fitted option ({ horizontal, vertical }) to fit a sheet to its content on one axis only.

• [Android] Fix an RNHostView that ignores touches when a Compose button with a ripple in the same Host was pressed earlier. The ripple container that Compose adds was found first during React Native's touch-target search, so the touch went to the Host instead of the hosted view.

• Fixed measure() of views hosted in RNHostView inside SwiftUI and Jetpack Compose containers.

• Added a development warning when a Host renders directly inside another Host without an RNHostView. The universal BottomSheet no longer adds its own Host when it renders inside one.

• [iOS] Fixed measure() of views hosted in RNHostView when SwiftUI insets the Host's content, for example by the safe area.

• [Android] Fix the community MenuView opening detached above its anchor near the bottom of the screen, and add a properties prop to the Jetpack Compose DropdownMenu.

• [Android] Fix a numeric width() modifier crashing the app on launch with FieldCastException: Cannot cast value for field 'width' since the IntrinsicSize support added in 57.0.22 / 58.0.9. JS numbers reach the modifier record as Double, which matched neither branch of Either<Int, IntrinsicSizeType>; the field is now Either<Double, IntrinsicSizeType>, so numeric widths convert again and width(IntrinsicSize.Min|Max) keeps working.

• [iOS] Add cornerRadius and opacity to Chart's pieStyle. Pie slices could not have rounded corners, and their opacity was fixed at 0.8, so a chart drawn in solid colors always looked washed out. Both default to the previous behavior. Rounded corners let a single-slice donut work as a progress ring with rounded ends.

Patch Changes

• [iOS] Fix Chart ignoring lineStyle.width on line charts. The line mark applied .lineStyle twice (once for the dash pattern, once for the width), and the first one wins, so lines always rendered at 1 pt. The width and the dash pattern are now set in one StrokeStyle.

• [Android] Add showTitle and showHeadline to the Jetpack Compose DateTimePicker, DatePickerDialog, DateRangePicker, and DateRangePickerDialog to hide Material 3's title and headline. The community DateTimePicker with presentation="inline" now hides both on Android, matching iOS. To keep the title and headline, use DateTimePicker from @expo/ui/jetpack-compose instead.

• [Android] Fix a Pressable (or any JS responder) being cancelled when a MaskedView, or any other component that renders a Host, is laid over it. Once React Native grants the JS responder, the responder's view intercepts the touch stream and sends ACTION_CANCEL to its native children, including that Host. The Host reported this cancel as Compose claiming the gesture, which cancelled the press it belonged to. Holds longer than about 30 ms never fired onPress.

• Fix iOS Picker not reporting a selection that equals the last selection prop when the user changes it again before the prop updates.

• [iOS] Add searchable and searchToolbarBehavior SwiftUI modifiers.

Patch Changes

• [iOS] Add ArrangementView component and arrangementViewStyle, splitArrangementLayoutRatio, splitArrangementLayoutSize, splitArrangementFixedLayoutSize, and overlayArrangementEdge modifiers.

• [Android] Fix TimePickerDialog ignoring elementColors.containerColor.

• [iOS][tvOS] Fix the tvOS build failing to compile with 'inlineLarge' is unavailable in tvOS when @expo/ui is linked. ToolbarTitleDisplayMode.inlineLarge is unavailable on tvOS, but the inlineLarge case of the toolbarTitleDisplayMode modifier was only gated behind an OS version check that listed tvOS 18.0, so it was compiled into the tvOS slice. It is now guarded by platform and returns nil on tvOS. The same check also required iOS 18.0 / macOS 15.0, so inlineLarge silently fell back to automatic on iOS 17 and macOS 14 even though it is available there; it now applies on those versions.

• [iOS] onHingeChange also accepts a callback from useWorkletCallback, which runs on the UI thread to track the hinge angle without a JS-thread round trip.

• [iOS] Added the onHingeChange modifier, which reports the device hinge angle and status on iPhone Duo (iOS 27.1+).

• Added the useWorkletCallback hook, which wraps a worklet function so a modifier that accepts one can run it synchronously on the UI thread.

Patch Changes

• [android] Fix community/picker Picker not updating its displayed label after a selection or a selectedValue change.

• [web] Fix ListItem always showing a pointer cursor, even without an onPress, because React Native Web's Pressable applies one unconditionally. A ListItem with no onPress now shows the default cursor instead of misleadingly looking clickable.

• [iOS][Android] RNHostView matchContents accepts { horizontal, vertical }, so hosted content can take its width from the parent and its height from the content.

• [iOS] Stop linking WidgetKit into apps that use @expo/ui without widgets. The widgetURL, activityBackgroundTint, widgetAccentedRenderingMode, and containerBackground (widget placement) modifiers and the AccessoryWidgetBackground view now take effect only inside expo-widgets widgets and Live Activities.

• [iOS] Added the preferredColorScheme modifier, which sets the color scheme of a presentation such as BottomSheet, including its background.

Patch Changes

• Force-bump all packages, due to migration to changesets.

• [iOS] Added LazyVStack.ForEach and LazyHStack.ForEach, which render rows from data and keyExtractor with a children function: {({ item, index }) => <Row item={item} />}. Rows are recycled from a small pool around the visible range, so large stacks only render the rows near the viewport. Set recycling={false} to render every row.

• [android] Fix Switch label rendering one letter per line inside a Host with matchContents.

• [android] Added IntrinsicSize support to the width modifier.

Breaking changes

• breaking

  [iOS] Fix <Host> centering its content instead of top-aligning it, so a flex: 1 host matches Android's top-leading layout.

• breaking

  [iOS] Fix HStack, VStack and GlassEffectContainer collapsing an unset spacing to 0 instead of forwarding nil to SwiftUI, so they now use the system default spacing like Grid, LazyHStack and LazyVStack already do. Pass spacing={0} explicitly to keep the previous layout.

• breaking

  [Android] Removed the style prop from RNHostView. It set a React Native style on a view that Jetpack Compose positions and sizes; use modifiers instead. Hosted views are now measured where Compose drew them, so a style is no longer needed to keep measure() and the drawn position in agreement.

New features

• [Android] Add shadowElevation to DropdownMenu to customize the popup shadow in dp.

• [Android] Added the enabled and colors props to the Jetpack Compose RadioButton component.

• [Android] Added the Jetpack Compose DateRangePicker and DateRangePickerDialog components.

• [Android] Add cornerRadius support to dropdown menu.

• [iOS] Added 'default' as a value for every edge of the padding modifier, so a single edge can use the system default padding while the other edges use explicit lengths.

• [iOS] Added the Background component, which draws any view behind another view with an optional alignment, matching SwiftUI's background(alignment:content:).

• [android] Added maskClip modifier, exposing Compose's CarouselItemScope.maskClip so carousel items keep their shape while the carousel masks them.

• [iOS] Added presentationBackground SwiftUI modifier and applied it in community/bottom-sheet.

• [iOS] Added menuStyle and menuIndicator SwiftUI modifiers, which together with buttonStyle('plain') keep a Menu's custom label as its entire trigger on Mac Catalyst.

• [iOS] Added an optional kind argument to the contentShape modifier, so a shape can be applied to drag previews, context menu previews, hover effects, or accessibility instead of only hit-testing.

• [iOS] Added the properties, anchor and isSource parameters to the matchedGeometryEffect modifier, matching SwiftUI's signature.

• [iOS] Added the listRowSeparatorTint modifier, so a list row separator can be recolored and not only shown or hidden.

• [iOS] Added the alignmentGuide modifier, so the listRowSeparatorLeading guide can set where a list row separator starts.

• [iOS] Added the geometryGroup modifier, so a view's subviews can resolve their geometry against it instead of an animating ancestor. Without it, a Button inside a container with an animation modifier can draw its label away from its own background while the animation runs.

• [Android] Add a Jetpack Compose Image component.

• [android] Add shouldDismissOnBackPress prop to the universal BottomSheet component, forwarding it to ModalBottomSheet via properties.shouldDismissOnBackPress. When false, the back press does not dismiss the sheet (and the press still does not reach BackHandler).

• [universal] Added a contentPadding prop to BottomSheet, so sheet content can reach the sheet's edges instead of always sitting inside a hardcoded 16-unit inset.

• [android] Add shouldDismissOnClickOutside and scrimColor props to the universal BottomSheet component, forwarding them to ModalBottomSheet via properties.shouldDismissOnClickOutside and scrimColor.

• [android] Added the amplitude, wavelength and waveSpeed props to LinearWavyProgressIndicator and CircularWavyProgressIndicator, so the Material 3 wave can be configured instead of always using the Compose defaults.

• [android] Added the Jetpack Compose VerticalSlider component with support for reversed direction and custom thumb and track slots.

• [universal] Added containerColor and contentColor props to BottomSheet, and a colors prop to ListItem, so a sheet's chrome and its rows can be recolored to match an app's own theme instead of always using each platform's opaque default. Forwards to capabilities the jetpack-compose and swift-ui layers already expose (ModalBottomSheet.containerColor/contentColor, presentationBackground, ListItem.colors) without changing default behavior when omitted.

• [iOS] Added the ShapeStyle type, shared by the modifiers that paint an area, and taught foregroundStyle to accept materials (ultraThin, thin, regular, thick, ultraThick and bar).

• [iOS] Taught the background modifier to paint with any ShapeStyle, so a view can be filled with a material, a gradient or a hierarchical style instead of only a color, and added the ignoresSafeAreaEdges option from SwiftUI's signature. Deprecated backgroundOverlay in favor of the background modifier and the Background component.

• [iOS] Taught the presentationBackground modifier to paint with any ShapeStyle, matching SwiftUI, so a sheet can be backed by a material, a gradient or a hierarchical style instead of only a color. iOS 26 renders a material as a flat color rather than a translucent blur.

• [iOS] Added the scrollClipDisabled modifier, which lets content that draws outside a scrollable view's bounds, such as a shadow or a scaled-up card, stay visible instead of being clipped.

• deprecated

  [iOS] Taught the tint, border, strokeBorder and containerBackground modifiers to paint with any ShapeStyle, matching SwiftUI, where all four take a ShapeStyle rather than a color. The color parameter of border and strokeBorder is deprecated in favor of content, the name SwiftUI gives it.

• [iOS] Added the NavigationStack and Toolbar components, the navigationTitle modifier, and the close button role.

• [iOS] Added the NavigationLink component, and the path and onPathChange props and the NavigationDestination component, so a stack can push a destination that is built only when the link is followed.

Bug fixes

• [Android] Fix hosted React Native content sliding off the top of a BottomSheet when the keyboard opens.

• [Android] Fix DatePickerDialog preselecting today when initialDate is omitted, and keep its confirm button disabled while no date is selected so onDateSelected never receives an invalid date.

• [Android][iOS] Fix community/bottom-sheet content shrinking to its own width instead of filling the sheet when the sheet sizes to its content.

• [Android] Fixed a Text or an Icon with no explicit color rendering black inside Host, which made it unreadable in the dark color scheme. Host now provides LocalContentColor from the color scheme.

• [iOS][Android] Fixed a matchContents RNHostView inside a matchContents Host growing the layout on every pass.

• [iOS] Fix modifier application rebuilding a fresh AnyViewModifier every body evaluation, which defeated AttributeGraph subtree pruning during scroll.

• [Android] Fix a drag that starts on a hosted TextInput not scrolling the ScrollView around it. React Native's text input asks its ancestors not to intercept the gesture, then releases them one move later, and Jetpack Compose read that release as "Compose claimed the gesture" and cancelled the hosted subtree. RNHostView no longer passes such a release on to Compose.

• [Android] Fix the system status bar and navigation bar turning light while a BottomSheet or ModalBottomSheet with a custom dark background is open. A custom container color matches no color-scheme role, so the default content color fell back to black and Material3 themed the sheet window's system bars from it. The default content color is now derived from the container color's luminance, so it also contrasts with a custom background.

• [iOS] Fixed a crash when a focused TextField or SecureField is unmounted inside a list row that is being removed, for example closing a modal with the keyboard up on a field nested in SwipeActions. Hosted text inputs now blur before React removes their native views.

• Fixed the keyboard staying open when tapping outside a text field hosted by <Host>. A parent ScrollView's tap-to-dismiss, its keyboardShouldPersistTaps setting, and Keyboard.dismiss() now reach hosted text fields. React Native treats the whole <Host> as the input, so a tap on other content inside the same host still keeps the keyboard open.

• [Android] Fix the dev menu not opening with the menu key (Cmd+M) while a BottomSheet is open. Material3 shows the sheet in its own dialog window, so key events did not reach the activity. The sheet now forwards them, as React Native's Modal does, unless a view in the sheet is accepting text.

• [iOS] Fix an empty RNHostView (e.g. one hosting a hidden RN Modal, which renders null until visible is true) taking up space in SwiftUI containers — such as a spurious empty row in a FieldGroup/Form section that shifts the other components. It now renders nothing until a child is mounted, which also lets the touch handler attach when the child mounts after the host appeared.

• [iOS] Fix Toggle rendering local state instead of isOn, which left community/menu checkmarks out of sync and dropped every second onPressAction. Toggle is now fully controlled: when isOn is set, it only moves once JS updates the prop.

• [Android] Preserve vector drawable fillType values when loading images so even-odd paths render correctly.

• [universal] Fix Cannot use shared object that was already released when a worklet callback prop closes over an unstable value.

• [universal] Add an explicit type annotation to BottomSheetTextInput so its type doesn't depend on referencing React Native's internal TextInputType.

• [iOS] Fix Slider ignoring value prop updates after the first drag.

• [iOS] Fix community/bottom-sheet close callbacks firing before the sheet finished dismissing.

• [iOS] Fix the community/datetime-picker field collapsing to zero width — invisible and untappable — when its parent doesn't stretch it (e.g. alignItems: 'center').

• [iOS] Fixed viewport size measurement reading the main screen instead of the scene the view is in.

• [iOS] Fixed Overlay, Alert, ConfirmationDialog and Popover silently ignoring the modifiers prop, which never reached the native view.

• [iOS] Fix a hosted Pressable dropping its press when the finger moves, by measuring hosted React Native views where SwiftUI placed them.

• [iOS] Fix hosted React Native views receiving no touches inside a BottomSheet or Popover.

• [Android] Fix touch handling for hosted React Native views: a Pressable dropped its press when the finger moved, hosted content stole gestures from enclosing scrollables, a back gesture was reported as a long press, a press fired after a Jetpack Compose pager or scrollable had already claimed the gesture, and content inside AlertDialog, DropdownMenu, ExposedDropdownMenu and TooltipBox received no touches at all. Hosted views are now measured where Jetpack Compose placed them, and dispatch their own touches only when presented in their own window.

• [Android] Fix a hosted Pressable in a PagerView ignoring presses on pages after the first, where a re-parented host kept the bounds of the holder it left and answered for a screen area it no longer occupied.

• [iOS] Fix ColorPicker reporting every color one value too low, because colorToHex truncated instead of rounding. Apps feed the reported value back into selection, so the error compounded and each interaction moved all three channels down by one.

• [Android] Explicitly enable buildFeatures.buildConfig, required by AGP 9.

• Fix Host color scheme type errors on React Native 0.87.

• [iOS] Fixed PlatformColor and DynamicColorIOS values dropping the backgroundColor and borderColor of a universal component. Both were stringified to "[object Object]", which the native color converter rejects, so the modifier was discarded without a trace.

• [iOS] Preserve string-based child identities in Overlay, Background, and Mask.

Others

• [web] Replace unmaintained vaul with an in-house HTML <dialog> bottom sheet in community and universal BottomSheet.

• [Android] Change modifiers type and provide appContext.

• [Android] Change Text color props to ColorValue.

• [Android] Expose getMaterialColorTokens for expo-widgets.

New features

• [iOS] Added an anchor prop to BottomSheet to anchor the sheet to a view so opening it doesn't shift surrounding layout. (#48063 by @loganwishartcraig) (#48109 by @intergalacticspacehighway) (#48109 by @loganwishartcraig, @intergalacticspacehighway)

• [Android] Add a colorScheme prop to the community MenuView.

• [iOS] Added the SwiftUI menuOrder modifier (automatic/fixed/priority) to control menu item ordering. With the default automatic order, menus that open upward display their items reversed.

Bug fixes

• [iOS] Fix a TextField selection crash when JavaScript replaces the text while the user types, by using the clamped selection binding on all OS versions and clearing the selection on external writes. (#48274 by @realZachi) (#48277 by @intergalacticspacehighway) (#48277 by @realZachi, @intergalacticspacehighway)

• [Android] Fix Pressable (and other responder-based touchables) hosted in RNHostView dropping presses on any finger movement. (#48131 by @BrianUribe6) (#48217 by @intergalacticspacehighway) (#48217 by @BrianUribe6, @intergalacticspacehighway)

• [iOS] Fix community/masked-view content being clipped after rotation because of window safe area insets.

• [Android] Fix unexpected resize when opening the calendar from spinner mode on Android.

• [iOS] Fix tvOS build failure in the SwiftUI menuOrder modifier — MenuOrder.priority is unavailable on tvOS, so it now falls back to .automatic there.

• [iOS] Fix community/menu MenuView not tinting a leaf action Button's leading SF Symbol from imageColor — it applied .foregroundColor (which the iOS system menu ignores for a button's content) where checkable Toggle items applied .tint; leaf buttons now use .tint too.