1.0.0-beta.11

The eleventh beta of HeroUI Native Pro ships four new surfaces — a compound SwipeableRow that reveals start and end action rails with the finger, MorphTabs whose header pills expand from icon to icon-and-label as you swipe, SwipeableTabs with an indicator that tracks the pager in real time, and a StackedMeter for proportional part-to-whole breakdowns. SwipeableRow action rails also fade under the glass theme so translucent cards no longer show actions through at rest, and the heroui-native peer moves to 1.0.10.

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 4 new components across data display, navigation, and charts:

• SwipeableRow: Swipe-to-reveal list row with logical start/end action rails, standalone and inline variants, controlled open state, and screen-reader actions. (Documentation)
• MorphTabs: Tabs whose header pills morph from icon-only to icon-and-label as you swipe between native pager pages. (Documentation)
• SwipeableTabs: heroui-native Tabs look and variants with a swipeable pager and an indicator that interpolates with the finger. (Documentation)
• StackedMeter: Proportional stacked track with legend, optional capacity, sizes, and locale-aware value formatting. (Documentation)

SwipeableRow

Reveal contextual actions by swiping a row toward its logical start or end edge. The whole rounded content card travels with the finger and uncovers the actions resting behind it as separate rounded buttons. Gestures and rails mirror automatically in RTL.

Features:

• Compound parts — SwipeableRow.Actions, SwipeableRow.Content, SwipeableRow.ContentBackground, SwipeableRow.Action, and SwipeableRow.ActionLabel
• Logical start / end rails with automatic width measurement, rubber-band overshoot, and per-action reveal zoom
• standalone (rounded card) and inline (square at rest, corners round while dragged) variants
• Controlled (openSide / onOpenSideChange) and uncontrolled (defaultOpenSide) open state, plus imperative open, close, and reset
• Screen-reader accessibility actions to open, navigate, and close rails with localizable labels
• Theme-aware content background; under glass, action rails mount only while uncovered and fade in/out

Usage:

import { SwipeableRow } from "heroui-native-pro";

export function Example() {
  return (
    <SwipeableRow>
      <SwipeableRow.Actions side="end">
        <SwipeableRow.Action variant="accent" onPress={archiveMessage}>
          <SwipeableRow.ActionLabel>Archive</SwipeableRow.ActionLabel>
        </SwipeableRow.Action>
        <SwipeableRow.Action variant="danger" onPress={remove}>
          Delete
        </SwipeableRow.Action>
      </SwipeableRow.Actions>
      <SwipeableRow.Content>
        <MessageRow />
      </SwipeableRow.Content>
    </SwipeableRow>
  );
}

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

MorphTabs

Tabs that expand from an icon to an icon and label as you swipe between pages. The active pill fills leftover row space; neighbouring pills split it mid-swipe. Extra list children (for example an avatar) keep their natural size while triggers share the rest.

Features:

• Compound parts — MorphTabs.List, MorphTabs.Trigger, MorphTabs.TriggerBackground, MorphTabs.Icon, MorphTabs.Label, MorphTabs.Pager, and MorphTabs.Content
• Header morph driven by continuous pager position on the UI thread
• Controlled (value / onValueChange) and uncontrolled (defaultValue) selection, plus imperative goTo(value, animated?)
• Optional lazy page mounting with renderLazyPlaceholder
• Optional peer react-native-pager-view required for MorphTabs.Pager (rebuild after install)

Usage:

import { MorphTabs } from "heroui-native-pro";

export function Example() {
  return (
    <MorphTabs defaultValue="home">
      <MorphTabs.List>
        <MorphTabs.Trigger value="home">
          <MorphTabs.Icon>
            <HomeIcon />
          </MorphTabs.Icon>
          <MorphTabs.Label>Home</MorphTabs.Label>
        </MorphTabs.Trigger>
        <MorphTabs.Trigger value="today">
          <MorphTabs.Icon>
            <CalendarIcon />
          </MorphTabs.Icon>
          <MorphTabs.Label>Today</MorphTabs.Label>
        </MorphTabs.Trigger>
      </MorphTabs.List>
      <MorphTabs.Pager>
        <MorphTabs.Content value="home">...</MorphTabs.Content>
        <MorphTabs.Content value="today">...</MorphTabs.Content>
      </MorphTabs.Pager>
    </MorphTabs>
  );
}

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

SwipeableTabs

