HeroUI Native

The Radio component is composed of several parts that allow for deep customization of its visual structure:

• Radio: The main container handling selection state and interaction. It can operate in standalone mode (using isSelected and onSelectedChange) or derive state automatically when placed inside a RadioGroup.Item.
• Radio.Indicator: An optional container for the radio circle. It manages visual selection and invalid states.
• Radio.IndicatorBackground: A theme-aware background container (e.g., glass) rendered behind the indicator. It is automatically mounted for the secondary variant when unselected and not invalid. You can control it via the background prop on Radio.Indicator.
• Radio.IndicatorThumb: The inner circle that appears when the radio is selected. It features built-in scale animations.

<Radio>
  <Radio.Indicator>
    <Radio.IndicatorThumb />
  </Radio.Indicator>
</Radio>

The Select component is a compound component consisting of several parts that manage state, presentation, and item selection:

• Select: Main container managing open/close state and value selection.
• Select.Trigger: Clickable element to toggle visibility. Supports variant prop ('default' or 'unstyled').
• Select.Value: Displays the selected value or placeholder text.
• Select.TriggerIndicator: Optional animated chevron icon showing open/close state.
• Select.Portal: Renders content in a portal layer for proper stacking.
• Select.Overlay: Optional background overlay to capture outside clicks.
• Select.Content: Container for items. Supports presentation modes: popover, bottom-sheet, or dialog.
• Select.Close: Close button for the select.
• Select.ListLabel: Styled typography for grouping items.
• Select.Item: Selectable option. Contains Select.ItemLabel, Select.ItemDescription, and Select.ItemIndicator (default check icon).

The TagGroup is a compound component consisting of the following parts:

• TagGroup: The main container managing selection state, disabledKeys, and removal functionality. It provides size and variant context to children.
• TagGroup.List: A container for rendering the list of tags. Supports renderEmptyState for custom empty state rendering.
• TagGroup.Item: An individual tag. It can accept string children (auto-wrapped in TagGroup.ItemLabel), render function children, or custom layouts. Requires an id prop.
• TagGroup.ItemBackground: An optional theme-aware background container. Can be replaced or removed via the background prop on TagGroup.Item.
• TagGroup.ItemLabel: The text label for the tag. Use this explicitly if not providing string children.
• TagGroup.ItemRemoveButton: A button to remove the tag. It only functions if onRemove is provided to the parent TagGroup.

<TagGroup>
  <TagGroup.List>
    <TagGroup.Item id="tag-1">
      <TagGroup.ItemLabel>...</TagGroup.ItemLabel>
      <TagGroup.ItemRemoveButton />
    </TagGroup.Item>
  </TagGroup.List>
</TagGroup>

The Slider is a compound component consisting of several sub-components that manage state, orientation, and visual representation:

• Slider: The main container managing value state and orientation. Supports single value and range modes.
• Slider.Output: Displays the current value(s). Supports render functions for custom formatting.
• Slider.Track: The sizing container for Fill and Thumb. Supports tap-to-position and render-function children for dynamic content like multiple thumbs.
• Slider.TrackBackground: An optional theme-aware background container rendered behind the track. Can be replaced or removed via the background prop on Slider.Track.
• Slider.Fill: A responsive bar that stretches along the track's main axis.
• Slider.Thumb: The draggable element. Uses react-native-gesture-handler for interaction and react-native-reanimated for scale animations on press.

<Slider>
  <Slider.Output />
  <Slider.Track>
    <Slider.Fill />
    <Slider.Thumb />
  </Slider.Track>
</Slider>

The Menu component is a compound component. Its structure typically includes:

• Menu: Main container managing state and positioning.
• Menu.Trigger: The element that toggles the menu.
• Menu.Portal: Renders content in a portal layer.
• Menu.Overlay: Optional background overlay to capture outside clicks.
• Menu.Content: The container for items. Supports presentation="popover" or presentation="bottom-sheet".
• Menu.Close: A button to dismiss the menu.
• Menu.Label: Non-interactive section headings.
• Menu.Group: Groups items and manages selection modes (none, single, or multiple).
• Menu.Item: Individual pressable items.
• Menu.ItemTitle: Primary text for an item.
• Menu.ItemDescription: Secondary text for an item.
• Menu.ItemIndicator: Visual selection indicator (checkmark or dot).
• SubMenu: Container for nested menus.
• SubMenu.Trigger: The row that toggles the submenu.
• SubMenu.TriggerIndicator: Animated chevron icon.
• SubMenu.Content: The container for items within a submenu.

<Menu>
  <Menu.Trigger>...</Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover">
      <Menu.Close />
      <Menu.Label>...</Menu.Label>
      <Menu.Group>
        <Menu.Item>
          <Menu.ItemIndicator />
          <Menu.ItemTitle>...</Menu.ItemTitle>
          <Menu.ItemDescription>...</Menu.ItemDescription>
        </Menu.Item>
      </Menu.Group>
      <SubMenu>
        <SubMenu.Trigger textValue="...">
          <SubMenu.TriggerIndicator />
          ...
        </SubMenu.Trigger>
        <SubMenu.Content>
          <Menu.Item>...</Menu.Item>
          <Menu.Item>...</Menu.Item>
        </SubMenu.Content>
      </SubMenu>
    </Menu.Content>
  </Menu.Portal>
</Menu>

For advanced use cases, you can manually define where content is rendered by using Portal and PortalHost.

1. Place a PortalHost with a specific name in the desired location of your component tree.
2. Use a Portal component with a hostName prop that matches the name of the PortalHost to direct its children to that location.

import { Portal, PortalHost } from "heroui-native";
import { View, Text } from "react-native";

function AppLayout() {
  return (
    <View className="flex-1">
      <View className="p-5">
        <Text>Header Content</Text>
      </View>
      
      <View className="flex-1 p-5">
        <Text>Main Content Area</Text>
        <CustomNotification />
      </View>
      
      {/* Portal host positioned at the top of the screen */}
      <PortalHost name="notification-host" />
    </View>
  );
}

function CustomNotification() {
  return (
    <Portal name="notification-portal" hostName="notification-host">
      <View className="absolute top-0 left-0 right-0 bg-blue-500 p-4">
        <Text>This notification appears at the top via Portal</Text>
      </View>
    </Portal>
  );
}