apps/docs/content/docs/native/releases/v1-0-2.mdx
HeroUI Native v1.0.2 introduces the asChild slot pattern for PressableFeedback and Surface components, adds VoiceOver modal containment support across all portal-based overlay components, and fixes an Android-specific Button variant styling issue. This release also refines Input and Select visual styles and improves RadioGroup documentation with inline API references.
Update to the latest version:
<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm">
npm i heroui-native
Experience all the v1.0.2 improvements in action with our preview app! You can explore the new asChild slot pattern, portal accessibility improvements, improved Button behavior on Android, and the refined Input and Select styles directly on your device.
Make sure you have the latest version of Expo Go installed on your mobile device.
Option 1: Scan the QR Code
Use your device's camera or Expo Go app to scan:
<div className="flex justify-center my-6"> </div>Note for Android users: If scanning the QR code with your device's camera or other scanner apps redirects to a browser and shows a 404 error, open Expo Go first and use its built-in QR scanner instead.
Option 2: Click the Link
This will automatically open the app in Expo Go if it's installed on your device.
asChild Slot Pattern for PressableFeedback and SurfaceThe PressableFeedback and Surface components now support the asChild prop, enabling the Slot pattern for polymorphic rendering. When asChild is true, each component merges its behavior and styling onto a single child element instead of wrapping it in an additional node.
PressableFeedback uses Animated.createAnimatedComponent(Slot.Pressable) to merge press handling and animated styles onto the child element. Surface uses Slot.View to merge surface styling (elevation, background, className) onto the child element.
New capability:
import { PressableFeedback, Surface } from "heroui-native";
// PressableFeedback merges press handling onto the child
<PressableFeedback asChild onPress={() => console.log("pressed")}>
<MyCustomComponent />
</PressableFeedback>
// Surface merges surface styling onto the child
<Surface asChild elevation={2}>
<MyCustomCard />
</Surface>
The asChild prop defaults to false, preserving existing behavior. No migration is required. The child must be a single React element when asChild is enabled. Both implementations follow the established Slot primitive pattern already used in the codebase.
Related PR: #380
unstable_accessibilityContainerViewIsModal for Portal ComponentsA new unstable_accessibilityContainerViewIsModal prop has been added to all portal-based overlay components, giving consumers control over whether iOS VoiceOver treats the overlay window as a modal container. When enabled, VoiceOver focus is restricted to elements inside the overlay, preventing navigation to content behind it.
Supported components:
BottomSheet.Portal)Dialog.Portal)Menu.Portal)Popover.Portal)Select.Portal)ToastProvider)New capability:
import { Dialog } from "heroui-native";
<Dialog>
<Dialog.Portal unstable_accessibilityContainerViewIsModal>
<Dialog.Content>
</Dialog.Content>
</Dialog.Portal>
</Dialog>
The prop defaults to false, preserving existing behavior. It is marked unstable because it maps directly to the native accessibilityViewIsModal on FullWindowOverlay from react-native-screens and may change with future releases of that library.
Related PR: #383
Refined the visual styling of the Input and Select components for a cleaner, more balanced appearance.
Fixes:
border-2 (2px) to border-[1.5px] for a subtler, less heavy border appearancepy-3.5 to py-3 for tighter, more compact spacingThese are purely cosmetic adjustments with no API or behavioral changes. Visual regression testing is recommended to confirm the updated styles render as expected across iOS and Android.
Related PR: #381
This release includes fixes for the following issues:
Issue #363: Fixed the Button outline variant on Android where the border would persist when switching to another variant via a conditional prop. React Native on Android sometimes retains the borderWidth property during variant transitions. All button variants except outline now include explicit border-0 classes to ensure borderWidth is reset to 0 whenever the variant changes.
Issue #357: Resolved the request for asChild support on Card for pressable card patterns. The new asChild slot pattern on PressableFeedback and Surface enables developers to compose pressable card layouts by merging press handling and surface styling onto a single child element without additional wrapper nodes.
Related PRs:
The RadioGroup documentation now embeds full API reference tables for Radio, Radio.Indicator, and Radio.IndicatorThumb directly within the page. This removes the need for readers to navigate to a separate Radio doc file to understand the props available when composing radios inside a RadioGroup.Item.
Improvements:
Radio, Radio.Indicator, and Radio.IndicatorThumb embedded inlineRadioRenderProps, RadioRootAnimation, and RadioIndicatorThumbAnimation typesRelated PR: #384
The following documentation pages have been updated to reflect the changes in this release:
asChild prop documentationasChild prop documentationunstable_accessibilityContainerViewIsModal prop documentationunstable_accessibilityContainerViewIsModal prop documentationunstable_accessibilityContainerViewIsModal prop documentationunstable_accessibilityContainerViewIsModal prop documentationunstable_accessibilityContainerViewIsModal prop documentationunstable_accessibilityContainerViewIsModal prop documentationThanks to everyone who contributed to this release!