### Get a fresh project setup

Source: https://github.com/heroui-inc/heroui-native-example/blob/main/README.md

Run this command to reset the project to a basic HeroUI Native setup, moving the current src directory to app-example-src.

```bash
npm run reset-project
```

--------------------------------

### Install dependencies

Source: https://github.com/heroui-inc/heroui-native-example/blob/main/README.md

Run this command to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Clone the repository

Source: https://github.com/heroui-inc/heroui-native-example/blob/main/README.md

Use these commands to clone the example project repository and navigate into the project directory.

```bash
git clone https://github.com/heroui-inc/heroui-native-example.git
cd heroui-native-example
```

--------------------------------

### Start the app

Source: https://github.com/heroui-inc/heroui-native-example/blob/main/README.md

Execute this command to start the React Native development server and run the application.

```bash
npx expo start
```

--------------------------------

### Basic Dialog Example

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

A simple dialog with a title, description, and a confirmation button. Requires `Dialog`, `Button`, `View` components.

```tsx
import { Dialog, Button, Input, Label, TextField, FieldError, ScrollShadow } from 'heroui-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, { FadeInDown, FadeOutDown, Easing } from 'react-native-reanimated';

// Basic dialog
const [open, setOpen] = useState(false);
<Dialog isOpen={open} onOpenChange={setOpen}>
  <Dialog.Trigger asChild>
    <Button variant="secondary">Open dialog</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close variant="ghost" className="absolute top-3 right-2.5 z-50" />
      <View className="mb-8 gap-1.5">
        <Dialog.Title>Low Disk Space</Dialog.Title>
        <Dialog.Description>
          You are running low on disk space. Delete unnecessary files to free up space.
        </Dialog.Description>
      </View>
      <View className="flex-row justify-end">
        <Button variant="tertiary" onPress={() => setOpen(false)}>Confirm</Button>
      </View>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>
```

--------------------------------

### App Entry and Provider Setup

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Initializes the application with necessary providers like GestureHandlerRootView, KeyboardProvider, AppThemeProvider, and HeroUINativeProvider. Configures global settings for text scaling, toast behavior, and developer tools.

```tsx
// src/app/_layout.tsx
import { HeroUINativeProvider } from 'heroui-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { KeyboardProvider, KeyboardAvoidingView } from 'react-native-keyboard-controller';
import { AppThemeProvider } from '../contexts/app-theme-context';
import { useFonts, Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';
import '../../global.css';

function AppContent() {
  const contentWrapper = useCallback(
    (children: React.ReactNode) => (
      <KeyboardAvoidingView
        pointerEvents="box-none"
        behavior="padding"
        keyboardVerticalOffset={12}
        className="flex-1"
      >
        {children}
      </KeyboardAvoidingView>
    ),
    []
  );

  return (
    <AppThemeProvider>
      <HeroUINativeProvider
        config={{
          textProps: { maxFontSizeMultiplier: 2 },
          toast: { contentWrapper },
          devInfo: { stylingPrinciples: false },
        }}
      >
        <Slot />
      </HeroUINativeProvider>
    </AppThemeProvider>
  );
}

export default function Layout() {
  const fonts = useFonts({ Inter_400Regular, Inter_600SemiBold /* ... */ });
  if (!fonts) return null;
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <KeyboardProvider>
        <AppContent />
      </KeyboardProvider>
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Nested SubMenu Example

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Shows how to implement a nested submenu within a main menu. Requires `SubMenu` component and its associated triggers and content.

```tsx
// Nested SubMenu
<Menu>
  <Menu.Trigger asChild><Button>Editor Menu</Button></Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={240}>
      <Menu.Item><Menu.ItemTitle>New Space</Menu.ItemTitle></Menu.Item>
      <SubMenu>
        <SubMenu.Trigger textValue="Focus">
          <SubMenu.TriggerIndicator />
          <Text className="flex-1 text-base font-medium text-foreground">Focus</Text>
        </SubMenu.Trigger>
        <SubMenu.Content>
          <Menu.Item><Menu.ItemTitle>Zen Mode</Menu.ItemTitle></Menu.Item>
          <Menu.Item><Menu.ItemTitle>Reader Mode</Menu.ItemTitle></Menu.Item>
        </SubMenu.Content>
      </SubMenu>
    </Menu.Content>
  </Menu.Portal>
</Menu>
```

--------------------------------

### Chip Component Examples

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates various configurations of the Chip component, including different sizes, color variants, and the inclusion of start/end content like icons. Also shows how to create a gradient chip and a chip with a status dot.

```tsx
import { Chip } from 'heroui-native';
import { LinearGradient } from 'expo-linear-gradient';
import { StyleSheet } from 'react-native';

// Sizes
<Chip size="sm">Small</Chip>
<Chip size="md">Medium</Chip>
<Chip size="lg">Large</Chip>
```

```tsx
// Variants + colors
<Chip variant="primary" color="accent">Accent</Chip>
<Chip variant="soft" color="success">Success</Chip>
<Chip variant="tertiary" color="danger">Danger</Chip>
```

```tsx
// With start/end content
<Chip size="md" variant="secondary" color="success">
  <PlusIcon size={12} colorClassName="accent-success" />
  <Chip.Label>New</Chip.Label>
