1.0.0-beta.9

The ninth beta of HeroUI Native Pro ships three new surfaces — a full mobile Agenda calendar with day, week, and month views, plus Autocomplete and ComboBox for searchable selection — and brings RTL layout support across the library. Direction-aware styles, animations, and layout logic now flip correctly for RTL locales, with example-app localization covering English, Arabic, and Hebrew.

Try It on Your Device

Installation

Follow the installation guide to authenticate the private registry with your HEROUI_PERSONAL_TOKEN, install heroui-native-pro, and wire up HeroUINativeProvider.

What's New

New Components

This release introduces 3 new components across date-and-time and forms:

• Agenda: Full mobile calendar surface with a collapsible month header, horizontally paged day/week/month body, and draggable, resizable events. (Documentation)
• Autocomplete: Searchable select with in-overlay filtering, built on heroui-native Select and SearchField. (Documentation)
• ComboBox: Inline input plus listbox popover aligned with the web ComboBox anatomy. (Documentation)

Agenda

A full calendar surface for mobile scheduling UIs. State stays external via useAgenda; the root spreads that state and ships a complete default composition when used childless — collapsible month header, horizontally paged day/week/month body, and event cards that drag and resize when the optional peer is installed.

Features:

• Compound parts — Agenda.Header, Agenda.Calendar, Agenda.Body, Agenda.TimeGrid, Agenda.Event, Agenda.MonthGrid, Agenda.ViewSelector, and related hooks
• Day, week, and month views with SplitView header collapse, pager sync, and content fade on view change
• Event drag and resize with drop time guides via optional peer react-native-reanimated-dnd — events still render without it
• Collapse chain, deferred event layers, and layout transitions on event chips
• Dates use @internationalized/date (CalendarDate / CalendarDateTime); the Agenda never mutates your events array — apply move/resize intents back into your state

Usage:

import type { CalendarDateTime } from "@internationalized/date";
import { Agenda, useAgenda, type AgendaEvent } from "heroui-native-pro";
import { useState } from "react";

export function Example() {
  const [events, setEvents] = useState<AgendaEvent[]>(initialEvents);

  const applyChange = (id: string, start: CalendarDateTime, end: CalendarDateTime) => {
    setEvents((prev) =>
      prev.map((event) => (event.id === id ? { ...event, start, end } : event)),
    );
  };

  const agenda = useAgenda({
    events,
    onEventMove: applyChange,
    onEventResize: applyChange,
  });

  return <Agenda {...agenda} />;
}

For complete documentation and examples, see the Agenda component page.

Autocomplete

A searchable select where filtering happens inside the overlay. Selection lives on the trigger while the search input renders in the portaled content — ideal when you want a familiar select field with type-ahead, not a free-text combo box.

Features:

• Built on heroui-native Select and in-content SearchField
• Single and multiple selection, controlled and uncontrolled modes
• Custom filter, clear button, empty state, and section labels
• Popover, dialog, and bottom-sheet presentations
• Case- and diacritic-insensitive "contains" match by default

Usage:

import { Autocomplete } from "heroui-native-pro";
import { Label } from "heroui-native";

export function Example() {
  return (
    <Autocomplete>
      <Label>State</Label>
      <Autocomplete.Trigger>
        <Autocomplete.Value />
        <Autocomplete.TriggerIndicator />
      </Autocomplete.Trigger>
      <Autocomplete.Portal>
        <Autocomplete.Overlay />
        <Autocomplete.Content presentation="popover" width="trigger">
          <Autocomplete.SearchField />
          <Autocomplete.List>
            <Autocomplete.Item value="ca" label="California" />
            <Autocomplete.Item value="tx" label="Texas" />
            <Autocomplete.Item value="ny" label="New York" />
          </Autocomplete.List>
          <Autocomplete.Empty />
        </Autocomplete.Content>
      </Autocomplete.Portal>
    </Autocomplete>
  );
}

For complete documentation and examples, see the Autocomplete component page.

ComboBox

An inline text input combined with a listbox popover, mirroring the HeroUI web ComboBox anatomy. Typing filters the collection; selecting an item commits its label into the input. Prefer Autocomplete when filtering should live inside the overlay instead.

Features:

• Inline InputGroup + popover listbox with filtering and clear button
• Single and multiple selection with controlled selection, open, and input APIs
• Sections via ComboBox.ListLabel, empty state, and custom filter
• Popover presentation only — place the field in the upper half of the screen (or use placement="top" on ComboBox.Content) to keep the list above the keyboard

Usage:

import { ComboBox } from "heroui-native-pro";
import { Label } from "heroui-native";

export function Example() {
  return (
    <ComboBox>
      <Label>Favorite animal</Label>
      <ComboBox.Trigger>
        <ComboBox.InputGroup>
          <ComboBox.Input placeholder="Search animals..." />
          <ComboBox.Suffix>
            <ComboBox.TriggerIndicator />
          </ComboBox.Suffix>
        </ComboBox.InputGroup>
      </ComboBox.Trigger>
      <ComboBox.Portal>
        <ComboBox.Overlay />
        <ComboBox.Content>
          <ComboBox.List>
            <ComboBox.Item value="cat" label="Cat" />
            <ComboBox.Item value="dog" label="Dog" />
          </ComboBox.List>
          <ComboBox.Empty />
        </ComboBox.Content>
      </ComboBox.Portal>
    </ComboBox>
  );
}

For complete documentation and examples, see the ComboBox component page.

RTL Support

Components and the example app now respect right-to-left locales. Direction-aware CSS, animations, and layout logic flip correctly when the app direction is RTL, including Android-specific fixes for agenda and range calendar.

Supported surfaces:

• Charts, pickers, FAB, number/progress, slider, rating, stepper, and timeline
• Wheel pickers, agenda, and range calendar
• Example app i18n with Lingui — en / ar / he catalogs and locale switching

Existing LTR usage is unchanged; RTL behavior activates with locale and layout direction. Validate key surfaces on iOS and Android in both LTR and RTL when shipping localized apps.

Dependencies

react-native-reanimated-dnd (optional)

Declared as an optional peer dependency (>=2.0.0) and loaded through an optional import helper. Required only for Agenda event drag and resize; without it, events still render but cannot be moved or resized.

npx expo install react-native-reanimated-dnd

Other Dependency Upgrades

• heroui-native: peer dependency bumped to ^1.0.8

Updated Documentation

The following documentation has been added or updated to reflect the changes in this release:

• Agenda — New component page covering useAgenda, day/week/month views, event drag/resize, and composition
• Autocomplete — New component page covering searchable select, presentations, filtering, and selection modes
• ComboBox — New component page covering inline input + listbox, filtering, and controlled APIs

Links

• Installation
• Component Documentation
• UI for Agents