Beta 11

Beta 11 focuses on improving component reliability and developer experience across several key areas. This release enhances Bottom Sheet close coordination to ensure consistent behavior across all close mechanisms, fixes Dialog swipe-to-dismiss gesture handling issues, resolves TextField styling and functionality problems, and introduces a new PortalHost export for advanced portal mounting scenarios. These improvements make interactions smoother and provide developers with more control over component behavior.

Installation

Update to the latest version:

npm i heroui-native@beta

pnpm add heroui-native@beta

yarn add heroui-native@beta

bun add heroui-native@beta

Try It Out

Experience all the Beta 11 improvements in action with our preview app! You can explore the enhanced Bottom Sheet, Dialog, TextField, and PortalHost components directly on your device.

Prerequisites

Make sure you have the latest version of Expo Go installed on your mobile device.

How to Access

Option 1: Scan the QR Code

Use your device's camera or Expo Go app to scan:

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

📱 Open Demo App in Expo Go

This will automatically open the app in Expo Go if it's installed on your device.

Component Improvements

Bottom Sheet Close Coordination Enhancement

The Bottom Sheet component has been enhanced with improved close coordination across all close mechanisms.

Improvements:

• Enhanced synchronization between swipe-to-dismiss, overlay press, close button, and programmatic close actions
• Improved state management to prevent race conditions during close operations
• More reliable onOpenChange callback firing across all close scenarios
• Better coordination between animation progress and close state transitions

The Bottom Sheet component supports multiple ways to close: swiping down, pressing the overlay, clicking the close button, or programmatically calling close. Previously, these mechanisms could sometimes conflict or produce inconsistent behavior. This update ensures all close mechanisms work harmoniously together, providing a smoother and more predictable user experience.

Related PR: #201

Dialog Swipe-to-Dismiss Gesture Handling Fix

The Dialog component has been fixed to properly handle swipe-to-dismiss gestures.

Improvements:

• Fixed gesture detection and handling for swipe-to-dismiss functionality
• Improved gesture state management during swipe interactions
• Enhanced animation coordination during gesture release
• More reliable dismissal when swiping beyond the threshold

The Dialog component supports swipe-to-dismiss functionality, allowing users to dismiss dialogs by swiping down. This fix resolves issues where gesture handling could become unresponsive or produce unexpected behavior during swipe interactions.

Related PR: #193

TextField Styling and Functionality Fixes

The TextField component has been fixed to resolve styling and functionality issues.

Improvements:

• Fixed input styling inconsistencies
• Resolved animation state management issues
• Improved focus and blur state handling
• Enhanced error state visual feedback
• Fixed placeholder and selection color application

These fixes ensure the TextField component displays correctly across all states (focused, blurred, invalid) and provides consistent visual feedback to users.

Related PR: #202

API Enhancements

PortalHost Export for Advanced Use Cases

The PortalHost component is now exported from the main provider module, enabling advanced portal host mounting scenarios.

New Capability:

import { HeroUINativeProvider, PortalHost } from "@heroui/native";

export function CustomLayout() {
  return (
    <>
      <HeroUINativeProvider>
        {/* Your app content */}
      </HeroUINativeProvider>

      {/* Manually mount PortalHost in a custom location */}
      <PortalHost name="custom-host" />
    </>
  );
}

This enhancement allows developers to manually mount portal hosts in custom layouts, which is particularly useful for scenarios where you need portals to render in specific locations (e.g., within BottomSheet, Modal, or other overlay components). By default, HeroUINativeProvider includes a PortalHost for standard use cases, but now you can create additional hosts with custom names for advanced scenarios.

Use Cases:

• Mounting portals within BottomSheet components
• Creating portal hosts in Modal components
• Custom overlay rendering scenarios
• Multi-host portal architectures

Related PR: #185

Bug Fixes

This release includes fixes for the following issues:

• Issue #187: Fixed an issue where multiple presses were required to re-open a bottom sheet or dialog after it was dismissed via swipe gesture. The internal state now properly synchronizes with the close animation, allowing immediate reopening regardless of how the component was closed.

• Issue #189: Fixed app freezing when swiping to dismiss dialogs containing text inputs.

• Issue #196: Fixed TextField multiline input behavior to match React Native's TextInput multiline functionality.

• Issue #199: Fixed placeholder text positioning within TextField Input component.

Related PRs:

• #201
• #202
• #193

Links

• Component Documentation
• GitHub Repository

Contributors

Thanks to everyone who contributed to this release!