1.0.0-beta.5

The fifth beta of HeroUI Native Pro extends the charting stack with multi-series cartesian dashboards, press-driven floating tooltips, and gauge-style radial visualizations — plus a numeric keypad for PIN and code entry flows. ComposedChart and ChartTooltip bring bar, line, and area series together under one themed root with clamped tooltip positioning, while RadialChart adds Skia-rendered arc rings for progress and gauge UIs. This release also ships NumberPad, improves SplitView mount behavior, and fixes runaway onChange events when tapping NumberField increment/decrement buttons rapidly.

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 charts and forms:

• ComposedChart: Multi-series cartesian root combining bar, line, and area series with dual Y-axis support. (Documentation)
• ChartTooltip: Press-driven floating tooltip card with anchor positioning and multi-series rows. (Documentation)
• NumberPad: Numeric keypad for PINs, codes, and amounts with a default 3×4 layout. (Documentation)
• RadialChart: Gauge and progress-ring visualizations with Skia-rendered arc rings. (Documentation)

ComposedChart

A composed cartesian chart for multi-metric dashboards. ComposedChart wraps victory-native's CartesianChart and reuses the themed Skia implementations from BarChart, LineChart, and AreaChart under one root — so you can mix bars, lines, and areas in a single chart with shared theming and animation cascading.

Features:

• Compound series parts — Bar, BarGroup, StackedBar, Line, AnimatedLine, Area, StackedArea, and AreaRange
• Dual Y-axis support via per-axis yKeys, axisSide, and domain configuration
• Bar-friendly default domainPadding and animation="disable-all" cascading to animated series parts
• Reuses existing BarChart, LineChart, and AreaChart Skia renderers — no new runtime dependencies

Usage:

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

const DATA = [
  { month: "Jan", revenue: 42000, orders: 180 },
  { month: "Feb", revenue: 51000, orders: 210 },
];

export function Example() {
  return (
    <ComposedChart
      data={DATA}
      xKey="month"
      yKeys={["revenue", "orders"]}
      yAxis={[
        { yKeys: ["revenue"], formatYLabel: (v) => `$${(v / 1000).toFixed(0)}k` },
        { yKeys: ["orders"], axisSide: "right" },
      ]}
      wrapperClassName="h-52"
    >
      {({ points, chartBounds }) => (
        <>
          <ComposedChart.Bar
            points={points.revenue}
            chartBounds={chartBounds}
            colorClassName="accent-chart-3"
          />
          <ComposedChart.Line
            points={points.orders}
            colorClassName="accent-chart-1"
          />
        </>
      )}
    </ComposedChart>
  );
}

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

ChartTooltip

A composable floating tooltip for cartesian chart press interactions. ChartTooltip follows press coordinates, clamps inside chartBounds, and renders a structured multi-series label card — replacing ad-hoc overlays built from ChartCrosshair and ChartIndicator alone.

Features:

• Compound parts — Anchor, Header, Item, Indicator, Label, and Value
• useChartTooltipAnchor hook for custom anchor wiring
• Follows press coordinates with placement, offset, visibility, and spring/timing animations
• Clamps tooltip position inside chartBounds on both axes
• Works with LineChart, BarChart, AreaChart, and ComposedChart

Usage:

import { ChartTooltip, ComposedChart } from "heroui-native-pro";
import { useChartPressState } from "victory-native";
import { useState } from "react";

const { state, isActive } = useChartPressState({
  x: "month",
  y: { revenue: 0 },
});
const [chartBounds, setChartBounds] = useState(null);

<ChartTooltip.Anchor
  chartBounds={chartBounds}
  isActive={isActive}
  matchedIndex={state.matchedIndex}
  x={state.x.position}
  y={state.y.revenue.position}
>
  <ComposedChart
    data={DATA}
    xKey="month"
    yKeys={["revenue"]}
    chartPressState={state}
    onChartBoundsChange={setChartBounds}
    wrapperClassName="h-52"
  >
    {({ points, chartBounds: bounds }) => (
      <ComposedChart.Bar points={points.revenue} chartBounds={bounds} />
    )}
  </ComposedChart>
  <ChartTooltip>
    <ChartTooltip.Header />
    <ChartTooltip.Item>
      <ChartTooltip.Indicator colorClassName="accent-chart-3" />
      <ChartTooltip.Label>Revenue</ChartTooltip.Label>
      <ChartTooltip.Value />
    </ChartTooltip.Item>
  </ChartTooltip>