</Chip>
<Chip size="md" variant="secondary">
  <Chip.Label className="text-muted">Close</Chip.Label>
  <XMarkIcon size={12} colorClassName="accent-muted" />
</Chip>
```

```tsx
// Gradient chip
<Chip>
  <LinearGradient
    colors={['#ec4899', '#8b5cf6']}
    start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
    style={StyleSheet.absoluteFill}
  />
  <Chip.Label className="text-white font-semibold">Gradient</Chip.Label>
</Chip>
```

```tsx
// Status dot pattern
<Chip size="md" variant="secondary" color="warning">
  <View className="size-1.5 mr-1.5 rounded-full bg-warning" />
  <Chip.Label>Pending</Chip.Label>
</Chip>
```

--------------------------------

### Avatar Component Examples

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates various Avatar component usages including sizes, image/fallback combinations, color variants, custom fallbacks with gradients, and avatar group configurations. Ensure necessary imports like Avatar, cn, and LinearGradient are present.

```tsx
import { Avatar, cn } from 'heroui-native';
import { LinearGradient } from 'expo-linear-gradient';

// Sizes with image + fallback
<Avatar size="sm" alt="John"><Avatar.Image source={{ uri: '...' }} /><Avatar.Fallback /></Avatar>
<Avatar size="md" alt="Kate"><Avatar.Image source={{ uri: '...' }} /><Avatar.Fallback>KW</Avatar.Fallback></Avatar>
<Avatar size="lg" alt="Emily"><Avatar.Image source={{ uri: '...' }} /><Avatar.Fallback>EC</Avatar.Fallback></Avatar>

// Color variants for fallback
<Avatar color="success" alt="Success"><Avatar.Image source={undefined} /><Avatar.Fallback>SC</Avatar.Fallback></Avatar>
<Avatar variant="soft" color="warning" alt="Warning"><Avatar.Image source={undefined} /><Avatar.Fallback>WR</Avatar.Fallback></Avatar>

