Beta 12

Beta 12 introduces three essential form components—InputOTP, Label, and Description—that enhance form building capabilities in React Native applications. This release also includes critical fixes for Popover close behavior, popup controlled state management, border radius configuration, and adds variant style prop support across multiple form components. These improvements provide developers with more robust form components and better control over component styling and 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 12 improvements in action with our preview app! You can explore the new InputOTP, Label, and Description components, along with the Popover fixes, controlled state improvements, border radius fixes, and variant style prop support 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.

What's New

New Components

This release introduces 3 new essential form components:

• InputOTP: Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support.
• Label: Text component for labeling form fields and other UI elements with support for required indicators and validation states.
• Description: Text component for providing accessible descriptions and helper text for form fields and other UI elements.

InputOTP

The InputOTP component provides a complete solution for one-time password input scenarios, such as two-factor authentication, verification codes, and PIN entry. It features individual character slots with smooth animations, customizable grouping, separators, and comprehensive validation support.

Features:

• Individual character slots with smooth animations and caret indicators
• Flexible grouping with separators for visual organization
• Pattern-based input restriction (digits, characters, or custom regex)
• Controlled and uncontrolled value management
• Validation state support with visual feedback
• Customizable placeholder characters per slot position
• Paste support with transformer function
• Complete accessibility support

Usage:

import { InputOTP, Label, Description } from "heroui-native";

export function Example() {
  return (
    <>
      <Label>Verify account</Label>
      <InputOTP maxLength={6} onComplete={(code) => console.log(code)}>
        <InputOTP.Group>
          <InputOTP.Slot index={0} />
          <InputOTP.Slot index={1} />
          <InputOTP.Slot index={2} />
        </InputOTP.Group>
        <InputOTP.Separator />
        <InputOTP.Group>
          <InputOTP.Slot index={3} />
          <InputOTP.Slot index={4} />
          <InputOTP.Slot index={5} />
        </InputOTP.Group>
      </InputOTP>
      <Description>We've sent a code to your email</Description>
    </>
  );
}

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

Related PR: #214

Label

The Label component provides accessible labeling for form fields with built-in support for required indicators, validation states, and disabled states. It automatically displays an asterisk for required fields and adapts its styling based on the field's validation state.

Features:

• Automatic required field indicator (asterisk)
• Invalid state styling for validation errors
• Disabled state support
• Compound component architecture for custom layouts
• Full accessibility support with nativeID linking
• Customizable styling via className, classNames, and styles props

Usage:

import { Label, TextField } from "heroui-native";

export function Example() {
  return (
    <TextField>
      <Label isRequired>Password</Label>
      <TextField.Input placeholder="Create a password" secureTextEntry />
    </TextField>
  );
}

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

Related PR: #214

Description

The Description component provides accessible helper text and descriptions for form fields. It features muted styling by default and supports linking to form fields via nativeID for screen reader support.

Features:

• Muted text styling optimized for helper text
• Accessibility linking via nativeID and aria-describedby
• Seamless integration with form components
• Customizable styling support

Usage:

import { Description, TextField } from "heroui-native";

export function Example() {
  return (
    <TextField>
      <TextField.Label>Email address</TextField.Label>
      <TextField.Input
        placeholder="Enter your email"
        keyboardType="email-address"
        aria-describedby="email-desc"
      />
      <Description nativeID="email-desc">
        We'll never share your email with anyone else.
      </Description>
    </TextField>
  );
}

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

Related PR: #214

Component Improvements

Popover Close via Ref Fix

The Popover component has been fixed to properly handle programmatic close operations via ref.

Improvements:

• Fixed ref-based close method to properly trigger close animations
• Improved state synchronization between ref calls and component state
• Enhanced reliability of programmatic close operations

This fix ensures that when developers call popoverRef.current?.close(), the popover closes reliably with proper animation and state management.

Related PR: #207

Popup Controlled State Fix

Popup components (including Dialog, Bottom Sheet, and Popover) have been fixed to properly handle controlled state via the isOpen prop.

Improvements:

• Fixed controlled state synchronization for popup components
• Improved handling of external state changes
• Enhanced reliability when using controlled mode

This fix ensures that popup components correctly respond to external state changes when using controlled mode, providing developers with more predictable behavior when managing popup state externally.

Related PR: #215

Button, Chip, and Tabs Border Radius Fix

The Button, Chip, and Tabs components have been fixed to properly respect global border radius configuration.

Improvements:

• Fixed border radius configuration application for Button component
• Fixed border radius configuration application for Chip component
• Fixed border radius configuration application for Tabs component
• Improved consistency across components using global theme configuration

These fixes ensure that global border radius settings defined in the theme configuration are properly applied to Button, Chip, and Tabs components, providing consistent styling across the application.

Related PR: #218

TextField.Input Props Cleanup

The TextField component's Input subcomponent has been cleaned up by removing the animation and isAnimatedStyleActive props.

Changes:

• Removed animation prop from TextField.Input
• Removed isAnimatedStyleActive prop from TextField.Input
• Simplified component API for better maintainability

These props were removed to streamline the TextField.Input API and reduce complexity. Animation behavior is now handled internally by the component, providing a more consistent and predictable experience without requiring manual animation configuration.

Related PR: #220

API Enhancements

HeroUINativeProvider devInfo Configuration

The HeroUINativeProvider component now supports devInfo configuration options for enhanced development experience.

New Capability:

import { HeroUINativeProvider } from "heroui-native";

export function App() {
  return (
    <HeroUINativeProvider
      devInfo={{
        // Configuration options for development
      }}
    >
      {/* Your app content */}
    </HeroUINativeProvider>
  );
}

This enhancement provides developers with additional configuration options for development and debugging scenarios, making it easier to troubleshoot and optimize applications during development.

Related PR: #217

Variant Style Prop Support

The Checkbox, Radio, TextField, and InputOTP components now support the variant style prop for easier variant customization.

New Capability:

import { Checkbox, Radio, TextField, InputOTP } from "heroui-native";

// Apply variant styles directly via style prop
<Checkbox variant="bordered" style={{ variant: "flat" }}>
  Option 1
</Checkbox>

<Radio variant="solid" style={{ variant: "bordered" }}>
  Option 2
</Radio>

<TextField variant="underlined" style={{ variant: "bordered" }}>
  <TextField.Input />
</TextField>

This enhancement provides developers with more flexibility when customizing component variants, allowing variant changes to be applied via the style prop in addition to the component's variant prop.

Related PR: #220

Style Fixes

Border Radius Configuration

Fixed global border radius configuration not applying correctly to certain components.

Fixes:

• Fixed Button component not respecting global border radius configuration
• Fixed Chip component border radius application
• Fixed Tabs component border radius application

Style Optimizations

• Border Radius Consistency: Improved consistency of border radius application across Button, Chip, and Tabs components
• Theme Configuration: Enhanced theme configuration propagation to ensure all components respect global settings

Bug Fixes

This release includes fixes for the following issues:

• Issue #93: Fixed global border radius configuration not applying to Button component in hero-ui-native using Unwind. The Button component now properly respects border radius settings defined in the global theme configuration, ensuring consistent styling across the application.

• Issue #213: Fixed Select controlled mode (isOpen) not working. The Select component now properly handles controlled state when the isOpen prop is provided, allowing developers to manage Select open/close state externally with predictable behavior.

Related PRs:

• #218
• #215

Links

• Component Documentation
• GitHub Repository

Contributors

Thanks to everyone who contributed to this release!