Tabs whose pages you can swipe between, with an indicator that follows your finger. It reuses heroui-native Tabs parts and variants (primary / secondary) so the list looks, behaves, and themes exactly like Tabs, while the indicator interpolates between measured triggers during the swipe.

Features:

• Compound parts — SwipeableTabs.List, ListBackground, ScrollView, Indicator, Trigger, Label, Separator, Pager, and Content
• primary (segmented pill) and secondary (underlined) variants matching heroui-native Tabs
• Scrollable trigger lists with scrollAlign, plus separators that hide while either neighbour is selected
• Controlled / uncontrolled selection, lazy pages, and imperative goTo(value, animated?)
• Optional peer react-native-pager-view required for SwipeableTabs.Pager (rebuild after install)

Usage:

import { SwipeableTabs } from "heroui-native-pro";

export function Example() {
  return (
    <SwipeableTabs defaultValue="overview">
      <SwipeableTabs.List>
        <SwipeableTabs.Indicator />
        <SwipeableTabs.Trigger value="overview">
          <SwipeableTabs.Label>Overview</SwipeableTabs.Label>
        </SwipeableTabs.Trigger>
        <SwipeableTabs.Trigger value="activity">
          <SwipeableTabs.Label>Activity</SwipeableTabs.Label>
        </SwipeableTabs.Trigger>
      </SwipeableTabs.List>
      <SwipeableTabs.Pager>
        <SwipeableTabs.Content value="overview">...</SwipeableTabs.Content>
        <SwipeableTabs.Content value="activity">...</SwipeableTabs.Content>
      </SwipeableTabs.Pager>
    </SwipeableTabs>
  );
}

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

StackedMeter

A stacked meter that splits a single track into proportional colored segments to show how a whole breaks down into parts — repository languages, storage quotas, status mix, and similar part-to-whole views. Pass segments and compose label, track, and legend, or use the string-children shortcut.

Features:

• Compound parts — StackedMeter.Label, StackedMeter.Track, StackedMeter.TrackBackground, StackedMeter.Segment, StackedMeter.Legend, LegendItem, LegendIndicator, LegendLabel, and LegendValue
• Share-based layout from segment values, optional maxValue capacity with empty remainder, and sm / md / lg sizes
• Color variants, colorClassName, chart-token defaults (chart-1…chart-5), and formatOptions for locale-aware values
• Default composition when children are omitted; string children render label, track, and legend
• Grow-in segment animations and theme-aware track background under glass

Usage:

import { StackedMeter } from "heroui-native-pro";

const LANGUAGES = [
  { id: "ts", label: "TypeScript", value: 96.3 },
  { id: "css", label: "CSS", value: 2.6 },
  { id: "js", label: "JavaScript", value: 1.1 },
];

export function Example() {
  return (
    <StackedMeter segments={LANGUAGES}>
      <StackedMeter.Label>Languages</StackedMeter.Label>
      <StackedMeter.Track />
      <StackedMeter.Legend />
    </StackedMeter>
  );
}

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

Component Improvements

SwipeableRow glass action-rail fade

Under translucent themes such as glass, SwipeableRow action rails no longer show through the frosted card at rest. Rails mount only while the card uncovers them and fade in and out with Reanimated FadeIn / FadeOut (~200ms); the actions ref is null while hidden. The public API is unchanged.

Improvements:

• Measuring mount stays opacity-hidden until the rail is uncovered
• Entering / exiting fade keeps the reveal smooth without a layout pop
• Opaque themes keep rails mounted as before

Dependencies

heroui-native

Peer dependency bumped to ^1.0.10.

react-native-pager-view (optional)

Declared as an optional peer dependency (>=6.0.0) and required only when using MorphTabs.Pager or SwipeableTabs.Pager. Install and rebuild so the native module is linked:

npx expo install react-native-pager-view

Updated Documentation

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

• SwipeableRow — New component page covering rails, variants, controlled open state, action zoom, accessibility, and the glass fade
• MorphTabs — New component page covering morphing pills, pager, lazy pages, and the optional react-native-pager-view peer
• SwipeableTabs — New component page covering variants, scrolling lists, indicator interpolation, and the optional pager peer
• StackedMeter — New component page covering segments, capacity, sizes, colors, formatting, and legend composition

Links

• Installation
• Component Documentation
• UI for Agents

Contributors

Thanks to @vvv-sss for SwipeableRow (#84), MorphTabs / SwipeableTabs (#86), and StackedMeter plus the SwipeableRow glass fade (#87).