// Custom fallback (gradient, emoji, icon)
<Avatar alt="Custom">
  <Avatar.Fallback>
    <LinearGradient
      colors={['#ec4899', '#a855f7']}
      start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
      style={{ flex: 1, width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
    >
      <Text className="text-white font-medium">GB</Text>
    </LinearGradient>
  </Avatar.Fallback>
</Avatar>

// Avatar group with overlap and "+N" overflow
<View className="flex-row">
  {users.slice(0, 3).map((user, index) => (
    <Avatar key={user.id} className={cn('border-background border-2', index !== 0 && '-ml-4')} alt={user.name}>
      <Avatar.Image source={{ uri: user.image }} />
      <Avatar.Fallback>{user.initials}</Avatar.Fallback>
    </Avatar>
  ))}
  <Avatar className="border-background border-2 -ml-4" alt="More">
    <Avatar.Fallback>+2</Avatar.Fallback>
  </Avatar>
</View>
```

--------------------------------

### Card Component Examples

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Illustrates different Card component layouts and styles, including basic cards with titles and descriptions, cards with background images and gradient overlays, and horizontal cards. Requires imports for Card, LinearGradient, Image, and Button.

```tsx
import { Card } from 'heroui-native';
import { LinearGradient } from 'expo-linear-gradient';
import { StyleSheet, Image } from 'react-native';

// Basic card
<Card>
  <Card.Body className="mb-4">
    <Card.Title className="text-pink-400">$450</Card.Title>
    <Card.Title>Living room Sofa</Card.Title>
    <Card.Description>This sofa is perfect for modern tropical spaces.</Card.Description>
  </Card.Body>
  <Card.Footer className="gap-3">
    <Button variant="primary">Buy now</Button>
    <Button variant="ghost"><Button.Label>Add to cart</Button.Label></Button>
  </Card.Footer>
</Card>

// Card with background image + gradient overlay
<Card className="w-full aspect-square">
  <Image source={{ uri: '...' }} className="absolute inset-0" resizeMode="cover" />
  <LinearGradient
    colors={['rgba(0,0,0,0.1)', 'rgba(0,0,0,0.5)']}
    style={StyleSheet.absoluteFill}
  />
  <Card.Body className="flex-1">
    <Card.Title className="text-zinc-50 uppercase">Neo</Card.Title>
    <Card.Description className="text-zinc-50 font-medium">Home robot</Card.Description>
  </Card.Body>
  <Card.Footer>
    <Button size="sm" className="bg-white">
      <Button.Label className="text-black">Notify me</Button.Label>
    </Button>
  </Card.Footer>
</Card>

// Horizontal card (variant="tertiary")
<Card className="flex-row gap-4 p-4" variant="tertiary">
  <Image source={{ uri: '...' }} className="h-28 aspect-square rounded-2xl" resizeMode="cover" />
  <Card.Body className="flex-1">
    <Card.Title numberOfLines={1}>Avocado Hackathon</Card.Title>
    <Card.Description numberOfLines={2}>Today, 6:30 PM</Card.Description>
  </Card.Body>
</Card>
```

--------------------------------

### useVersionCheck Hook for App Store Version Comparison

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Compares the installed app version with the App Store/Play Store listing on mount. Skipped in development. Calls `onVersionChecked` with a boolean indicating if a newer native build is available.

```tsx
import { useVersionCheck } from './helpers/hooks/use-version-check';

function Layout() {
  const [isVersionChecked, setIsVersionChecked] = useState(false);
  const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);

  const handleVersionChecked = useCallback((isNew: boolean) => {
    setIsVersionChecked(true);
    setIsNewVersionAvailable(isNew);

    if (isNew) {
      // Prompt user to update their native app
      setUpdateSheetMode('new-version');
      setUpdateSheetOpen(true);
    }
  }, []);

  useVersionCheck({ onVersionChecked: handleVersionChecked });
}
```

--------------------------------

### Clean git history

Source: https://github.com/heroui-inc/heroui-native-example/blob/main/README.md

Optional commands to remove the existing git history and initialize a new one for a fresh start.

```bash
rm -rf .git
git init
git add .
git commit -m "Initial commit"
```

--------------------------------

### Custom Checkbox Indicator with Animation

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Illustrates how to customize the Checkbox indicator using a render prop, allowing for custom icons and animations like ZoomIn. The animation is disabled for this specific example.

```tsx
// Custom indicator with render prop
<Checkbox
  isSelected={value}
  onSelectedChange={setValue}
  className="size-8 rounded-sm bg-indigo-800"
  animation="disabled"
>
  {( { isSelected }) => (
    <Animated.View entering={ZoomIn}>
      {isSelected
        ? <CheckIcon size={16} className="text-white" />
        : <XIcon size={16} className="text-white" />}
    </Animated.View>
  )}
</Checkbox>
```

--------------------------------

### Accordion Default Variant with Custom Trigger

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Example of the default Accordion variant with single selection. It uses a custom PressableFeedback for the trigger and includes a basic item. Ensure Accordion, PressableFeedback, and relevant icons are imported.

```tsx
import { Accordion, PressableFeedback, useAccordionItem } from 'heroui-native';
import Animated, { ZoomIn, ZoomOut, FadeInRight, Easing } from 'react-native-reanimated';

const CustomIndicator = () => {
  const { isExpanded } = useAccordionItem();
  return (
    <View className="size-5 items-center justify-center">
      {isExpanded
        ? <Animated.View key="minus" entering={ZoomIn.duration(200)}><MinusIcon size={14} /></Animated.View>
        : <Animated.View key="plus" entering={ZoomIn.duration(200)}><PlusIcon size={14} /></Animated.View>}
    </View>
  );
};

// Default variant, single selection, defaultValue opens item '2'
<Accordion defaultValue="2" className="w-full">
  <Accordion.Item value="1">
    <Accordion.Trigger asChild>
      <PressableFeedback animation={{ scale: false }}>
        <PressableFeedback.Scale className="flex-row items-center flex-1 gap-3">
          <ShoppingBagIcon size={16} colorClassName="accent-muted" />
          <Text className="text-foreground flex-1">How do I place an order?</Text>
        </PressableFeedback.Scale>
        <Accordion.Indicator />
      </PressableFeedback>
    </Accordion.Trigger>
    <Accordion.Content>
      <Text className="text-muted px-7">Lorem ipsum dolor sit amet...</Text>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>
```

--------------------------------

### Invalid Input Field with Error Message

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

An example of an invalid TextField with a Label, Input, and FieldError. The `isInvalid` prop on TextField and Input controls the visual state, and FieldError displays the error message.

```tsx
import { TextField, Input, Label, Description, FieldError } from 'heroui-native';

// States: disabled + invalid with error message
<TextField isRequired isInvalid={!!emailError}>
  <Label isInvalid={false}>Email Address</Label>
  <Input
    variant="secondary"
    placeholder="email@example.com"
    value={email}
    onChangeText={text => { setEmail(text); if (emailError) setEmailError(''); }}
    autoCapitalize="none"
    isInvalid={false}
    selectionColor={themeColorMuted}
  />
  <FieldError>{emailError}</FieldError>
</TextField>
```

--------------------------------

### Basic BottomSheet Implementation

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

A standard BottomSheet implementation. Ensure `isOpen` state and `setIsOpen` handler are managed correctly. Imports for `BottomSheet`, `Button`, and `useSafeAreaInsets` are required.

```tsx
import { BottomSheet, Button } from 'heroui-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const [isOpen, setIsOpen] = useState(false);
const insets = useSafeAreaInsets();

// Basic bottom sheet
<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
  <BottomSheet.Trigger asChild>
    <Button variant="secondary" isDisabled={isOpen}>Open sheet</Button>
  </BottomSheet.Trigger>
  <BottomSheet.Portal>
    <BottomSheet.Overlay />
    <BottomSheet.Content>
      <BottomSheet.Title>Delete account?</BottomSheet.Title>
      <BottomSheet.Description>If you delete your account, you won't be able to restore it.</BottomSheet.Description>
      <View className="gap-3 mt-6">
        <Button variant="danger" onPress={() => setIsOpen(false)}>Delete forever</Button>
        <Button variant="tertiary" onPress={() => setIsOpen(false)}>Cancel</Button>
      </View>
    </BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet>
```

--------------------------------

### Popover with Arrow and Placement Configuration

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Use this snippet for standard popovers with arrow indicators. Configure placement, alignment, and offsets for precise positioning. Ensure `colorKit` and `useThemeColor` are imported for dynamic styling.

```tsx
import { Popover, Button, colorKit, useThemeColor } from 'heroui-native';

// Popover with arrow + placement
const themeColorAccent = useThemeColor('accent');
const arrowStroke = colorKit.setAlpha(themeColorAccent, 0.35).hex();

<Popover>
  <Popover.Trigger asChild>
    <Button variant="secondary">Did you know?</Button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Overlay />
    <Popover.Content
      presentation="popover"
      width={320}
      placement="top"
      align="start"
      alignOffset={-20}
      className="gap-3 border border-accent/35"
    >
      <Popover.Arrow stroke={arrowStroke} />
      <Popover.Close variant="ghost" className="absolute top-3 right-2 z-50" />
      <Popover.Title>Fun Fact!</Popover.Title>
      <Popover.Description className="text-sm">
        The first computer bug was an actual moth found in 1947.
      </Popover.Description>
    </Popover.Content>
  </Popover.Portal>
</Popover>
```

--------------------------------

### Selection Groups (Multiple + Single) with Indicators

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Illustrates multiple and single selection groups within a menu, using `MenuKey` for state management. `shouldCloseOnSelect` and `disallowEmptySelection` props are demonstrated.

```tsx
// Selection groups (multiple + single) with indicators
const [textStyles, setTextStyles] = useState<Set<MenuKey>>(() => new Set(['bold']));
const [alignment, setAlignment] = useState<Set<MenuKey>>(() => new Set(['left']));
<Menu>
  <Menu.Trigger asChild><Button>Styles</Button></Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={250}>
      <Menu.Group
        selectionMode="multiple"
        selectedKeys={textStyles}
        onSelectionChange={setTextStyles}
        shouldCloseOnSelect={false}
      >
        <Menu.Item id="bold"><Menu.ItemIndicator /><Menu.ItemTitle>Bold</Menu.ItemTitle></Menu.Item>
        <Menu.Item id="italic"><Menu.ItemIndicator /><Menu.ItemTitle>Italic</Menu.ItemTitle></Menu.Item>
      </Menu.Group>
      <Separator className="mx-2 my-2 opacity-75" />
      <Menu.Group
        selectionMode="single"
        selectedKeys={alignment}
        onSelectionChange={setAlignment}
        disallowEmptySelection
      >
        <Menu.Item id="left"><Menu.ItemIndicator variant="dot" /><Menu.ItemTitle>Left</Menu.ItemTitle></Menu.Item>
        <Menu.Item id="center"><Menu.ItemIndicator variant="dot" /><Menu.ItemTitle>Center</Menu.ItemTitle></Menu.Item>
      </Menu.Group>
    </Menu.Content>
  </Menu.Portal>
</Menu>
```

--------------------------------

### Basic Popover Menu with Danger Item

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates a basic popover menu with a 'danger' variant item. Ensure 'heroui-native' is imported.

```tsx
import { Menu, SubMenu, Button, Separator, type MenuKey } from 'heroui-native';

// Basic popover menu with danger item
<Menu presentation="popover">
  <Menu.Trigger asChild>
    <Button variant="secondary">Actions</Button>
  </Menu.Trigger>
  <Menu.Portal>
    <Menu.Overlay />
    <Menu.Content presentation="popover" width={260}>
      <Menu.Label className="mb-1">Actions</Menu.Label>
      <Menu.Item className="items-start">
        <SquarePlusIcon size={16} colorClassName="accent-muted" />
        <View className="flex-1">
          <Menu.ItemTitle>New file</Menu.ItemTitle>
          <Menu.ItemDescription>Create a new file</Menu.ItemDescription>
        </View>
      </Menu.Item>
      <Menu.Item>
        <CopyIcon size={16} colorClassName="accent-muted" />
        <Menu.ItemTitle>Copy link</Menu.ItemTitle>
      </Menu.Item>
      <Separator className="mx-2 my-2 opacity-75" />
      <Menu.Item variant="danger">
        <TrashIcon size={16} colorClassName="accent-danger" />
        <Menu.ItemTitle>Delete file</Menu.ItemTitle>
      </Menu.Item>
    </Menu.Content>
  </Menu.Portal>
</Menu>
```

--------------------------------

### Button Layout Transition Animation

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Shows how to apply layout transitions to a Button, allowing it to morph between states, such as icon-only and full-width, with animations. Requires Reanimated and useState.

```tsx
// Layout transition (morphs between icon-only and full-width)
const [isDownloading, setIsDownloading] = useState(false);
<Button
  layout={LinearTransition.springify()}
  variant="primary"
  onPress={() => { setIsDownloading(true); setTimeout(() => setIsDownloading(false), 3000); }}
  isIconOnly={isDownloading}
>
  {isDownloading
    ? <Spinner entering={FadeIn.delay(50)} color="white" />
    : 'Download now'}
</Button>
```

--------------------------------

### Button Variants and Sizes

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates the different visual variants and sizing options available for the Button component. Ensure necessary imports are present.

```tsx
import { Button, Spinner, PressableFeedback } from 'heroui-native';
import { LinearGradient } from 'expo-linear-gradient';
import { StyleSheet } from 'react-native';
import Animated, { FadeIn, LinearTransition } from 'react-native-reanimated';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
```

--------------------------------

### Show Various Toast Notifications with useToast

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates how to trigger different types of toast notifications including default, success, danger, persistent, and custom component toasts. Access the toast system via the `useToast()` hook.

```tsx
import { useToast, Button, type ToastComponentProps } from 'heroui-native';

function MyScreen() {
  const { toast, isToastVisible } = useToast();

  // Semantic variants
  const showDefault = () => toast.show({
    variant: 'default',
    label: 'Join a team',
    description: 'Junior Garcia sent you an invitation to join HeroUI team!',
    icon: <Logo width={15} height={20.77} />,
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  const showSuccess = () => toast.show({
    variant: 'success',
    placement: 'top',        // 'top' | 'bottom'
    label: 'Plan upgraded',
    description: 'You can continue using HeroUI Chat and more',
    icon: <ShieldCheckIcon size={20} colorClassName="accent-success" />,
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  const showDanger = () => toast.show({
    variant: 'danger',
    label: 'Storage is full',
    description: 'Remove files to release space.',
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  // Persistent toast (id allows programmatic hiding)
  const showPersistent = () => toast.show({
    id: 'my-toast',
    variant: 'default',
    placement: 'bottom',
    duration: 'persistent',
    label: 'Join a team',
    description: 'Tap close to dismiss',
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
    onHide: () => inputRef.current?.blur(),
  });

  // Custom component toast (loading, progress, achievement)
  const renderLoadingToast = useCallback((props: ToastComponentProps) => (
    <LoadingToast {...props} />
  ), []);

  const showCustom = async () => {
    setIsLoading(true);
    toast.show({ id: 'loading', duration: 'persistent', component: renderLoadingToast });
    await loadData();
    setIsLoading(false);
  };

  // Hide all
  const hideAll = () => toast.hide('all');

  return (
    <View className="gap-5">
      <Button onPress={showDefault}>Default toast</Button>
      <Button onPress={showSuccess}>Success toast</Button>
      <Button onPress={showDanger}>Danger toast</Button>
      <Button onPress={showPersistent}>Persistent toast</Button>
      <Button onPress={showCustom} isDisabled={isToastVisible}>Load data</Button>
      <Button variant="danger-soft" onPress={hideAll}>Hide all</Button>
    </View>
  );
}

```

--------------------------------

### Button Custom Animation and Gradient

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates advanced customization of the Button component using a gradient background and custom press feedback animations. Ensure LinearGradient and PressableFeedback are imported.

```tsx
// Custom animation + gradient
<Button feedbackVariant="scale">
  <LinearGradient
    colors={['#0d9488', '#ec4899']}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 0 }}
    style={StyleSheet.absoluteFill}
  />
  <PressableFeedback.Ripple
    animation={{ backgroundColor: { value: 'white' }, opacity: { value: [0, 0.5, 0] } }}
  />
  <Button.Label className="text-white font-bold">Gradient</Button.Label>
</Button>
```

--------------------------------

### Button Disabled and Loading States

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Illustrates how to disable a button or show a loading state with a spinner and text. The spinner color and size can be customized.

```tsx
// Disabled / loading
<Button isDisabled>
  <Spinner color="white" size="sm" />
  <Button.Label>Loading...</Button.Label>
</Button>
```

--------------------------------

### Configure Single Select with Default Trigger

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Sets up a single-selection dropdown using the Select component with a default trigger. The selection is managed by the `value` and `onValueChange` state variables.

```tsx
import { Select, Label, Button } from 'heroui-native';

const US_STATES = [
  { value: 'CA', label: 'California' },
  { value: 'NY', label: 'New York' },
  { value: 'TX', label: 'Texas' },
];

// Single select with default trigger
const [value, setValue] = useState(undefined);
<Select value={value} onValueChange={setValue}>
  <Select.Trigger />
  <Select.Portal>
    <Select.Overlay />
    <Select.Content presentation="popover" width={300} placement="top" align="start">
      {US_STATES.map(state => (
        <Select.Item key={state.value} value={state.value} label={state.label} />
      ))}
    </Select.Content>
  </Select.Portal>
</Select>
```

--------------------------------

### BottomSheet with Blur Overlay

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates using a custom blur backdrop component for the BottomSheet overlay. This is typically used for iOS to achieve a blur effect. Ensure `BottomSheetBlurOverlay` is correctly implemented and imported.

```tsx
// With blur overlay (iOS)
<BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
  <BottomSheet.Trigger asChild><Button variant="secondary">Blur overlay</Button></BottomSheet.Trigger>
  <BottomSheet.Portal>
    <BottomSheetBlurOverlay />  {/* custom blur backdrop component */}
    <BottomSheet.Content>{/* content */}</BottomSheet.Content>
  </BottomSheet.Portal>
</BottomSheet>
```

--------------------------------

### Basic Switch in ControlField

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates a basic Switch component integrated within a ControlField for settings lists. It includes Label and Description components for context.

```tsx
import { Switch, ControlField, Label, Description, Surface, Separator } from 'heroui-native';
import Animated, { ZoomIn, FadeInRight, FadeInLeft } from 'react-native-reanimated';

// Basic Switch in ControlField (Settings list pattern)
<Surface className="py-5 w-full">
  <ControlField isSelected={notifications} onSelectedChange={setNotifications}>
    <View className="flex-1">
      <Label><Label.Text>Enable notifications</Label.Text></Label>
      <Description>Receive push notifications</Description>
    </View>
    <ControlField.Indicator />  {/* renders Switch by default */}
  </ControlField>
  <Separator className="my-4" />
  <ControlField isSelected={autoUpdate} onSelectedChange={setAutoUpdate} isDisabled>
    <View className="flex-1">
      <Label><Label.Text>Auto-update</Label.Text></Label>
      <Description>This feature is unavailable</Description>
    </View>
    <ControlField.Indicator />
  </ControlField>
</Surface>
```

--------------------------------

### Select Component

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

A versatile select component supporting various presentation modes (popover, bottom-sheet, dialog), single/multiple selection, and custom triggers.

```APIDOC
## Select Component

Dropdown selection with `popover`, `bottom-sheet`, or `dialog` presentation modes. Supports single and multiple selection, placement/alignment control, searchable variants, and fully custom trigger buttons. Sub-components: `Select.Trigger`, `Select.Value`, `Select.Portal`, `Select.Overlay`, `Select.Content`, `Select.Item`, `Select.ItemIndicator`.

```tsx
import { Select, Label, Button } from 'heroui-native';

const US_STATES = [
  { value: 'CA', label: 'California' },
  { value: 'NY', label: 'New York' },
  { value: 'TX', label: 'Texas' },
];

// Single select with default trigger
const [value, setValue] = useState(undefined);
<Select value={value} onValueChange={setValue}>
  <Select.Trigger />
  <Select.Portal>
    <Select.Overlay />
    <Select.Content presentation="popover" width={300} placement="top" align="start">
      {US_STATES.map(state => (
        <Select.Item key={state.value} value={state.value} label={state.label} />
      ))}
    </Select.Content>
  </Select.Portal>
</Select>

// Multiple select
<Select selectionMode="multiple">
  <Select.Trigger />
  <Select.Portal>
    <Select.Overlay />
    <Select.Content presentation="popover" width={300}>
      {US_STATES.map(state => (
        <Select.Item key={state.value} value={state.value} label={state.label} />
      ))}
    </Select.Content>
  </Select.Portal>
</Select>

// Bottom-sheet presentation with custom snap points + detached
<Select
  presentation="bottom-sheet"
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  value={value}
  onValueChange={setValue}
>
  <Select.Trigger variant="unstyled" asChild>
    <Button variant="secondary">
      {value ? <Text>{value.label}</Text> : <Text>Select</Text>}
    </Button>
  </Select.Trigger>
  <Select.Portal disableFullWindowOverlay>
    <Select.Overlay className="bg-black/10" />
    <Select.Content
      presentation="bottom-sheet"
      snapPoints={['35%', '50%']}
      detached
      enableDynamicSizing={false}
      contentContainerClassName="h-full pt-1 pb-1 mx-2.5 rounded-t-4xl border border-separator/20 bg-overlay overflow-hidden"
    >
      {items.map(item => (
        <Select.Item key={item.value} value={item.value} label={item.label}>
          <Text>{item.label}</Text>
          <Select.ItemIndicator />
        </Select.Item>
      ))}
    </Select.Content>
  </Select.Portal>
</Select>
```
```

--------------------------------

### Basic Input Component

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

A simple Input component for text entry. It requires a placeholder and can be configured with keyboard types.

```tsx
import { TextField, Input, Label, Description, FieldError } from 'heroui-native';

// Basic input
<Input placeholder="Enter your email" keyboardType="email-address" />
```

--------------------------------

### Button Icon-Only and With Icons

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Shows how to use the Button component for icon-only actions or with both an icon and text. Adjust icon size and color as needed.

```tsx
// Icon only
<Button size="md" variant="secondary" isIconOnly>
  <HeartFillIcon size={18} colorClassName="accent-danger" />
</Button>

// With icons
<Button variant="primary">
  <PlusIcon size={16} colorClassName="accent-accent-foreground" />
  <Button.Label>Add Member</Button.Label>
</Button>
```

--------------------------------

### Configure Multiple Select with Popover Presentation

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Implements a multiple-selection dropdown using the Select component. The presentation is set to 'popover' and items are rendered from a predefined list.

```tsx
<Select selectionMode="multiple">
  <Select.Trigger />
  <Select.Portal>
    <Select.Overlay />
    <Select.Content presentation="popover" width={300}>
      {US_STATES.map(state => (
        <Select.Item key={state.value} value={state.value} label={state.label} />
      ))}
    </Select.Content>
  </Select.Portal>
</Select>
```

--------------------------------

### Showcase Data Definitions

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Defines an array of showcase objects, each containing a title, navigation path, associated components, and a description. This data structures the content for the showcases section.

```tsx
// src/app/(home)/showcases/index.tsx
// The data array defines each showcase:
const data = [
  {
    title: 'Super App Paywall',
    href: '/showcases/super-app-paywall',
    components: ['BottomSheet', 'Tabs', 'ControlField', 'Button', 'Chip'],
    description: 'Modern subscription paywall with animated bottom sheet and tab navigation.',
  },
  {
    title: 'Raycast Model Select',
    href: '/showcases/raycast',
    components: ['Select', 'Button', 'Avatar'],
    description: 'AI model selector with animated blur backdrop and spring transitions.',
  },
  {
    title: 'Cooking Onboarding',
    href: '/showcases/cooking-onboarding',
    components: ['Popover', 'Avatar', 'Button', 'Separator'],
    description: 'Multi-step onboarding with automated popover sequences.',
  },
  {
    title: 'Linear Issue',
    href: '/showcases/linear-task',
    components: ['Dialog', 'Card', 'Chip', 'RadioGroup', 'Checkbox', 'Button', 'Avatar'],
    description: 'Interactive task management interface inspired by Linear.',
  },
  {
    title: 'Hero Paywall',
    href: '/showcases/paywall',
    components: ['Switch', 'ControlField', 'RadioGroup', 'Button'],
    description: 'Animated paywall with free trial, secure checkout, and flexible plans.',
  },
  {
    title: 'Onboarding',
    href: '/showcases/onboarding',
    components: ['Button', 'Card', 'Separator'],
    description: 'Onboarding step with marquee carousel of shadowed cards.',
  },
];
```

--------------------------------

### Toast Notifications - useToast

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Provides an imperative API for showing toast notifications with various semantic variants, placements, durations, and custom components.

```APIDOC
## Toast — `useToast`

Imperative toast notification system. Shows animated toasts at top or bottom of screen with 6 semantic variants, persistent or timed duration, custom icons, action buttons, keyboard avoidance, and fully custom `component` render prop. Access via `useToast()` hook.

```tsx
import { useToast, Button, type ToastComponentProps } from 'heroui-native';

function MyScreen() {
  const { toast, isToastVisible } = useToast();

  // Semantic variants
  const showDefault = () => toast.show({
    variant: 'default',
    label: 'Join a team',
    description: 'Junior Garcia sent you an invitation to join HeroUI team!',
    icon: <Logo width={15} height={20.77} />,
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  const showSuccess = () => toast.show({
    variant: 'success',
    placement: 'top',        // 'top' | 'bottom'
    label: 'Plan upgraded',
    description: 'You can continue using HeroUI Chat and more',
    icon: <ShieldCheckIcon size={20} colorClassName="accent-success" />,
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  const showDanger = () => toast.show({
    variant: 'danger',
    label: 'Storage is full',
    description: 'Remove files to release space.',
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
  });

  // Persistent toast (id allows programmatic hiding)
  const showPersistent = () => toast.show({
    id: 'my-toast',
    variant: 'default',
    placement: 'bottom',
    duration: 'persistent',
    label: 'Join a team',
    description: 'Tap close to dismiss',
    actionLabel: 'Close',
    onActionPress: ({ hide }) => hide(),
    onHide: () => inputRef.current?.blur(),
  });

  // Custom component toast (loading, progress, achievement)
  const renderLoadingToast = useCallback((props: ToastComponentProps) => (
    <LoadingToast {...props} />
  ), []);

  const showCustom = async () => {
    setIsLoading(true);
    toast.show({ id: 'loading', duration: 'persistent', component: renderLoadingToast });
    await loadData();
    setIsLoading(false);
  };

  // Hide all
  const hideAll = () => toast.hide('all');

  return (
    <View className="gap-5">
      <Button onPress={showDefault}>Default toast</Button>
      <Button onPress={showSuccess}>Success toast</Button>
      <Button onPress={showDanger}>Danger toast</Button>
      <Button onPress={showPersistent}>Persistent toast</Button>
      <Button onPress={showCustom} isDisabled={isToastVisible}>Load data</Button>
      <Button variant="danger-soft" onPress={hideAll}>Hide all</Button>
    </View>
  );
}
```
```

--------------------------------

### Configure Bottom-Sheet Select with Customization

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Configures a Select component to use a 'bottom-sheet' presentation with custom snap points and detached mode. Includes a custom trigger button and styled content container.

```tsx
<Select
  presentation="bottom-sheet"
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  value={value}
  onValueChange={setValue}
>
  <Select.Trigger variant="unstyled" asChild>
    <Button variant="secondary">
      {value ? <Text>{value.label}</Text> : <Text>Select</Text>}
    </Button>
  </Select.Trigger>
  <Select.Portal disableFullWindowOverlay>
    <Select.Overlay className="bg-black/10" />
    <Select.Content
      presentation="bottom-sheet"
      snapPoints={['35%', '50%']}
      detached
      enableDynamicSizing={false}
      contentContainerClassName="h-full pt-1 pb-1 mx-2.5 rounded-t-4xl border border-separator/20 bg-overlay overflow-hidden"
    >
      {items.map(item => (
        <Select.Item key={item.value} value={item.value} label={item.label}>
          <Text>{item.label}</Text>
          <Select.ItemIndicator />
        </Select.Item>
      ))}
    </Select.Content>
  </Select.Portal>
</Select>
```

--------------------------------

### Dialog with Scrollable Content and ScrollShadow

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

A dialog featuring long, scrollable content using `ScrollShadow` and `ScrollView`. Includes `LinearGradient` for backdrop effect. Requires `ScrollShadow`, `ScrollView`, `Text`, `LinearGradient`.

```tsx
// Dialog with scrollable long content + ScrollShadow
<Dialog isOpen={scrollOpen} onOpenChange={setScrollOpen}>
  <Dialog.Trigger asChild><Button variant="secondary">Terms</Button></Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content className="rounded-2xl px-0">
      <Dialog.Close variant="ghost" className="self-end mr-4" />
      <Dialog.Title className="text-center mb-5">Upload Audio</Dialog.Title>
      <ScrollShadow LinearGradientComponent={LinearGradient} style={{ height: height * 0.35 }} color={overlayColor} className="mb-4">
        <ScrollView contentContainerClassName="px-6">
          <Text className="text-foreground/80 text-center">{longText}</Text>
        </ScrollView>
      </ScrollShadow>
      <Button variant="secondary" className="self-center" onPress={() => setScrollOpen(false)}>
        Agree to Terms
      </Button>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>
```

--------------------------------

### Input Variants: Primary and Secondary

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates the 'primary' (default) and 'secondary' (surface-style) variants of the Input component within TextField containers.

```tsx
import { TextField, Input, Label, Description, FieldError } from 'heroui-native';

// Variants: primary (default) vs secondary (surface-style)
<TextField>
  <Label>Primary Variant</Label>
  <Input placeholder="Primary style input" variant="primary" />
</TextField>
<TextField>
  <Label>Secondary Variant</Label>
  <Input placeholder="Secondary style input" variant="secondary" />
</TextField>
```

--------------------------------

### Component Registry Data

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Defines a list of component items, each with a title and path, used for navigation and indexing.

```typescript
// src/helpers/data/components.ts
export const COMPONENTS: ComponentItem[] = [
  { title: 'Accordion',        path: 'accordion' },
  { title: 'Alert',            path: 'alert' },
  { title: 'Avatar',           path: 'avatar' },
  { title: 'BottomSheet',      path: 'bottom-sheet' },
  { title: 'Button',           path: 'button' },
  { title: 'Card',             path: 'card' },
  { title: 'Checkbox',         path: 'checkbox' },
  { title: 'Chip',             path: 'chip' },
  { title: 'CloseButton',      path: 'close-button' },
  { title: 'ControlField',     path: 'control-field' },
  { title: 'Description',      path: 'description' },
  { title: 'Dialog',           path: 'dialog' },
  { title: 'FieldError',       path: 'field-error' },
  { title: 'Input',            path: 'input' },
  { title: 'InputGroup',       path: 'input-group' },
  { title: 'InputOTP',         path: 'input-otp' },
  { title: 'Label',            path: 'label' },
  { title: 'LinkButton',       path: 'link-button' },
  { title: 'ListGroup',        path: 'list-group' },
  { title: 'Menu',             path: 'menu' },
  { title: 'Popover',          path: 'popover' },
  { title: 'PressableFeedback',path: 'pressable-feedback' },
  { title: 'RadioGroup',       path: 'radio-group' },
  { title: 'ScrollShadow',     path: 'scroll-shadow' },
  { title: 'SearchField',      path: 'search-field' },
  { title: 'Select',           path: 'select' },
  { title: 'Separator',        path: 'separator' },
  { title: 'Skeleton',         path: 'skeleton' },
  { title: 'Slider',           path: 'slider' },
  { title: 'Spinner',          path: 'spinner' },
  { title: 'Surface',          path: 'surface' },
  { title: 'Switch',           path: 'switch' },
  { title: 'Tabs',             path: 'tabs' },
  { title: 'TagGroup',         path: 'tag-group' },
  { title: 'TextArea',         path: 'text-area' },
  { title: 'TextField',        path: 'text-field' },
  { title: 'Toast',            path: 'toast' },
];
```

--------------------------------

### Dialog with Custom Animation and Form Inputs

Source: https://context7.com/heroui-inc/heroui-native-example/llms.txt

Demonstrates a dialog with custom entering/exiting animations and form inputs, including keyboard avoidance. Uses `FadeInDown` and `FadeOutDown` from `react-native-reanimated`. Requires `TextField`, `Label`, `FieldError`, `Input`.

```tsx
// Dialog with custom animation + form inputs (positioned at top with keyboard avoidance)
<Dialog isOpen={open} onOpenChange={setOpen}>
  <Dialog.Trigger asChild>
    <Button variant="secondary">Update Profile</Button>
  </Dialog.Trigger>
  <Dialog.Portal className="justify-start">
    <DialogBlurBackdrop />
    <Dialog.Content
      className="bg-surface"
      animation={{
        entering: FadeInDown.duration(200).easing(Easing.out(Easing.ease)),
        exiting: FadeOutDown.duration(150).easing(Easing.in(Easing.ease)),
      }}
      style={{ marginTop: insetTop, height: maxHeight }}
    >
      <Dialog.Close />
      <Dialog.Title className="mb-6">Update Profile</Dialog.Title>
      <TextField isRequired isInvalid={!!nameError}>
        <Label isInvalid={false}>Full Name</Label>
        <Input variant="secondary" placeholder="Enter your name" value={name} onChangeText={setName} autoFocus />
        <FieldError>{nameError}</FieldError>
      </TextField>
      <View className="flex-row justify-end gap-3 pt-3">
        <Button variant="ghost" size="sm" onPress={handleCancel}>Cancel</Button>
        <Button size="sm" onPress={handleSubmit}>Update Profile</Button>
      </View>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>
```