ContextQMD
Back to Heroui

Beta 11

apps/docs/content/docs/native/releases/beta-11.mdx

3.0.47.0 KB
Original Source
<div className="flex items-center gap-3 mb-6"> <span className="text-sm text-muted">January 6, 2026</span> </div>

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:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}> <Tab value="npm">

bash
npm i heroui-native@beta
</Tab> <Tab value="pnpm"> ``` bash pnpm add heroui-native@beta ``` </Tab> <Tab value="yarn"> ```bash yarn add heroui-native@beta ``` </Tab> <Tab value="bun"> ```bash bun add heroui-native@beta ``` </Tab> </Tabs> <Callout type="info"> **Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI Native to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI Native MCP Server](/docs/native/getting-started/mcp-server). </Callout>

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:

<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

📱 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:

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

export function CustomLayout() {
  return (
    <>
      <HeroUINativeProvider>
      </HeroUINativeProvider>
      <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:

Contributors

Thanks to everyone who contributed to this release!