</ChartTooltip.Anchor>

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

NumberPad

A numeric keypad for entering PINs, verification codes, and amounts. Built with HeroUI Native compound-component patterns, it ships a default 3×4 digit grid out of the box and supports full custom key composition when you need a different layout.

Features:

• Compound parts — Row, Key, KeyLabel, Backspace, and Spacer
• Auto-renders a default 3×4 digit grid when no children are provided
• Controlled and uncontrolled modes with maxLength, onComplete, and disabled state
• Press animations on keys; backspace deletes one character on press and clears on long-press
• Custom key content via render props; Spacer becomes an action key when given children
• Exported useNumberPad hook and full TypeScript types

Usage:

import { NumberPad } from "heroui-native-pro";
import { useState } from "react";

export function Example() {
  const [value, setValue] = useState("");

  return (
    <NumberPad
      value={value}
      onValueChange={setValue}
      maxLength={6}
      onComplete={(code) => console.log("PIN entered:", code)}
    />
  );
}

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

RadialChart

A radial chart for gauge, progress ring, and circular data visualizations. Built on victory-native's PolarChart with custom @shopify/react-native-skia stroked arc rings, it supports configurable radii, angles, and per-datum colors with optional background tracks.

Features:

• Compound RadialChart.Bar API with rounded arc rings and optional full-domain background tracks
• Fixed gauge scales via domain (e.g. [0, 100])
• Configurable innerRadius, cornerRadius, and per-datum colors through colorKey
• Exported types, styles, animation config, and constants
• Center labels and side legends composed by consumers via absolute overlays

Usage:

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

const DATA = [{ name: "Score", value: 78, color: "#8b5cf6" }];

export function Example() {
  return (
    <RadialChart
      data={DATA}
      labelKey="name"
      valueKey="value"
      colorKey="color"
      domain={[0, 100]}
      innerRadius="72%"
      wrapperClassName="w-[220px]"
    >
      <RadialChart.Bar background cornerRadius={14} />
    </RadialChart>
  );
}

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

Component Improvements

NumberField Rapid-Tap Fix

Fixed a bug in the internal useLongPressRepeat hook where rapid successive taps on NumberField increment/decrement buttons could leave orphaned timers running, causing runaway onChange calls.

Improvements:

• onPressIn now calls clear() before scheduling a new timer, guaranteeing only one active repeat cycle
• Added clear to the onPressIn useCallback dependency array to keep the closure correct

API Enhancements

SplitView skipInitialAnimation

The SplitView component gains a skipInitialAnimation prop (default true) so the divider starts at its snap position without a spring on first render. Subsequent snaps and drags still use the spring animation as before.

New Capability:

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

// Animate the divider into place on first render
<SplitView skipInitialAnimation={false}>
  <SplitView.TopSection>...</SplitView.TopSection>
  <SplitView.DragArea>
    <SplitView.DragHandle />
  </SplitView.DragArea>
  <SplitView.BottomSection>...</SplitView.BottomSection>
</SplitView>

This is especially useful when you want the divider to visibly settle into place on first mount. The default (true) avoids the spring on mount and screen focus — the common case for split layouts that should appear already positioned.

SplitView Constraint Reactivity

SplitView now recomputes constraints when minHeight, maxHeight, or snapPoints change, without requiring a container relayout. A stable snapPointsKey avoids unnecessary effect retriggers from inline array literals.

Updated Documentation

The following documentation pages have been updated to reflect the changes in this release:

• ComposedChart — New component page with bar+line, stacked bar, and area+dashed-line examples
• ChartTooltip — New component page covering anchor positioning, multi-series rows, placement, and animations
• NumberPad — New component page with basic, max length, custom styling, disabled, and custom composition variants
• RadialChart — New component page covering gauge, progress ring, and multi-ring layouts
• SplitView — Documents the new skipInitialAnimation prop and constraint reactivity behavior

Links

• Installation
• Component Documentation
• UI for Agents