# Expo App UI — Full Documentation

> Production-ready, copy-paste React Native components for Expo. TypeScript-first, accessible, New Architecture compatible — with minimal peer dependencies so your screens stay lightweight.

Full text of every documentation page, intended for ingestion by LLMs and AI crawlers.
Site: https://expo-ui.thunderdevelops.in
Repository: https://github.com/Krish-Panchani/expo-app-ui

---
# CLI Commands

> Complete reference for all Expo App UI CLI commands including add, list, and overwrite options. Learn how to use the command-line interface to add components to your project.

Source: https://expo-ui.thunderdevelops.in/docs/cli

## Commands

### `add`

Add a component, helper, constant, or context to your project.

**Usage:**

```bash
npx expo-app-ui add <name>
npx expo-app-ui add <name> --overwrite
```

**Options:**

- `--overwrite` - Overwrite existing files without prompting

**Examples:**

```bash
# Add a component
npx expo-app-ui add button

# Add a helper
npx expo-app-ui add normalizeSize

# Add a constant
npx expo-app-ui add theme

# Add top loading bar (component + context)
npx expo-app-ui add top-loading-bar
```

:::tip
The CLI automatically detects and adds required dependencies (helpers, constants) when you add a component.
:::

### `list`

List all available components, helpers, constants, and contexts.

**Usage:**

```bash
npx expo-app-ui list
```

**Output:**

```
Available components:
  - box-view
  - button
  - custom-modal
  - custom-text
  - loading-bar
  - marquee
  - otp-input
  - profile-pic
  - progress-bar

Available helpers:
  - normalizeSize

Available constants:
  - theme

Available contexts:
  - top-loading-bar-context
```

## Global Options

- `-v, --verbose` - Enable verbose output
- `-s, --silent` - Enable silent mode (no output)

## File Overwrite Behavior

When a file already exists, the CLI will:

- **Interactive mode (TTY):** Prompt you to confirm overwrite
- **With --overwrite flag:** Automatically overwrite without prompting
- **Non-interactive mode:** Show an error and exit

## Auto-Dependency Detection

The CLI automatically detects when a component requires:

- `normalizeSize` helper
- `theme` constants
- Related components or contexts

These dependencies are automatically added to your project if they don't already exist.



---

# Comparison

> How expo-app-ui compares to gluestack-UI, React Native Reusables, NativeBase, and React Native Paper.

Source: https://expo-ui.thunderdevelops.in/docs/comparison

## TL;DR

- **`expo-app-ui`** — copy-paste components, zero peer deps for most, Expo-first ergonomics, indie-friendly.
- **gluestack-UI v3** — universal (web + native), accessibility-first, requires NativeWind/Tailwind, larger setup.
- **React Native Reusables** — shadcn/ui port, Tailwind-only, deep customization, web mental model.
- **NativeBase** — full design system, npm-installed (not copy-paste), heavier runtime.
- **React Native Paper** — Material Design 3, opinionated, not Tailwind-based.

## Feature matrix

| Feature                       | **expo-app-ui** | gluestack-UI v3 | RN Reusables | NativeBase | RN Paper |
| ----------------------------- | --------------- | --------------- | ------------ | ---------- | -------- |
| Distribution model            | Copy-paste (CLI)| Copy-paste (CLI)| Copy-paste   | npm        | npm      |
| Code ownership                | ✅ Full          | ✅ Full          | ✅ Full       | ❌          | ❌        |
| Styling system                | StyleSheet      | NativeWind      | NativeWind   | Tokens     | Theme    |
| Tailwind required             | ❌               | ✅               | ✅            | ❌          | ❌        |
| Web support                   | Mostly ✅        | ✅ (universal)   | ✅            | ✅          | ✅        |
| New Architecture (Fabric)     | ✅               | ✅               | ✅            | ⚠️ partial  | ✅        |
| Peer deps required            | None for most   | NativeWind, etc.| NativeWind   | Many       | Several  |
| Theming / dark mode           | Per-prop        | Built-in        | Built-in     | Built-in   | Built-in |
| Accessibility                 | Per-component   | First-class     | First-class  | Good       | Good     |
| Bundle size impact            | Tiny (only what you copy) | Tiny     | Tiny         | Larger     | Medium   |
| Auto-dependency detection     | ✅ Built-in      | ❌               | ❌            | n/a        | n/a      |
| TypeScript                    | ✅ Strict        | ✅               | ✅            | ✅          | ✅        |
| Component count               | ~25             | 30+             | 25+          | 60+        | 40+      |

## When to pick each

### Pick **expo-app-ui** if…

- You want code you fully own, with **no styling framework lock-in**.
- You're building an **Expo** app (SDK 52+) and want sensible defaults.
- You don't want to set up NativeWind/Tailwind just to get a button.
- You like the **auto-dependency** workflow (helpers/constants installed for you).
- You're a solo dev or small team prioritizing shipping speed.

### Pick **gluestack-UI v3** if…

- You're already on NativeWind/Tailwind and want a **universal** (web + native) library.
- Accessibility and i18n are non-negotiable from day one.
- You're building enterprise apps with a design-system team.

### Pick **React Native Reusables** if…

- You love shadcn/ui's mental model on the web and want the same on native.
- Your team is already deep on Tailwind.

### Pick **NativeBase / RN Paper** if…

- You want a fully opinionated design system out of the box.
- You're OK with an npm dependency and the runtime cost it brings.

## Honest tradeoffs of `expo-app-ui`

We won't oversell. Things to know:

- **No theme provider yet.** Components accept color props; a `ThemeProvider` is on the roadmap.
- **Smaller component count** than gluestack/Paper. Adding new ones is straightforward — see [contributing](https://github.com/Krish-Panchani/expo-app-ui/blob/main/CONTRIBUTING.md).
- **Styling is StyleSheet-based**, not Tailwind. If you prefer utility classes, RN Reusables or gluestack are better fits.
- **No web-first universal stories** for every component (e.g. `birthdate-picker` is mobile-only).

## Migration

Mixing `expo-app-ui` with another library is fine — components are isolated files in your repo. There's no global theme conflict, no provider you have to wrap your tree in.


---

# Compatibility

> Expo SDK, React Native, and New Architecture (Fabric/TurboModules) compatibility for expo-app-ui components.

Source: https://expo-ui.thunderdevelops.in/docs/compatibility

## Versions

| Tool                | Supported                          |
| ------------------- | ---------------------------------- |
| Expo SDK            | **52, 53, 54+** (latest)           |
| React Native        | **0.74+**                          |
| New Architecture    | ✅ Fabric + TurboModules           |
| Old Architecture    | ✅ Still supported                 |
| Platforms           | iOS · Android · Web (component-dependent) |
| TypeScript          | ✅ Strict mode                     |
| Node (CLI)          | ≥ 14                               |

## New Architecture (Fabric / TurboModules)

Expo SDK 52+ defaults to the New Architecture. Every component is built and tested against:

```json
// app.json
{
  "expo": {
    "newArchEnabled": true
  }
}
```

### What's verified

- All components render correctly under Fabric
- No `findNodeHandle` or other legacy bridge APIs
- Animations use `react-native-reanimated` v3 (Fabric-ready) where animations are needed
- No deprecated `PropTypes`, no `componentWillReceiveProps`, no string refs

### Components with native dependencies

Most components are pure JS. The few that touch native:

| Component        | Native dep                                    | New Arch ready |
| ---------------- | --------------------------------------------- | -------------- |
| `custom-modal`   | `react-native-reanimated`                     | ✅ (Reanimated 3+) |
| `loading-bar`    | `react-native-reanimated`                     | ✅             |
| `bottom-sheet`   | `react-native-reanimated`, `react-native-gesture-handler` | ✅ |
| `slider`         | `react-native-gesture-handler`                | ✅             |
| `accordion`      | `react-native-reanimated` (LayoutAnimation fallback) | ✅      |

If you don't have these libraries installed, the CLI will still copy the file — install peers as documented on the component's docs page.

## Web support

Components ship as universal where possible. Mobile-specific behavior (e.g. `BackHandler`, native gestures, keyboard avoidance) gracefully no-ops on web. Components that don't make sense on web (e.g. `birthdate-picker` wheel pickers) are marked **mobile-only** in their docs.

## Reporting compatibility issues

If a component breaks with a specific SDK or architecture flag, please open an issue at
[github.com/Krish-Panchani/expo-app-ui/issues](https://github.com/Krish-Panchani/expo-app-ui/issues) including:

- Expo SDK version
- React Native version
- Whether the New Architecture is enabled
- Minimal Snack repro


---

# Getting Started

> Learn how to install and use Expo App UI in your Expo React Native project. Quick start guide with installation, path aliases, and auto-dependency detection.

Source: https://expo-ui.thunderdevelops.in/docs/getting-started

:::tip[Designed for production]
Every component in this library is built for real apps, not demos. That means **TypeScript strict mode**, **accessibility props** wired up, **New Architecture** (Fabric) compatibility, **minimal peer dependencies** so your bundle stays light, and an **automated test suite** for the CLI. Customize freely — the patterns are already production-grade.
:::

## Installation

### Using npx (Recommended)

No installation required. Use directly with npx:

```bash
npx expo-app-ui <command>
```

### Global Installation

Install globally for easier access:

```bash
npm install -g expo-app-ui
expo-app-ui <command>
```

## Quick Start

Add a component to your project:

```bash
npx expo-app-ui add custom-text
```

## Path Aliases

Make sure your project has path aliases configured.

### tsconfig.json

```json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

### babel.config.js

```js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@': './',
          },
        },
      ],
    ],
  };
};
```

## Auto-Dependency Detection

The CLI automatically detects when a component requires:

- `normalizeSize` helper
- `theme` constants
- Related components or contexts

These dependencies are automatically added to your project if they don't already exist.

## Next Steps

- [Browse Components →](/docs/components)
- [Learn CLI Commands →](/docs/cli)



---

# Accordion

> An expandable accordion component with smooth animations and customizable theming for Expo React Native. Learn how to use Accordion with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/accordion

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/accordion-example.gif" 
    alt="Accordion Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add accordion
```

:::note
The accordion component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import Accordion from "@/components/ui/Accordion";

<Accordion 
  data={[
    { id: '1', title: 'Item 1', content: 'Content here' }
  ]} 
/>
```

## Complete Example

Here's a complete example showing all accordion features:

```tsx
import Accordion from "@/components/ui/Accordion";
import React from "react";
import { ScrollView, StyleSheet, Text } from "react-native";

export default function AccordionExampleScreen() {
  const data = [
    {
      id: "1",
      title: "What is React Native?",
      content:
        "React Native allows you to build mobile apps using JavaScript and React.",
    },
    {
      id: "2",
      title: "Is React Native fast?",
      content:
        "Yes. It uses native components and can be optimized when needed.",
    },
    {
      id: "3",
      title: "Can I use native code?",
      content:
        "Absolutely. Native modules can be written in Swift, Kotlin, or Java.",
    },
  ];

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.heading}>Accordion Component Demos</Text>

      <Text style={styles.subHeading}>Default (Single Open)</Text>
      <Accordion data={data} />

      <Text style={styles.subHeading}>Multiple Open</Text>
      <Accordion data={data} allowMultiple />

      <Text style={styles.subHeading}>Pre-opened + Themed</Text>
      <Accordion
        data={data}
        allowMultiple
        defaultOpenIds={["1"]}
        theme={{
          accentColor: "#7fb239",
          borderColor: "#7fb23950",
          backgroundColor: "#F9FAFB",
        }}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#FFFFFF",
  },
  heading: {
    fontSize: 24,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 24,
  },
  subHeading: {
    fontSize: 18,
    fontWeight: "500",
    marginTop: 28,
    marginBottom: 12,
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `AccordionItem[]` | Required | Array of accordion items with `id`, `title`, and `content` |
| `allowMultiple` | `boolean` | `false` | Allow multiple items to be open simultaneously |
| `defaultOpenIds` | `string[]` | `[]` | Array of item IDs to be open by default |
| `theme` | `AccordionTheme` | `{}` | Custom theme object for styling |

### AccordionItem Type

```tsx
interface AccordionItem {
  id: string;
  title: string;
  content: React.ReactNode;
}
```

### AccordionTheme Type

```tsx
interface AccordionTheme {
  backgroundColor?: string;
  borderColor?: string;
  textColor?: string;
  mutedTextColor?: string;
  accentColor?: string;
  borderRadius?: number;
}
```

## Examples

### Basic Accordion

```tsx
<Accordion 
  data={[
    { 
      id: '1', 
      title: 'What is React Native?', 
      content: 'React Native allows you to build mobile apps using JavaScript and React.' 
    }
  ]} 
/>
```

### Multiple Items Open

```tsx
<Accordion 
  data={data} 
  allowMultiple 
/>
```

### Pre-opened Items

```tsx
<Accordion 
  data={data} 
  defaultOpenIds={["1", "3"]} 
/>
```

### Custom Theme

```tsx
<Accordion
  data={data}
  theme={{
    backgroundColor: "#F9FAFB",
    borderColor: "#7fb23950",
    textColor: "#111827",
    mutedTextColor: "#6B7280",
    accentColor: "#7fb239",
    borderRadius: 12,
  }}
/>
```

### Combined Features

```tsx
<Accordion
  data={data}
  allowMultiple
  defaultOpenIds={["1"]}
  theme={{
    accentColor: "#2563EB",
    borderColor: "#E5E7EB",
    backgroundColor: "#FFFFFF",
  }}
/>
```

## Features

- **Smooth Animations**: Uses LayoutAnimation for smooth expand/collapse transitions
- **Single or Multiple Open**: Control whether multiple items can be open at once
- **Customizable Theming**: Full control over colors, borders, and styling
- **Pre-opened Items**: Set default open items on mount
- **Animated Chevron**: Rotating chevron indicator shows open/closed state
- **Accessibility**: Proper accessibility roles and states
- **No Dependencies**: Self-contained component with no external dependencies
- **TypeScript Support**: Full TypeScript types included

## Notes

- The component uses `LayoutAnimation` which requires enabling on Android (handled automatically)
- Content can be any React node, not just text
- The chevron rotates 180 degrees when an item is opened
- When `allowMultiple` is false, opening one item closes others
- Theme values are merged with defaults, so you only need to specify what you want to override
- The component handles all state management internally



---

# Auto Scroll Cards

> A carousel component with auto-scrolling, manual swipe, and indicator support for Expo React Native. Learn how to use AutoScrollCards with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/auto-scroll-cards

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/auto-scroll-cards-example.gif" 
    alt="Auto Scroll Cards Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add auto-scroll-cards
```

:::note
The auto-scroll cards component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import AutoScrollCards from "@/components/ui/AutoScrollCards";

<AutoScrollCards
  data={items}
  cardWidth={300}
  renderItem={(item) => <Card {...item} />}
/>
```

## Complete Example

Here's a complete example showing all auto-scroll cards features:

```tsx
import AutoScrollCards from "@/components/ui/AutoScrollCards";
import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

export default function AutoScrollCardsExampleScreen() {
  const testimonials = [
    {
      quote: "This product completely changed our workflow.",
      author: "Sarah Johnson",
    },
    {
      quote: "Clean UI, smooth animations, very easy to use.",
      author: "Michael Lee",
    },
    {
      quote: "Best component library we've used so far.",
      author: "Ananya Patel",
    },
  ];

  const features = [
    { title: "Fast", desc: "Optimized for performance" },
    { title: "Reusable", desc: "Built for scale" },
    { title: "Customizable", desc: "Theme it your way" },
  ];

  const banners = [
    { label: "🔥 New Features Released" },
    { label: "🎉 50% Discount This Week" },
    { label: "🚀 Upgrade Your Experience" },
  ];

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.heading}>Auto-Scrolling Cards Demos</Text>

      {/* ================= Testimonials ================= */}
      <Text style={styles.subHeading}>Testimonials (Auto Scroll)</Text>
      <Text style={styles.caption}>
        Automatically scrolls every few seconds
      </Text>

      <AutoScrollCards
        data={testimonials}
        cardWidth={300}
        interval={3500}
        autoScroll
        loop
        renderItem={(item) => (
          <View style={styles.testimonialCard}>
            <Text style={styles.quote}>"{item.quote}"</Text>
            <Text style={styles.author}>— {item.author}</Text>
          </View>
        )}
      />

      {/* ================= Features ================= */}
      <Text style={styles.subHeading}>Feature Highlights (Manual Swipe)</Text>
      <Text style={styles.caption}>Auto-scroll disabled, swipe manually</Text>

      <AutoScrollCards
        data={features}
        cardWidth={240}
        autoScroll={false}
        showIndicators={false}
        renderItem={(item) => (
          <View style={styles.featureCard}>
            <Text style={styles.featureTitle}>{item.title}</Text>
            <Text style={styles.featureDesc}>{item.desc}</Text>
          </View>
        )}
      />

      {/* ================= Banners ================= */}
      <Text style={styles.subHeading}>Promotional Banners (Looping)</Text>
      <Text style={styles.caption}>Looping carousel with faster interval</Text>

      <AutoScrollCards
        data={banners}
        cardWidth={320}
        interval={2500}
        loop
        renderItem={(item) => (
          <View style={styles.bannerCard}>
            <Text style={styles.bannerText}>{item.label}</Text>
          </View>
        )}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#FFFFFF",
  },
  heading: {
    fontSize: 24,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 24,
  },
  subHeading: {
    fontSize: 18,
    fontWeight: "500",
    marginTop: 28,
    marginBottom: 6,
  },
  caption: {
    fontSize: 13,
    color: "#6B7280",
    marginBottom: 12,
  },

  /* -------- Cards -------- */

  testimonialCard: {
    backgroundColor: "#F9FAFB",
    borderRadius: 14,
    padding: 20,
    height: 160,
    justifyContent: "center",
  },
  quote: {
    fontSize: 15,
    fontStyle: "italic",
    marginBottom: 10,
  },
  author: {
    fontSize: 13,
    color: "#6B7280",
    textAlign: "right",
  },

  featureCard: {
    backgroundColor: "#EEF2FF",
    borderRadius: 12,
    padding: 16,
    height: 120,
    justifyContent: "center",
  },
  featureTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 6,
  },
  featureDesc: {
    fontSize: 13,
    color: "#374151",
  },

  bannerCard: {
    backgroundColor: "#2563EB",
    borderRadius: 16,
    height: 140,
    justifyContent: "center",
    alignItems: "center",
  },
  bannerText: {
    color: "#FFFFFF",
    fontSize: 18,
    fontWeight: "600",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `T[]` | Required | Array of data items to display |
| `renderItem` | `(item: T, index: number) => ReactNode` | Required | Function to render each card |
| `cardWidth` | `number` | Required | Width of each card in pixels |
| `gap` | `number` | `12` | Gap between cards in pixels |
| `autoScroll` | `boolean` | `true` | Enable automatic scrolling |
| `interval` | `number` | `3000` | Auto-scroll interval in milliseconds |
| `loop` | `boolean` | `true` | Loop back to first card after last |
| `showIndicators` | `boolean` | `true` | Show dot indicators at bottom |

## Examples

### Basic Auto-Scroll

```tsx
<AutoScrollCards
  data={testimonials}
  cardWidth={300}
  renderItem={(item) => (
    <View style={styles.card}>
      <Text>{item.text}</Text>
    </View>
  )}
/>
```

### Manual Swipe Only

```tsx
<AutoScrollCards
  data={items}
  cardWidth={240}
  autoScroll={false}
  renderItem={(item) => <Card {...item} />}
/>
```

### Custom Interval

```tsx
<AutoScrollCards
  data={banners}
  cardWidth={320}
  interval={2500}
  loop
  renderItem={(item) => <Banner {...item} />}
/>
```

### Without Indicators

```tsx
<AutoScrollCards
  data={items}
  cardWidth={280}
  showIndicators={false}
  renderItem={(item) => <Card {...item} />}
/>
```

### No Looping

```tsx
<AutoScrollCards
  data={items}
  cardWidth={300}
  loop={false}
  renderItem={(item) => <Card {...item} />}
/>
```

### Custom Gap

```tsx
<AutoScrollCards
  data={items}
  cardWidth={280}
  gap={20}
  renderItem={(item) => <Card {...item} />}
/>
```

## Features

- **Automatic Scrolling**: Configurable auto-scroll with custom intervals
- **Manual Swipe Support**: Users can swipe to navigate manually
- **Smart Pause**: Auto-scroll pauses when user interacts
- **Looping Carousel**: Seamlessly loops from last to first card
- **Dot Indicators**: Visual indicators showing current position
- **Smooth Snap Scrolling**: Cards snap to position with smooth animations
- **Generic Type Support**: Works with any data type via TypeScript generics
- **No Dependencies**: Self-contained component with no external dependencies
- **Performance Optimized**: Uses FlatList for efficient rendering

## Notes

- Auto-scroll automatically pauses when the user starts swiping
- The component resumes auto-scrolling after user interaction ends
- When `loop` is false, scrolling stops at the last card
- Card width should match your design - the component handles spacing
- The gap prop controls spacing between cards
- Indicators show active state with a larger, colored dot
- Works best with 2+ items (auto-scroll disabled for single item)
- The component uses `FlatList` under the hood for optimal performance
- All cards should have the same width for best visual consistency



---

# Avatar

> User avatar with image, initials fallback, and optional online/offline status indicator.

Source: https://expo-ui.thunderdevelops.in/docs/components/avatar

## Installation

```bash
npx expo-app-ui add avatar
```

## Usage

```tsx
import Avatar from "@/components/ui/avatar";

<Avatar source={{ uri: "https://i.pravatar.cc/100" }} name="Krish Panchani" size="md" />
<Avatar name="Krish Panchani" size="lg" showStatus status="online" />
```

## Props

| Prop                 | Type                                                       | Default      | Description                       |
| -------------------- | ---------------------------------------------------------- | ------------ | --------------------------------- |
| `source`             | `ImageSourcePropType`                                      | -            | Image source                      |
| `name`               | `string`                                                   | -            | Used to derive initials fallback  |
| `size`               | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`           | `'md'`       | Avatar size                       |
| `rounded`            | `boolean`                                                  | `true`       | Circle vs squircle                |
| `backgroundColor`    | `string`                                                   | `'#E5E7EB'`  | Fallback background               |
| `textColor`          | `string`                                                   | `'#374151'`  | Initials color                    |
| `status`             | `'online' \| 'offline' \| 'busy' \| 'away'`                | -            | Status indicator color            |
| `showStatus`         | `boolean`                                                  | `false`      | Render the status dot             |
| `style`              | `StyleProp<ViewStyle>`                                     | -            | Container style override          |
| `imageStyle`         | `StyleProp<ImageStyle>`                                    | -            | Image style override              |
| `accessibilityLabel` | `string`                                                   | `Avatar for {name}` | Screen-reader label        |

## Accessibility

- `accessibilityRole="image"`
- Provides a meaningful default label using `name`


---

# Badge

> A compact label for status, counts, and tags. Supports solid, outline, and subtle variants with semantic tones.

Source: https://expo-ui.thunderdevelops.in/docs/components/badge

## Installation

```bash
npx expo-app-ui add badge
```

## Usage

```tsx
import Badge from "@/components/ui/badge";

<Badge label="New" tone="primary" />
<Badge label="Beta" variant="outline" tone="warning" />
<Badge dot tone="success" />
```

## Props

| Prop                | Type                                                       | Default     | Description                          |
| ------------------- | ---------------------------------------------------------- | ----------- | ------------------------------------ |
| `label`             | `string`                                                   | -           | Text shown inside the badge          |
| `children`          | `ReactNode`                                                | -           | Alternative to `label`               |
| `variant`           | `'solid' \| 'outline' \| 'subtle'`                         | `'solid'`   | Visual style                         |
| `tone`              | `'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'neutral'` | Semantic color tone                  |
| `size`              | `'sm' \| 'md' \| 'lg'`                                     | `'md'`      | Badge size                           |
| `rounded`           | `boolean`                                                  | `true`      | Pill shape vs square                 |
| `dot`               | `boolean`                                                  | `false`     | Render only a colored dot            |
| `style`             | `StyleProp<ViewStyle>`                                     | -           | Container style override             |
| `textStyle`         | `StyleProp<TextStyle>`                                     | -           | Text style override                  |
| `accessibilityLabel`| `string`                                                   | -           | Screen-reader label                  |

## Accessibility

- Renders with `accessibilityRole="text"` (or `image` for `dot`)
- `accessibilityLabel` defaults to `label`


---

# Birthdate Picker

> A native-style date picker component for selecting birthdates with month, day, and year wheels for Expo React Native. Learn how to use CustomBirthdatePicker with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/birthdate-picker

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/celender-example.gif" 
    alt="Birthdate Picker Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add birthdate-picker
```

:::note
The birthdate picker component requires `@expo/vector-icons` for the calendar icon. Make sure it's installed in your project.
:::

## Usage

```tsx
import CustomBirthdatePicker from "@/components/ui/birthdate-picker";

<CustomBirthdatePicker 
  onDateChange={(date) => console.log(date)} 
/>
```

## Complete Example

Here's a complete example showing the birthdate picker:

```tsx
import CustomBirthdatePicker from "@/components/ui/birthdate-picker";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";

export default function BirthdatePickerExample() {
  const [selectedDate, setSelectedDate] = useState<string>("");

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Birthdate Picker Example</Text>

      <CustomBirthdatePicker
        initialDate={new Date(2000, 0, 1)}
        onDateChange={(date) => {
          setSelectedDate(date);
          console.log("Selected date:", date);
        }}
      />

      {selectedDate && (
        <Text style={styles.result}>
          Selected: {selectedDate}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#FFFFFF",
  },
  heading: {
    fontSize: 22,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 20,
  },
  result: {
    marginTop: 20,
    textAlign: "center",
    fontSize: 14,
    color: "#333",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `initialDate` | `Date` | `new Date()` | Initial selected date |
| `onDateChange` | `(date: string) => void` | Required | Callback when date changes (returns YYYY-MM-DD format) |

## Examples

### Basic Usage

```tsx
<CustomBirthdatePicker 
  onDateChange={(date) => {
    console.log("Selected date:", date);
  }} 
/>
```

### With Initial Date

```tsx
<CustomBirthdatePicker
  initialDate={new Date(2000, 0, 1)}
  onDateChange={handleDateChange}
/>
```

### In a Form

```tsx
const [birthdate, setBirthdate] = useState<string>("");

<CustomBirthdatePicker
  initialDate={new Date(1990, 5, 15)}
  onDateChange={(date) => setBirthdate(date)}
/>

{birthdate && (
  <Text>Birthdate: {birthdate}</Text>
)}
```

## Features

- **Native iOS-Style Picker**: Three-wheel picker for month, day, and year
- **Automatic Day Validation**: Handles leap years and month-specific day limits
- **Modal Presentation**: Opens in a modal overlay
- **Formatted Output**: Returns date in YYYY-MM-DD format
- **100 Years Range**: Supports dates from 100 years ago to today
- **Visual Feedback**: Highlighted selection area
- **Smooth Scrolling**: Native scroll behavior with snap-to-item
- **Cancel/Done Actions**: Clear user actions for selection

## Date Format

The `onDateChange` callback returns dates in **YYYY-MM-DD** format:

```tsx
onDateChange={(date) => {
  // date will be: "2000-01-15"
  console.log(date);
}}
```

## Notes

- The component automatically adjusts the day picker when month or year changes
- For example, if you select February, days 29-31 are automatically removed
- Leap years are handled automatically (February 29 is available in leap years)
- The year range is from 100 years ago to the current year
- The modal can be dismissed by tapping outside or using Cancel button
- Changes are only applied when "Done" is pressed
- The component uses `@expo/vector-icons` for the calendar icon
- All dates are in local timezone
- The input field shows the selected date in readable format (e.g., "15 January 2000")

## Styling

The component uses a clean, native iOS-style design with:
- Light gray borders
- Blue accent color for selected items
- Semi-transparent overlay background
- Rounded corners on modal and input
- Smooth animations

You can customize the colors by modifying the `COLORS` constant in the component file.



---

# Bottom Sheet

> Modal bottom sheet with swipe-to-dismiss, dynamic content height, and animated backdrop.

Source: https://expo-ui.thunderdevelops.in/docs/components/bottom-sheet

## Installation

```bash
npx expo-app-ui add bottom-sheet
```

## Usage

```tsx
import BottomSheet from "@/components/ui/bottom-sheet";
import { useState } from "react";
import { Text, View } from "react-native";

const [open, setOpen] = useState(false);

<BottomSheet visible={open} onClose={() => setOpen(false)}>
  <View>
    <Text style={{ fontSize: 18, fontWeight: "600" }}>Settings</Text>
    {/* …content */}
  </View>
</BottomSheet>
```

## Props

| Prop                | Type                                 | Default              | Description                              |
| ------------------- | ------------------------------------ | -------------------- | ---------------------------------------- |
| `visible`           | `boolean`                            | required             | Show/hide                                |
| `onClose`           | `() => void`                         | required             | Close handler                            |
| `children`          | `ReactNode`                          | required             | Sheet content                            |
| `height`            | `number \| 'auto'`                   | `'auto'`             | Fixed height or content-driven           |
| `maxHeight`         | `number`                             | `90% of screen`      | Cap for `auto`                           |
| `backgroundColor`   | `string`                             | `'#FFFFFF'`          | Sheet bg                                 |
| `backdropColor`     | `string`                             | `'rgba(0,0,0,0.5)'`  | Backdrop color                           |
| `borderRadius`      | `number`                             | `20`                 | Top corner radius                        |
| `showHandle`        | `boolean`                            | `true`               | Render the drag handle                   |
| `handleColor`       | `string`                             | `'#D1D5DB'`          | Drag handle color                        |
| `enableSwipeDown`   | `boolean`                            | `true`               | Allow swipe-to-dismiss                   |
| `closeOnBackdrop`   | `boolean`                            | `true`               | Tap backdrop to close                    |
| `closeOnBackPress`  | `boolean`                            | `true`               | Android back to close                    |

## Accessibility

- `accessibilityViewIsModal` on the wrapper
- Backdrop dismiss is announced via the back-press handler

## Notes

- For sheets that need keyboard avoidance during text input, the component dismisses the keyboard on close. If you need keyboard-pushing behavior, wrap your content in `KeyboardAvoidingView`.
- For more advanced gestures (snap points, programmatic positioning), consider `@gorhom/bottom-sheet`. This component intentionally stays minimal.


---

# Box View

> A flexible layout component with comprehensive flexbox props for Expo React Native. Learn how to use BoxView with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/box-view

## Installation

```bash
npx expo-app-ui add box-view
```

## Usage

```tsx
import BoxView from "@/components/ui/box-view";

<BoxView flexDirection="row" gap={10}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</BoxView>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| flexDirection | 'row' \| 'column' | - | Flex direction |
| justifyContent | 'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly' | - | Justify content alignment |
| alignItems | 'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline' | - | Align items |
| gap | number | - | Gap between children |
| padding | number | - | Uniform padding |
| paddingX | number | - | Horizontal padding |
| paddingY | number | - | Vertical padding |
| margin | number | - | Uniform margin |
| width | string \| number | - | Width |
| height | string \| number | - | Height |

## Examples

### Basic Layout

```tsx
<BoxView flexDirection="row" gap={10}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</BoxView>
```

### Centered Content

```tsx
<BoxView justifyContent="center" alignItems="center" height="100%">
  <Text>Centered</Text>
</BoxView>
```

## Features

- Comprehensive flexbox props
- Easy spacing with gap, padding, margin
- Direction-specific spacing props
- Customizable dimensions



---

# Button

> A flexible button component with variants and icon support for Expo React Native. Learn how to use Button with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/button

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/buttons-example.png" 
    alt="Button Component Examples" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add button
```

:::note
The button component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import Button from "@/components/ui/button";

<Button title="Click Me" onPress={() => console.log('Pressed')} />
```

## Complete Example

Here's a comprehensive example showing all button variants and features:

```tsx
import React from "react";
import { View, StyleSheet, ScrollView } from "react-native";
import Button from "@/components/ui/button";
import CustomText from "@/components/ui/custom-text";
import {
  Ionicons,
  Feather,
  MaterialIcons,
} from "@expo/vector-icons";

export default function ButtonExamples() {
  return (
    <ScrollView
      contentContainerStyle={styles.container}
      showsVerticalScrollIndicator={false}
    >
      <CustomText fontSize={28} style={styles.heading}>
        Button Component Examples
      </CustomText>

      {/* PRIMARY */}
      <CustomText style={styles.label}>Primary Button</CustomText>
      <Button
        title="Primary Button"
        bgColor="#111827"
        onPress={() => {}}
      />

      {/* OUTLINED */}
      <CustomText style={styles.label}>Outlined Button</CustomText>
      <Button
        title="Outlined Button"
        variant="outlined"
        textColor="#111827"
        borderColor="#111827"
        onPress={() => {}}
      />

      {/* OUTLINED BOTTOM */}
      <CustomText style={styles.label}>Outlined Bottom Button</CustomText>
      <Button
        title="Outlined Bottom"
        variant="outlinedBottom"
        bgColor="#2563EB"
        borderColor="#1E40AF"
        textColor="#fff"
        onPress={() => {}}
      />

      {/* LEFT ICON */}
      <CustomText style={styles.label}>Button with Left Icon</CustomText>
      <Button
        title="Login"
        bgColor="#16A34A"
        IconLeft={() => (
          <Ionicons name="log-in-outline" size={20} color="#fff" />
        )}
        onPress={() => {}}
      />

      {/* RIGHT ICON */}
      <CustomText style={styles.label}>Button with Right Icon</CustomText>
      <Button
        title="Continue"
        bgColor="#7C3AED"
        IconRight={() => (
          <Feather name="arrow-right" size={20} color="#fff" />
        )}
        onPress={() => {}}
      />

      {/* CENTER ICON ONLY */}
      <CustomText style={styles.label}>Icon Only Buttons (Center Icon)</CustomText>
      <View style={styles.iconRow}>
        <Button
          title="Add"
          bgColor="#2563EB"
          IconCenter={() => (
            <Ionicons name="add" size={24} color="#fff" />
          )}
          hideTextWithCenterIcon
          style={styles.iconButton}
          onPress={() => {}}
        />

        <Button
          title="Edit"
          bgColor="#F59E0B"
          IconCenter={() => (
            <MaterialIcons name="edit" size={22} color="#fff" />
          )}
          hideTextWithCenterIcon
          style={styles.iconButton}
          onPress={() => {}}
        />

        <Button
          title="Delete"
          bgColor="#DC2626"
          IconCenter={() => (
            <Ionicons name="trash-outline" size={22} color="#fff" />
          )}
          hideTextWithCenterIcon
          style={styles.iconButton}
          onPress={() => {}}
        />
      </View>

      {/* LOADING */}
      <CustomText style={styles.label}>Loading Button</CustomText>
      <Button
        title="Loading..."
        loading
        bgColor="#6B7280"
        onPress={() => {}}
      />

      {/* DISABLED */}
      <CustomText style={styles.label}>Disabled Button</CustomText>
      <Button
        title="Disabled"
        disabled
        bgColor="#9CA3AF"
        onPress={() => {}}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 12,
  },
  heading: {
    textAlign: "center",
    fontWeight: "600",
    marginBottom: 16,
  },
  label: {
    fontSize: 14,
    color: "#6B7280",
    marginTop: 12,
    marginBottom: 6,
  },
  iconRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    gap: 12,
  },
  iconButton: {
    width: 56,
    height: 56,
    borderRadius: 28,
    paddingHorizontal: 0,
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | Required | Button text |
| `variant` | `'primary'` \| `'outlined'` \| `'outlinedBottom'` \| `'normal'` \| `'custom'` | `'primary'` | Button variant |
| `onPress` | `() => void` | Required | Press handler |
| `disabled` | `boolean` | `false` | Disabled state |
| `loading` | `boolean` | `false` | Loading state (shows activity indicator) |
| `IconLeft` | `React.ComponentType` | `undefined` | Left icon component |
| `IconRight` | `React.ComponentType` | `undefined` | Right icon component |
| `IconCenter` | `React.ComponentType` | `undefined` | Center icon component |
| `hideTextWithCenterIcon` | `boolean` | `false` | Hide text when IconCenter is present |
| `fontSize` | `number` | `18` | Custom font size |
| `fontWeight` | `string` | `'normal'` | Custom font weight |
| `textColor` | `string` | `'#fff'` | Custom text color |
| `bgColor` | `string` | `'black'` | Custom background color |
| `borderColor` | `string` | `'#d3d3d3'` | Custom border color |
| `style` | `StyleProp<ViewStyle>` | - | Custom container styles |
| `textStyle` | `StyleProp<TextStyle>` | - | Custom text styles |

## Examples

### Basic Button

```tsx
<Button title="Click Me" onPress={() => console.log('Pressed')} />
```

### Variants

```tsx
{/* Primary (default) */}
<Button title="Primary" bgColor="#111827" onPress={() => {}} />

{/* Outlined */}
<Button 
  title="Outlined" 
  variant="outlined"
  textColor="#111827"
  borderColor="#111827"
  onPress={() => {}} 
/>

{/* Outlined Bottom */}
<Button 
  title="Outlined Bottom" 
  variant="outlinedBottom"
  bgColor="#2563EB"
  borderColor="#1E40AF"
  textColor="#fff"
  onPress={() => {}} 
/>
```

### With Icons

```tsx
{/* Left Icon */}
<Button
  title="Login"
  bgColor="#16A34A"
  IconLeft={() => <Ionicons name="log-in-outline" size={20} color="#fff" />}
  onPress={() => {}}
/>

{/* Right Icon */}
<Button
  title="Continue"
  bgColor="#7C3AED"
  IconRight={() => <Feather name="arrow-right" size={20} color="#fff" />}
  onPress={() => {}}
/>

{/* Center Icon (Icon Only) */}
<Button
  title="Add"
  bgColor="#2563EB"
  IconCenter={() => <Ionicons name="add" size={24} color="#fff" />}
  hideTextWithCenterIcon
  style={{ width: 56, height: 56, borderRadius: 28 }}
  onPress={() => {}}
/>
```

### Loading and Disabled States

```tsx
{/* Loading */}
<Button
  title="Loading..."
  loading
  bgColor="#6B7280"
  onPress={() => {}}
/>

{/* Disabled */}
<Button
  title="Disabled"
  disabled
  bgColor="#9CA3AF"
  onPress={() => {}}
/>
```

## Features

- **Multiple Variants**: Primary, outlined, outlined bottom, normal, and custom
- **Icon Support**: Left, right, and center icon positions
- **Icon-Only Buttons**: Use center icon with `hideTextWithCenterIcon` prop
- **Loading State**: Shows activity indicator when `loading` is true
- **Disabled State**: Automatically reduces opacity when disabled
- **Fully Customizable**: Control colors, sizes, fonts, and styles
- **No Dependencies**: Self-contained component with black/white defaults


---

# Calendar

> A flexible calendar component supporting single date selection, date ranges, and customizable theming for Expo React Native. Learn how to use Calendar with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/calendar

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/celender-example.gif" 
    alt="Calendar Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add calendar
```

:::note
The calendar component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import Calendar from "@/components/ui/calender";

<Calendar 
  mode="single" 
  value={date} 
  onChange={setDate} 
/>
```

## Complete Example

Here's a complete example showing all calendar features:

```tsx
import Calendar from "@/components/ui/calender";
import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";

export default function CalendarExampleScreen() {
  /* ---------- Single Date ---------- */
  const [singleDate, setSingleDate] = useState<Date | null>(null);

  /* ---------- Date Range ---------- */
  const [range, setRange] = useState<{
    start: Date | null;
    end: Date | null;
  }>({ start: null, end: null });

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Calendar Component Demo</Text>

      {/* ================= Single Select ================= */}
      <Text style={styles.subHeading}>Single Date Selection</Text>

      <Calendar
        mode="single"
        value={singleDate ?? new Date()}
        minDate="1900-01-01"
        maxDate={new Date().toISOString().split("T")[0]}
        onChange={setSingleDate}
        allowFutureDates={true}
      />

      {singleDate && (
        <Text style={styles.result}>
          Selected: {singleDate.toISOString().split("T")[0]}
        </Text>
      )}

      {/* ================= Range Select ================= */}
      <Text style={styles.subHeading}>Date Range Selection</Text>

      <Calendar
        mode="range"
        rangeValue={range}
        onRangeChange={setRange}
        minDate="1900-01-01"
        maxDate={new Date().toISOString().split("T")[0]}
      />

      {range.start && (
        <Text style={styles.result}>
          Start: {range.start.toISOString().split("T")[0]}
        </Text>
      )}

      {range.end && (
        <Text style={styles.result}>
          End: {range.end.toISOString().split("T")[0]}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#FFFFFF",
  },
  heading: {
    fontSize: 22,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 20,
  },
  subHeading: {
    fontSize: 18,
    fontWeight: "500",
    marginTop: 20,
    marginBottom: 12,
  },
  result: {
    marginTop: 10,
    textAlign: "center",
    fontSize: 14,
    color: "#333",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `mode` | `'single'` \| `'range'` | `'single'` | Selection mode |
| `value` | `Date` | - | Selected date (for single mode) |
| `onChange` | `(date: Date) => void` | - | Callback when date changes (for single mode) |
| `rangeValue` | `DateRange` | `{ start: null, end: null }` | Selected date range (for range mode) |
| `onRangeChange` | `(range: DateRange) => void` | - | Callback when range changes (for range mode) |
| `minDate` | `string` | - | Minimum selectable date (YYYY-MM-DD format) |
| `maxDate` | `string` | - | Maximum selectable date (YYYY-MM-DD format) |
| `allowFutureDates` | `boolean` | `false` | Allow selection of future dates |
| `theme` | `CalendarTheme` | `{}` | Custom theme object for styling |

### DateRange Type

```tsx
interface DateRange {
  start: Date | null;
  end: Date | null;
}
```

### CalendarTheme Type

```tsx
interface CalendarTheme {
  primaryColor?: string;
  rangeColor?: string;
  backgroundColor?: string;
  textColor?: string;
  mutedTextColor?: string;
  disabledTextColor?: string;
  selectedTextColor?: string;
  pickerBackground?: string;
  borderRadius?: number;
  daySize?: number;
}
```

## Examples

### Single Date Selection

```tsx
const [date, setDate] = useState<Date | null>(null);

<Calendar
  mode="single"
  value={date ?? new Date()}
  onChange={setDate}
/>
```

### Date Range Selection

```tsx
const [range, setRange] = useState<DateRange>({ 
  start: null, 
  end: null 
});

<Calendar
  mode="range"
  rangeValue={range}
  onRangeChange={setRange}
/>
```

### With Date Limits

```tsx
<Calendar
  mode="single"
  value={date}
  onChange={setDate}
  minDate="1900-01-01"
  maxDate={new Date().toISOString().split("T")[0]}
  allowFutureDates={false}
/>
```

### Custom Theme

```tsx
<Calendar
  mode="single"
  value={date}
  onChange={setDate}
  theme={{
    primaryColor: "#2563EB",
    rangeColor: "#2563EB20",
    backgroundColor: "#FFFFFF",
    textColor: "#111827",
    mutedTextColor: "#6B7280",
    borderRadius: 12,
    daySize: 44,
  }}
/>
```

### Range with Highlighting

```tsx
<Calendar
  mode="range"
  rangeValue={range}
  onRangeChange={setRange}
  theme={{
    primaryColor: "#7C3AED",
    rangeColor: "#7C3AED30",
  }}
/>
```

## Features

- **Two Selection Modes**: Single date or date range selection
- **Month/Year Pickers**: Quick navigation via modal pickers
- **Date Range Highlighting**: Visual indication of selected range
- **Date Constraints**: Min/max date and future date restrictions
- **Customizable Theming**: Full control over colors and styling
- **Smooth Navigation**: Previous/next month navigation
- **Disabled Dates**: Visual indication of non-selectable dates
- **No Dependencies**: Self-contained component
- **TypeScript Support**: Full TypeScript types included

## Date Format

All date strings should be in **YYYY-MM-DD** format:

```tsx
minDate="1900-01-01"
maxDate="2024-12-31"
```

## Range Selection Behavior

1. **First Click**: Sets the start date
2. **Second Click**: 
   - If after start date: Sets end date
   - If before start date: Resets and sets new start date
3. **Range Highlighting**: Days between start and end are highlighted

## Notes

- The calendar automatically handles month boundaries
- Disabled dates are visually distinct and non-interactive
- When `allowFutureDates` is false, dates after today are disabled
- Month and year pickers open in modal overlays
- The calendar syncs with external `value` changes in single mode
- Range mode requires both `rangeValue` and `onRangeChange` props
- Theme values are merged with defaults
- The component uses a 6-row grid to display all days
- Days from previous/next month are shown as empty cells
- Selected dates are highlighted with the primary color
- Range dates are highlighted with a semi-transparent background



---

# Calender (deprecated)

> Deprecated alias for the Calendar component. Use `calendar` instead.

Source: https://expo-ui.thunderdevelops.in/docs/components/calender

> ⚠️ **Deprecated.** The `calender` spelling is a typo. Use [`calendar`](./calendar) instead. This alias will be removed in **v2.0.0**.

## Migration

```diff
- npx expo-app-ui add calender
+ npx expo-app-ui add calendar
```

```diff
- import Calendar from "@/components/ui/calender";
+ import Calendar from "@/components/ui/calendar";
```

The `calender` template still installs (and re-exports the new `calendar` component) so existing projects continue to work, but you'll see a development-mode warning until you migrate.

See the full [Calendar docs](./calendar) for usage and props.


---

# Checkbox

> Accessible checkbox with optional indeterminate state and label support.

Source: https://expo-ui.thunderdevelops.in/docs/components/checkbox

## Installation

```bash
npx expo-app-ui add checkbox
```

## Usage

```tsx
import Checkbox from "@/components/ui/checkbox";
import { useState } from "react";

const [v, setV] = useState(false);
<Checkbox value={v} onValueChange={setV} label="Accept terms" />
```

## Props

| Prop                 | Type                       | Default     | Description                       |
| -------------------- | -------------------------- | ----------- | --------------------------------- |
| `value`              | `boolean`                  | required    | Checked state                     |
| `onValueChange`      | `(v: boolean) => void`     | required    | Change handler                    |
| `label`              | `string`                   | -           | Optional label text               |
| `disabled`           | `boolean`                  | `false`     | Disable interaction               |
| `size`               | `'sm' \| 'md' \| 'lg'`     | `'md'`      | Checkbox size                     |
| `color`              | `string`                   | `'#2563EB'` | Checked color                     |
| `borderColor`        | `string`                   | `'#9CA3AF'` | Unchecked border                  |
| `uncheckedBg`        | `string`                   | `'transparent'` | Unchecked background          |
| `indeterminate`      | `boolean`                  | `false`     | Show indeterminate state          |
| `accessibilityLabel` | `string`                   | label       | Screen-reader label               |

## Accessibility

- `accessibilityRole="checkbox"`
- `accessibilityState.checked` is `true`, `false`, or `'mixed'` for indeterminate


---

# Custom Modal

> An animated modal component with backdrop, bottom sheet support, and smooth animations for Expo React Native. Learn how to use CustomModal with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/custom-modal

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/custom-modal-example.gif" 
    alt="Custom Modal Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add custom-modal
```

## Basic Usage

### Centered Modal

```tsx
import CustomModal from "@/components/ui/custom-modal";
import { useState } from "react";
import { View, Text } from "react-native";

export default function MyComponent() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button onPress={() => setVisible(true)} title="Open Modal" />
      
      <CustomModal
        visible={visible}
        onClose={() => setVisible(false)}
      >
        <View style={{ padding: 20 }}>
          <Text>Modal Content</Text>
          <Button 
            title="Close" 
            onPress={() => setVisible(false)} 
          />
        </View>
      </CustomModal>
    </>
  );
}
```

### Bottom Sheet Modal

Create a bottom sheet by setting `justifyContent: "flex-end"` in the `style` prop:

```tsx
import CustomModal from "@/components/ui/custom-modal";
import CustomText from "@/components/ui/custom-text";
import Button from "@/components/ui/button";
import { useState } from "react";
import { StyleSheet, View } from "react-native";

export default function Index() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.container}>
      <CustomText fontSize={30} color="black">
        Home Screen
      </CustomText>

      <Button title="Open Bottom Sheet" onPress={() => setVisible(true)} />

      <CustomModal
        visible={visible}
        onClose={() => setVisible(false)}
        style={styles.bottomSheetContainer}
        modalStyle={styles.bottomSheet}
      >
        {/* Handle */}
        <View style={styles.handle} />

        <CustomText fontSize={22} style={styles.title}>
          Bottom Sheet Modal
        </CustomText>

        <CustomText style={styles.description}>
          This is a clean, modern bottom sheet modal. You can put forms,
          confirmations, or any content here.
        </CustomText>

        <View style={styles.actions}>
          <Button title="Cancel" onPress={() => setVisible(false)} />
          <Button title="Confirm" onPress={() => setVisible(false)} />
        </View>
      </CustomModal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  bottomSheetContainer: {
    justifyContent: "flex-end",
  },
  bottomSheet: {
    paddingHorizontal: 20,
    paddingBottom: 24,
    paddingTop: 12,
  },
  handle: {
    width: 40,
    height: 5,
    borderRadius: 3,
    backgroundColor: "#D1D5DB",
    alignSelf: "center",
    marginBottom: 12,
  },
  title: {
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 8,
  },
  description: {
    textAlign: "center",
    color: "#6B7280",
    marginBottom: 20,
  },
  actions: {
    gap: 12,
  },
});
```

## Customization Examples

### Custom Colors

```tsx
<CustomModal
  visible={visible}
  onClose={() => setVisible(false)}
  backgroundColor="#000000"
  backdropColor="rgba(0, 0, 0, 0.8)"
  borderRadius={20}
>
  <Text style={{ color: "#FFFFFF" }}>Dark Modal</Text>
</CustomModal>
```

### No Backdrop

```tsx
<CustomModal
  visible={visible}
  onClose={() => setVisible(false)}
  noBackdrop
  style={{ justifyContent: "flex-end" }}
>
  <Text>Modal without backdrop</Text>
</CustomModal>
```

### Prevent Backdrop Touch from Closing

By default, tapping the backdrop closes the modal. To prevent this:

```tsx
<CustomModal
  visible={visible}
  onClose={() => setVisible(false)}
  preventBackgroundTouchEvent={true}
>
  <Text>Modal that doesn't close on backdrop touch</Text>
</CustomModal>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | Required | Controls modal visibility |
| `onClose` | `() => void` | Required | Callback when modal should close |
| `preventBackgroundTouchEvent` | `boolean` | `false` | If `true`, prevents backdrop touch from closing modal. By default, backdrop touch closes the modal. |
| `children` | `React.ReactNode` | Required | Modal content |
| `style` | `StyleProp<ViewStyle>` | - | Style for root container. Set `justifyContent: "flex-end"` for bottom sheet. |
| `modalStyle` | `StyleProp<ViewStyle>` | - | Style for modal content box |
| `noBackdrop` | `boolean` | `false` | Hide backdrop completely |
| `backgroundColor` | `string` | `"#FFFFFF"` | Modal background color |
| `backdropColor` | `string` | `"rgba(0, 0, 0, 0.5)"` | Backdrop color |
| `borderRadius` | `number` | `15` | Border radius for modal |

## Features

- **Smooth Animations**: Built with React Native Reanimated for 60fps animations
- **Bottom Sheet Support**: Automatically detects bottom sheet style and adjusts behavior
- **Keyboard Handling**: Automatically moves bottom sheet up when keyboard appears
- **Android Back Button**: Handles Android hardware back button to close modal
- **Customizable**: Full control over colors, styling, and behavior
- **Backdrop Touch**: By default, tapping backdrop closes the modal (can be disabled)
- **No Dependencies**: Uses black and white defaults - no theme dependencies required

## Notes

- The modal automatically detects bottom sheet style when `justifyContent: "flex-end"` is set in the `style` prop
- Bottom sheets automatically handle keyboard appearance and adjust position accordingly
- The modal uses React Native Reanimated for smooth animations
- All styling uses black and white defaults - no theme dependencies required


---

# Custom Text

> A customizable Text component with font, color, and spacing props for Expo React Native. Learn how to use CustomText with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/custom-text

## Installation

```bash
npx expo-app-ui add custom-text
```

:::note
This will automatically add required dependencies: theme.
:::

## Usage

```tsx
import CustomText from "@/components/ui/custom-text";

<CustomText>Default text</CustomText>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'body' \| 'caption' | 'body' | Text variant |
| color | string | 'primary' | Text color from theme |
| size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Text size |
| weight | 'light' \| 'regular' \| 'medium' \| 'semibold' \| 'bold' | 'regular' | Font weight |
| numberOfLines | number | undefined | Maximum number of lines |
| ellipsizeMode | 'head' \| 'middle' \| 'tail' \| 'clip' | 'tail' | How to truncate text |

## Examples

### Basic Usage

```tsx
<CustomText>Default text</CustomText>
```

### Headings

```tsx
<CustomText variant="h1">Heading 1</CustomText>
<CustomText variant="h2">Heading 2</CustomText>
```

### Colors

```tsx
<CustomText color="primary">Primary text</CustomText>
<CustomText color="secondary">Secondary text</CustomText>
```

## Features

- Multiple text variants
- Customizable colors
- Font weight options
- Text truncation support



---

# Dialog

> Confirmation and alert dialog with title, description, and configurable actions.

Source: https://expo-ui.thunderdevelops.in/docs/components/dialog

## Installation

```bash
npx expo-app-ui add dialog
```

## Usage

```tsx
import Dialog from "@/components/ui/dialog";
import { useState } from "react";

const [open, setOpen] = useState(false);

<Dialog
  visible={open}
  onDismiss={() => setOpen(false)}
  title="Delete item?"
  description="This action cannot be undone."
  actions={[
    { label: "Cancel", onPress: () => setOpen(false), variant: "secondary" },
    { label: "Delete", onPress: handleDelete, variant: "danger" },
  ]}
/>
```

## Props

| Prop                  | Type                                | Default              | Description                       |
| --------------------- | ----------------------------------- | -------------------- | --------------------------------- |
| `visible`             | `boolean`                           | required             | Show/hide                         |
| `onDismiss`           | `() => void`                        | required             | Dismiss handler                   |
| `title`               | `string`                            | -                    | Dialog title                      |
| `description`         | `string`                            | -                    | Dialog body text                  |
| `children`            | `ReactNode`                         | -                    | Custom content                    |
| `actions`             | `DialogAction[]`                    | -                    | Footer action buttons             |
| `dismissOnBackdrop`   | `boolean`                           | `true`               | Tap backdrop to close             |
| `dismissOnBackPress`  | `boolean`                           | `true`               | Android back to close             |
| `backgroundColor`     | `string`                            | `'#FFFFFF'`          | Dialog bg                         |
| `backdropColor`       | `string`                            | `'rgba(0,0,0,0.5)'`  | Backdrop color                    |
| `borderRadius`        | `number`                            | `14`                 | Dialog radius                     |

`DialogAction`: `{ label: string; onPress: () => void; variant?: 'primary' | 'secondary' | 'danger'; disabled?: boolean }`.

## Accessibility

- `accessibilityRole="alert"` on the dialog
- `accessibilityViewIsModal` on the modal
- Native Android back press is handled when `dismissOnBackPress` is true


---

# Loading Bar & Top Loading Bar Context

> A top loading bar component with React Context for managing loading state across your Expo React Native application. Complete setup guide with examples.

Source: https://expo-ui.thunderdevelops.in/docs/components/loading-bar

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/top-loading-bar-example.gif" 
    alt="Top Loading Bar Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add top-loading-bar
```

:::note
This command will automatically add both the `loading-bar` component and `top-loading-bar-context` context to your project, as they work together.
:::

## Step-by-Step Setup

### Step 1: Wrap Your App with LoadingProvider

Update your root `_layout.tsx` file to wrap your app with the `LoadingProvider`:

```tsx
import { LoadingProvider } from "@/context/top-loading-bar-context";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <LoadingProvider>
      <Stack />
    </LoadingProvider>
  );
}
```

**Optional:** You can customize the loading bar color:

```tsx
<LoadingProvider color="#007AFF">
  <Stack />
</LoadingProvider>
```

### Step 2: Use the Hook in Your Components

Now you can use the `useTopLoadingBar` hook in any component within your app:

```tsx
import { useTopLoadingBar } from "@/context/top-loading-bar-context";

const { showLoading, hideLoading } = useTopLoadingBar();

// Show loading bar
showLoading();

// Hide loading bar
hideLoading();
```

## Complete Example

Here's a complete example showing how to use the top loading bar in a screen:

```tsx
import CustomText from "@/components/ui/custom-text";
import { useTopLoadingBar } from "@/context/top-loading-bar-context";
import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";

export default function Index() {
  const { showLoading, hideLoading } = useTopLoadingBar();

  const handleStartLoading = () => {
    showLoading();
    // Simulate API call
    setTimeout(() => {
      hideLoading();
    }, 3000);
  };

  return (
    <View style={styles.container}>
      <CustomText fontSize={28} style={styles.title}>
        Top Loading Bar Demo
      </CustomText>

      <TouchableOpacity style={styles.button} onPress={handleStartLoading}>
        <CustomText color="white" fontSize={16}>
          Start Loading (3s)
        </CustomText>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.button, styles.stopButton]}
        onPress={hideLoading}
      >
        <CustomText color="white" fontSize={16}>
          Stop Loading
        </CustomText>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
    backgroundColor: "#FFFFFF",
  },
  title: {
    textAlign: "center",
    marginBottom: 40,
  },
  button: {
    backgroundColor: "#007AFF",
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: "center",
    marginBottom: 16,
  },
  stopButton: {
    backgroundColor: "#FF3B30",
  },
});
```

## Setup in _layout.tsx

Make sure to wrap your app with `LoadingProvider` in your root layout file:

```tsx
import { LoadingProvider } from "@/context/top-loading-bar-context";
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <LoadingProvider>
      <Stack />
    </LoadingProvider>
  );
}
```

## Component API

### LoadingBar Component

The `LoadingBar` component is automatically rendered by the `LoadingProvider`. You typically don't need to use it directly.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `string` | `"#007AFF"` | Loading bar color |

### LoadingProvider

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `string` | `"#007AFF"` | Loading bar color |
| `children` | `React.ReactNode` | Required | App content (usually your navigation stack) |

## Hook API

### useTopLoadingBar

Returns an object with the following methods:

| Method | Type | Description |
|--------|------|-------------|
| `showLoading()` | `() => void` | Shows the loading bar at the top of the screen |
| `hideLoading()` | `() => void` | Hides the loading bar |

## Examples

### Basic Usage

```tsx
import { useTopLoadingBar } from "@/context/top-loading-bar-context";

function MyComponent() {
  const { showLoading, hideLoading } = useTopLoadingBar();

  const handleApiCall = async () => {
    showLoading();
    try {
      await fetchData();
    } finally {
      hideLoading();
    }
  };

  return <Button onPress={handleApiCall} title="Load Data" />;
}
```

### With Custom Color

```tsx
// In _layout.tsx
<LoadingProvider color="#16A34A">
  <Stack />
</LoadingProvider>
```

### Multiple Loading States

```tsx
function MyComponent() {
  const { showLoading, hideLoading } = useTopLoadingBar();

  const handleMultipleActions = async () => {
    showLoading();
    
    await action1();
    await action2();
    await action3();
    
    hideLoading();
  };

  return <Button onPress={handleMultipleActions} title="Process" />;
}
```

### With Error Handling

```tsx
const handleApiCall = async () => {
  showLoading();
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('Failed');
    // Handle success
  } catch (error) {
    // Handle error
  } finally {
    hideLoading();
  }
};
```

## Features

- **Global State Management**: Access loading state from any component
- **Easy-to-Use Hook API**: Simple `showLoading()` and `hideLoading()` methods
- **Customizable Color**: Set your preferred loading bar color
- **Automatic Integration**: Loading bar component is automatically included
- **Smooth Animations**: Built with React Native Reanimated for 60fps animations
- **Top Position**: Always appears at the top of the screen with high z-index
- **No Dependencies**: Self-contained context and component
- **Infinite Loop Animation**: Continuous smooth scrolling animation

## Notes

- The `LoadingProvider` must wrap your entire app (usually in `_layout.tsx`)
- The loading bar appears at the top of the screen with `position: absolute` and `zIndex: 9999`
- The loading bar automatically animates in and out
- You can call `showLoading()` and `hideLoading()` from any component within the provider
- The default color is `#007AFF` (iOS blue), but you can customize it
- The loading bar uses React Native Reanimated for smooth animations
- Make sure to call `hideLoading()` after your async operations complete (use `finally` block for reliability)
- Both `loading-bar` component and `top-loading-bar-context` are required - they work together as a complete solution


---

# Marquee

> A smooth scrolling marquee component (also known as scroll text animation) for displaying continuous text or content in Expo React Native. Learn how to use Marquee with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/marquee

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/marquee-example.gif" 
    alt="Marquee Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add marquee
```

:::note
The marquee component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import Marquee from "@/components/ui/marquee";

<Marquee duration={2000}>
  <Text>Scrolling text content</Text>
</Marquee>
```

## Complete Example

Here's a complete example showing how to use the marquee component:

```tsx
import CustomText from "@/components/ui/custom-text";
import Marquee from "@/components/ui/marquee";
import { useState } from "react";
import { StyleSheet, View } from "react-native";

export default function Index() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View style={styles.marqueeWrapper}>
        <Marquee reverse duration={12000} style={styles.marqueeContainer}>
          <CustomText
            color={"black"}
            fontSize={30}
          >
            This is Example Marquee in reverse -
          </CustomText>
        </Marquee>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  marqueeWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 10,
    paddingVertical: 6,
  },
  marqueeContainer: {
    width: "100%",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `React.ReactNode` | Required | Content to scroll (e.g., `<Text>` or `<Image>`) |
| `duration` | `number` | `2000` | Duration of one full animation cycle in milliseconds. Higher number means slower speed. |
| `reverse` | `boolean` | `false` | Reverse the direction of the scroll (right to left) |
| `style` | `StyleProp<ViewStyle>` | - | Optional styling for the container View |

## Examples

### Basic Marquee

```tsx
import Marquee from "@/components/ui/marquee";
import CustomText from "@/components/ui/custom-text";

<Marquee>
  <CustomText fontSize={20}>Scrolling text content</CustomText>
</Marquee>
```

### Reverse Direction

```tsx
<Marquee reverse duration={12000}>
  <CustomText fontSize={30} color="black">
    This is Example Marquee in reverse -
  </CustomText>
</Marquee>
```

### Custom Duration

```tsx
{/* Slower scroll (longer duration) */}
<Marquee duration={5000}>
  <CustomText>Slow scrolling text</CustomText>
</Marquee>

{/* Faster scroll (shorter duration) */}
<Marquee duration={1000}>
  <CustomText>Fast scrolling text</CustomText>
</Marquee>
```

### With Images

```tsx
<Marquee duration={3000}>
  <Image source={require('./logo.png')} style={{ width: 100, height: 50 }} />
</Marquee>
```

## Features

- **Smooth Continuous Scrolling**: Seamless infinite scroll animation
- **Configurable Speed**: Control scroll speed with `duration` prop (higher = slower)
- **Bidirectional Scrolling**: Support for both left-to-right and right-to-left (reverse)
- **60fps Performance**: Built with React Native Reanimated for smooth animations
- **Flexible Content**: Works with any React Native component (Text, Image, etc.)
- **Auto-Detection**: Automatically detects content width and creates seamless loops
- **No Dependencies**: Self-contained component with no external dependencies

## Notes

- The component automatically measures content width and creates enough clones for seamless scrolling
- Higher `duration` values result in slower scrolling speed
- The component only scrolls if content width exceeds container width
- Also known as "scroll text animation" or "ticker text"
- Built with React Native Reanimated for optimal performance


---

# OTP Input

> A customizable OTP (One-Time Password) input component with validation states, loading, success, and error states for Expo React Native. Learn how to use OTPInput with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/otp-input

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/otp-input-example.gif" 
    alt="OTP Input Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add otp-input
```

:::note
The OTP input component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import CustomOtpInput from "@/components/ui/otp-input";

<CustomOtpInput 
  length={6} 
  onChangeText={setOtp} 
  onSubmit={(otp) => verifyOTP(otp)} 
/>
```

## Complete Example

Here's a complete example showing how to use the OTP input component with validation states:

```tsx
import CustomText from "@/components/ui/custom-text";
import CustomOtpInput from "@/components/ui/otp-input";
import React, { useState } from "react";
import { Alert, StyleSheet, View } from "react-native";

export default function Index() {
  const [otp, setOtp] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const [isError, setIsError] = useState(false);

  const handleOtpChange = (value: string) => {
    setOtp(value);
    setIsError(false);
    setIsSuccess(false);
  };

  const handleSubmit = async (value: string) => {
    setIsLoading(true);

    // Simulate API verification
    setTimeout(() => {
      setIsLoading(false);

      if (value === "123456") {
        setIsSuccess(true);
        Alert.alert("Success", "OTP Verified Successfully!");
      } else {
        setIsError(true);
        Alert.alert("Error", "Invalid OTP");
      }
    }, 1500);
  };

  return (
    <View style={styles.container}>
      <CustomText fontSize={28} color="#175676" style={styles.title}>
        Verify OTP
      </CustomText>

      <CustomText fontSize={16} color="#666" style={styles.subtitle}>
        Enter the 6-digit code sent to your phone
      </CustomText>

      <CustomOtpInput
        length={6}
        value={otp}
        onChangeText={handleOtpChange}
        onSubmit={handleSubmit}
        isLoading={isLoading}
        isSuccess={isSuccess}
        isError={isError}
      />

      <CustomText fontSize={14} color="#999">
        OTP Value: {otp || "—"}
      </CustomText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
    backgroundColor: "#FFFFFF",
  },
  title: {
    textAlign: "center",
    marginBottom: 8,
  },
  subtitle: {
    textAlign: "center",
    marginBottom: 30,
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `length` | `number` | `6` | Number of OTP digits |
| `onChangeText` | `(otp: string) => void` | Required | Callback when OTP changes |
| `onSubmit` | `(otp: string) => void` | - | Callback when OTP is complete (all digits entered) |
| `autoFocus` | `boolean` | `true` | Auto focus first input on mount |
| `isLoading` | `boolean` | `false` | Show loading state (reduces opacity) |
| `isDisabled` | `boolean` | `false` | Disable all inputs |
| `isSuccess` | `boolean` | `false` | Show success state (green border) |
| `isError` | `boolean` | `false` | Show error state (red border, auto-clears after 3s) |
| `value` | `string` | - | Controlled value for OTP |
| `inputStyle` | `object` | - | Custom styles for input fields |
| `containerStyle` | `object` | - | Custom styles for container |
| `focusColor` | `string` | `"#4BA3C3"` | Border color when input is focused |
| `blurColor` | `string` | `"#E0E0E0"` | Border color when input is not focused |

## Examples

### Basic OTP Input

```tsx
import CustomOtpInput from "@/components/ui/otp-input";
import { useState } from "react";

const [otp, setOtp] = useState("");

<CustomOtpInput 
  length={6} 
  onChangeText={setOtp} 
  onSubmit={(otp) => console.log('OTP:', otp)} 
/>
```

### With Validation States

```tsx
<CustomOtpInput
  length={6}
  onChangeText={handleOtpChange}
  onSubmit={handleSubmit}
  isLoading={isVerifying}
  isSuccess={isVerified}
  isError={hasError}
/>
```

### Custom Length

```tsx
{/* 4-digit OTP */}
<CustomOtpInput length={4} onChangeText={setOtp} />

{/* 8-digit OTP */}
<CustomOtpInput length={8} onChangeText={setOtp} />
```

### Controlled Value

```tsx
<CustomOtpInput
  length={6}
  value={otp}
  onChangeText={setOtp}
  onSubmit={handleSubmit}
/>
```

### Custom Styling

```tsx
<CustomOtpInput
  length={6}
  onChangeText={setOtp}
  inputStyle={{
    width: 60,
    height: 70,
    fontSize: 28,
  }}
  focusColor="#2563EB"
  blurColor="#D1D5DB"
/>
```

## Features

- **Individual Input Fields**: Each digit has its own input field
- **Automatic Focus Management**: Auto-focuses next input when digit is entered
- **Smart Backspace Handling**: Moves to previous input on backspace
- **Validation States**: Support for loading, success, and error states
- **Auto-Submit**: Automatically calls `onSubmit` when all digits are entered
- **Controlled/Uncontrolled**: Supports both controlled (`value` prop) and uncontrolled modes
- **Keyboard Optimization**: Uses `number-pad` keyboard type
- **Auto-Complete Support**: Supports iOS/Android OTP auto-fill
- **Visual Feedback**: Color changes for focus, success, error, and loading states
- **No Dependencies**: Self-contained component with no external dependencies

## Notes

- The component automatically dismisses the keyboard when all digits are entered
- Error state automatically clears after 3 seconds
- Success state persists until manually cleared
- Loading state reduces opacity and disables inputs
- The component supports iOS and Android OTP auto-fill via `autoComplete="one-time-code"`
- Backspace automatically moves focus to the previous input if current input is empty
- All inputs are automatically selected when focused for easy replacement


---

# Profile Pic

> A profile picture component with fallback, loading state, and customizable styling for Expo React Native. Learn how to use ProfilePic with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/profile-pic

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/profile-pic-example.gif" 
    alt="Profile Pic Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add profile-pic
```

:::note
The profile pic component is self-contained and doesn't require any external dependencies. It uses `expo-image` for optimized image loading.
:::

## Usage

```tsx
import ProfilePic from "@/components/ui/profile-pic";

<ProfilePic source="https://example.com/avatar.jpg" username="John Doe" />
```

## Complete Example

Here's a complete example showing all profile pic features:

```tsx
import CustomText from "@/components/ui/custom-text";
import ProfilePic from "@/components/ui/profile-pic";
import React, { useState } from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";

export default function Index() {
  const [loading, setLoading] = useState(false);
  const toggleLoading = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 10000);
  };

  return (
    <View style={styles.container}>
      <CustomText fontSize={28} style={styles.title}>
        Profile Picture Examples
      </CustomText>

      {/* Default avatar with image */}
      <View style={styles.row}>
        <ProfilePic source="john.png" username="John" />
        <CustomText style={styles.label}>With Image</CustomText>
      </View>

      {/* No image → fallback initial */}
      <View style={styles.row}>
        <ProfilePic username="Alice" backgroundColor="black" />
        <CustomText style={styles.label}>Fallback Initial</CustomText>
      </View>

      {/* Custom size & border */}
      <View style={styles.row}>
        <ProfilePic
          username="Michael"
          width={80}
          height={80}
          borderWidth={2}
          borderColor="#175676"
          backgroundColor="#175676"
        />
        <CustomText style={styles.label}>Custom Size</CustomText>
      </View>

      {/* Loading state */}
      <View style={styles.row}>
        <ProfilePic
          username="Loading"
          width={70}
          height={70}
          isLoading={loading}
        />
        <CustomText style={styles.label}>Loading State</CustomText>
      </View>

      {/* Toggle loading */}
      <TouchableOpacity style={styles.button} onPress={toggleLoading}>
        <CustomText color="white">Toggle Loading</CustomText>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
    backgroundColor: "#FFFFFF",
  },
  title: {
    textAlign: "center",
    marginBottom: 40,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    gap: 16,
  },
  label: {
    fontSize: 16,
    color: "#333",
  },
  button: {
    marginTop: 30,
    backgroundColor: "#007AFF",
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: "center",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `source` | `string` | - | Image URL or path. If not provided, shows fallback initial |
| `username` | `string` | Required | Username for fallback initials (first letter will be displayed) |
| `width` | `number` | `50` | Image width |
| `height` | `number` | `50` | Image height |
| `borderRadius` | `number` | `50` | Border radius (50 = circle) |
| `borderWidth` | `number` | `1` | Border width |
| `borderColor` | `string` | `"#FFFFFF"` | Border color |
| `backgroundColor` | `string` | `"#000000"` | Background color for fallback initial |
| `isLoading` | `boolean` | `false` | Show loading indicator |
| `style` | `StyleProp<ViewStyle>` | - | Custom container styles |

## Examples

### With Image

```tsx
<ProfilePic source="https://example.com/avatar.jpg" username="John Doe" />
```

### Fallback to Initials

When no image is provided, the component automatically shows the first letter of the username:

```tsx
<ProfilePic username="Jane Smith" />
```

### Custom Size

```tsx
<ProfilePic
  username="Michael"
  width={80}
  height={80}
  borderRadius={40}
/>
```

### Custom Border

```tsx
<ProfilePic
  username="Alice"
  width={60}
  height={60}
  borderWidth={3}
  borderColor="#007AFF"
  backgroundColor="#007AFF"
/>
```

### Loading State

```tsx
<ProfilePic
  username="Loading"
  width={70}
  height={70}
  isLoading={true}
/>
```

### Circle Avatar

```tsx
{/* Default is circle (borderRadius: 50) */}
<ProfilePic username="John" width={50} height={50} />

{/* Square avatar */}
<ProfilePic username="John" width={50} height={50} borderRadius={10} />
```

### With Environment Variable URL

The component supports `EXPO_PUBLIC_API_URL` for image paths:

```tsx
{/* If EXPO_PUBLIC_API_URL is set, image will be loaded from: */}
{/* ${EXPO_PUBLIC_API_URL}/avatar/john.png */}
<ProfilePic source="john.png" username="John" />
```

## Features

- **Automatic Fallback**: Shows user initial when image is not available
- **Loading State**: Built-in loading indicator
- **Optimized Images**: Uses `expo-image` for better performance and blurhash support
- **Customizable**: Full control over size, border, colors, and styling
- **Blurhash Placeholder**: Supports blurhash for smooth image loading
- **No Dependencies**: Self-contained component (only requires expo-image)
- **Flexible Sizing**: Support for any width/height combination
- **Border Support**: Customizable border width and color

## Notes

- The component uses `expo-image` for optimized image loading
- If `source` is not provided, the component automatically shows the first letter of `username`
- The default `borderRadius` of 50 creates a perfect circle
- Loading state shows an `ActivityIndicator` in the center
- The component supports blurhash placeholders for smooth loading transitions
- Image paths can use `EXPO_PUBLIC_API_URL` environment variable if set
- The fallback initial is always white text on the specified background color
- All styling uses black and white defaults - no theme dependencies required


---

# Progress Bar

> A customizable progress bar component with variants, labels, and count support for Expo React Native. Learn how to use ProgressBar with examples and API documentation.

Source: https://expo-ui.thunderdevelops.in/docs/components/progress-bar

<div style={{ textAlign: 'center', margin: '20px 0' }}>
  <img 
    src="/examples/progress-bar-example.gif" 
    alt="Progress Bar Component Example" 
    style={{ maxWidth: '150px', width: '100%', height: 'auto', borderRadius: '8px' }}
  />
</div>

## Installation

```bash
npx expo-app-ui add progress-bar
```

:::note
The progress bar component is self-contained and doesn't require any external dependencies.
:::

## Usage

```tsx
import CustomProgressBar from "@/components/ui/progress-bar";

<CustomProgressBar progress={50} />
```

## Complete Example

Here's a complete example showing all progress bar features:

```tsx
import CustomText from "@/components/ui/custom-text";
import CustomProgressBar from "@/components/ui/progress-bar";
import React, { useState } from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";

export default function Index() {
  const [progress, setProgress] = useState(30);
  const [currentCount, setCurrentCount] = useState(2);
  const totalCount = 10;

  const increaseProgress = () => {
    setProgress((prev) => Math.min(prev + 10, 100));
  };

  const resetProgress = () => {
    setProgress(0);
  };

  const increaseCount = () => {
    setCurrentCount((prev) => Math.min(prev + 1, totalCount));
  };

  const resetCount = () => {
    setCurrentCount(0);
  };

  return (
    <View style={styles.container}>
      <CustomText fontSize={28} style={styles.title}>
        Progress Bar Examples
      </CustomText>

      {/* Normal Progress */}
      <View style={styles.section}>
        <CustomProgressBar label="Upload Progress" progress={progress} />

        <View style={styles.buttonRow}>
          <TouchableOpacity style={styles.button} onPress={increaseProgress}>
            <CustomText color="white">+10%</CustomText>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.button, styles.resetButton]}
            onPress={resetProgress}
          >
            <CustomText color="white">Reset</CustomText>
          </TouchableOpacity>
        </View>
      </View>

      {/* Count Variant */}
      <View style={styles.section}>
        <CustomProgressBar
          label="Steps Completed"
          variant="count"
          count={totalCount}
          currentCount={currentCount}
        />

        <View style={styles.buttonRow}>
          <TouchableOpacity style={styles.button} onPress={increaseCount}>
            <CustomText color="white">+1 Step</CustomText>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.button, styles.resetButton]}
            onPress={resetCount}
          >
            <CustomText color="white">Reset</CustomText>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
    backgroundColor: "#FFFFFF",
  },
  title: {
    textAlign: "center",
    marginBottom: 40,
  },
  section: {
    marginBottom: 50,
    alignItems: "center",
  },
  buttonRow: {
    flexDirection: "row",
    marginTop: 16,
    gap: 12,
  },
  button: {
    backgroundColor: "#228B22",
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  resetButton: {
    backgroundColor: "#555",
  },
});
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `progress` | `number` | - | Progress percentage (0-100). Required for `normal` variant |
| `width` | `number` | `300` | Progress bar width |
| `height` | `number` | `20` | Progress bar height |
| `color` | `string` | `"#228B22"` | Progress bar fill color |
| `backgroundColor` | `string` | `"#e0e0e0"` | Progress bar background color |
| `label` | `string` | `""` | Optional label text above the progress bar |
| `variant` | `'normal'` \| `'count'` | `'normal'` | Progress bar variant |
| `count` | `number` | `1` | Total count (required for `count` variant) |
| `currentCount` | `number` | `0` | Current count (required for `count` variant) |

## Examples

### Basic Progress Bar

```tsx
<CustomProgressBar progress={50} />
```

### With Label

```tsx
<CustomProgressBar 
  label="Upload Progress" 
  progress={75} 
/>
```

### Custom Size

```tsx
<CustomProgressBar 
  progress={60}
  width={400}
  height={30}
/>
```

### Custom Colors

```tsx
<CustomProgressBar 
  progress={80}
  color="#2563EB"
  backgroundColor="#E5E7EB"
/>
```

### Count Variant

The count variant displays progress as a fraction (e.g., "2/10"):

```tsx
<CustomProgressBar
  variant="count"
  count={10}
  currentCount={7}
  label="Steps Completed"
/>
```

### Animated Progress

The progress bar automatically animates when the progress value changes:

```tsx
const [progress, setProgress] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
  }, 500);
  return () => clearInterval(interval);
}, []);

<CustomProgressBar progress={progress} label="Loading..." />
```

### Dynamic Count Progress

```tsx
const [currentStep, setCurrentStep] = useState(0);
const totalSteps = 5;

<CustomProgressBar
  variant="count"
  count={totalSteps}
  currentCount={currentStep}
  label="Processing Steps"
/>
```

## Features

- **Two Variants**: Normal (percentage) and count (fraction) variants
- **Smooth Animations**: Automatically animates when progress changes
- **Customizable Styling**: Control width, height, colors, and labels
- **Count Display**: Shows current/total count overlay for count variant
- **Label Support**: Optional label text above the progress bar
- **No Dependencies**: Self-contained component with no external dependencies
- **Responsive**: Works with any width/height combination
- **Animated Transitions**: Smooth progress updates with React Native Animated API

## Notes

- Progress values are automatically clamped between 0 and 100
- The count variant calculates progress as `(currentCount / count) * 100`
- The progress bar uses React Native's `Animated` API for smooth transitions
- Animation duration is 500ms by default
- The count variant displays numbers on the progress bar (current/total)
- For count variant, make sure `count > 0` to avoid division by zero
- All styling uses black and white defaults - no theme dependencies required
- The component uses native `View` and `Text` components (no custom dependencies)


---

# Radio Group

> Single-select group of radio options with horizontal or vertical layout.

Source: https://expo-ui.thunderdevelops.in/docs/components/radio-group

## Installation

```bash
npx expo-app-ui add radio-group
```

## Usage

```tsx
import RadioGroup from "@/components/ui/radio-group";
import { useState } from "react";

const [plan, setPlan] = useState<"free" | "pro">("free");

<RadioGroup
  value={plan}
  onChange={setPlan}
  options={[
    { label: "Free", value: "free" },
    { label: "Pro",  value: "pro" },
  ]}
/>
```

## Props

| Prop          | Type                                          | Default       | Description                              |
| ------------- | --------------------------------------------- | ------------- | ---------------------------------------- |
| `options`     | `RadioOption<T>[]`                            | required      | Available options                        |
| `value`       | `T \| null`                                   | required      | Selected value                           |
| `onChange`    | `(v: T) => void`                              | required      | Change handler                           |
| `direction`   | `'vertical' \| 'horizontal'`                  | `'vertical'`  | Layout direction                         |
| `size`        | `'sm' \| 'md' \| 'lg'`                        | `'md'`        | Radio size                               |
| `color`       | `string`                                      | `'#2563EB'`   | Selected color                           |
| `borderColor` | `string`                                      | `'#9CA3AF'`   | Unselected border                        |

`RadioOption` shape: `{ label: string; value: T; disabled?: boolean }`.

## Accessibility

- Container: `accessibilityRole="radiogroup"`
- Each option: `accessibilityRole="radio"` with `accessibilityState.selected`


---

# Skeleton

> Animated placeholder for loading states. Shapes for lines, circles, and rectangles.

Source: https://expo-ui.thunderdevelops.in/docs/components/skeleton

## Installation

```bash
npx expo-app-ui add skeleton
```

## Usage

```tsx
import Skeleton from "@/components/ui/skeleton";

<Skeleton width={200} height={16} />
<Skeleton circle size={48} />
<Skeleton width="100%" height={120} borderRadius={12} />
```

## Props

| Prop             | Type                  | Default     | Description                      |
| ---------------- | --------------------- | ----------- | -------------------------------- |
| `width`          | `DimensionValue`      | `'100%'`    | Width                            |
| `height`         | `DimensionValue`      | `16`        | Height                           |
| `borderRadius`   | `number`              | `6`         | Corner radius                    |
| `circle`         | `boolean`             | `false`     | Render as a circle               |
| `size`           | `number`              | `40`        | Circle diameter                  |
| `baseColor`      | `string`              | `'#E5E7EB'` | Base color                       |
| `highlightColor` | `string`              | `'#F3F4F6'` | Highlight color                  |
| `duration`       | `number`              | `1100`      | Pulse cycle in ms                |
| `animate`        | `boolean`             | `true`      | Disable to render static         |
| `style`          | `StyleProp<ViewStyle>`| -           | Container override               |

## Accessibility

- `accessibilityRole="progressbar"`
- `accessibilityLabel="Loading"`


---

# Slider

> Touch-driven value slider with optional stepping and accessibility increment/decrement support.

Source: https://expo-ui.thunderdevelops.in/docs/components/slider

## Installation

```bash
npx expo-app-ui add slider
```

## Usage

```tsx
import Slider from "@/components/ui/slider";
import { useState } from "react";

const [v, setV] = useState(50);

<Slider
  value={v}
  onValueChange={setV}
  minimumValue={0}
  maximumValue={100}
  step={1}
/>
```

## Props

| Prop                       | Type                       | Default     | Description                              |
| -------------------------- | -------------------------- | ----------- | ---------------------------------------- |
| `value`                    | `number`                   | required    | Current value                            |
| `onValueChange`            | `(v: number) => void`      | required    | Continuous change handler                |
| `onSlidingComplete`        | `(v: number) => void`      | -           | Called on release                        |
| `minimumValue`             | `number`                   | `0`         | Min value                                |
| `maximumValue`             | `number`                   | `100`       | Max value                                |
| `step`                     | `number`                   | `0`         | Snap step (`0` = continuous)             |
| `disabled`                 | `boolean`                  | `false`     | Disable interaction                      |
| `trackHeight`              | `number`                   | `4`         | Track thickness                          |
| `thumbSize`                | `number`                   | `20`        | Thumb diameter                           |
| `minimumTrackTintColor`    | `string`                   | `'#2563EB'` | Filled track color                       |
| `maximumTrackTintColor`    | `string`                   | `'#E5E7EB'` | Empty track color                        |
| `thumbTintColor`           | `string`                   | `'#FFFFFF'` | Thumb fill                               |

## Accessibility

- `accessibilityRole="adjustable"`
- `accessibilityValue={{ min, max, now }}`
- Supports VoiceOver/TalkBack increment/decrement actions


---

# Snackbar

> Bottom-anchored notification with an optional action button. Material Design style.

Source: https://expo-ui.thunderdevelops.in/docs/components/snackbar

## Installation

```bash
npx expo-app-ui add snackbar
```

## Usage

```tsx
import Snackbar from "@/components/ui/snackbar";

<Snackbar
  visible={show}
  message="Item moved to trash"
  action={{ label: "Undo", onPress: handleUndo }}
  onDismiss={() => setShow(false)}
/>
```

## Props

| Prop                | Type                              | Default       | Description                   |
| ------------------- | --------------------------------- | ------------- | ----------------------------- |
| `visible`           | `boolean`                         | required      | Show/hide                     |
| `message`           | `string`                          | required      | Snackbar text                 |
| `action`            | `{ label, onPress }`              | -             | Optional action button        |
| `duration`          | `number`                          | `4000`        | Auto-dismiss ms (`0` sticky)  |
| `onDismiss`         | `() => void`                      | -             | Called after fade-out         |
| `backgroundColor`   | `string`                          | `'#1F2937'`   | Bar background                |
| `textColor`         | `string`                          | `'#FFFFFF'`   | Message color                 |
| `actionColor`       | `string`                          | `'#60A5FA'`   | Action label color            |
| `bottomOffset`      | `number`                          | `24`          | Bottom inset                  |

## Accessibility

- `accessibilityRole="alert"` with `accessibilityLiveRegion="polite"`
- Action button is a focusable `Pressable` with `accessibilityRole="button"`


---

# Switch

> Animated toggle switch with three sizes and accessible switch role.

Source: https://expo-ui.thunderdevelops.in/docs/components/switch

## Installation

```bash
npx expo-app-ui add switch
```

## Usage

```tsx
import Switch from "@/components/ui/switch";
import { useState } from "react";

const [on, setOn] = useState(false);
<Switch value={on} onValueChange={setOn} />
```

## Props

| Prop               | Type                       | Default     | Description                |
| ------------------ | -------------------------- | ----------- | -------------------------- |
| `value`            | `boolean`                  | required    | Current state              |
| `onValueChange`    | `(v: boolean) => void`     | required    | Change handler             |
| `disabled`         | `boolean`                  | `false`     | Disable interaction        |
| `size`             | `'sm' \| 'md' \| 'lg'`     | `'md'`      | Switch size                |
| `trackColorOn`     | `string`                   | `'#16A34A'` | Track color when on        |
| `trackColorOff`    | `string`                   | `'#D1D5DB'` | Track color when off       |
| `thumbColor`       | `string`                   | `'#FFFFFF'` | Thumb color                |
| `accessibilityLabel`| `string`                  | -           | Screen-reader label        |

## Accessibility

- `accessibilityRole="switch"`
- `accessibilityState={{ checked, disabled }}`
- 8px hit slop for easier touch targets


---

# Tabs

> Three tab styles (underline, pills, segmented) with animated indicator and scrollable variant.

Source: https://expo-ui.thunderdevelops.in/docs/components/tabs

## Installation

```bash
npx expo-app-ui add tabs
```

## Usage

```tsx
import Tabs from "@/components/ui/tabs";
import { useState } from "react";

const [tab, setTab] = useState<"all" | "unread" | "archived">("all");

<Tabs
  value={tab}
  onChange={setTab}
  items={[
    { key: "all",      label: "All" },
    { key: "unread",   label: "Unread" },
    { key: "archived", label: "Archived" },
  ]}
  variant="underline"
/>
```

## Props

| Prop              | Type                                            | Default        | Description                       |
| ----------------- | ----------------------------------------------- | -------------- | --------------------------------- |
| `items`           | `TabItem<T>[]`                                  | required       | Tabs to render                    |
| `value`           | `T`                                             | required       | Selected key                      |
| `onChange`        | `(key: T) => void`                              | required       | Change handler                    |
| `variant`         | `'underline' \| 'pills' \| 'segmented'`         | `'underline'`  | Visual style                      |
| `scrollable`      | `boolean`                                       | `false`        | Horizontal scroll                 |
| `activeColor`     | `string`                                        | `'#2563EB'`    | Active label / indicator color    |
| `inactiveColor`   | `string`                                        | `'#6B7280'`    | Inactive label color              |
| `pillBackground`  | `string`                                        | `'#F3F4F6'`    | Background for `segmented`        |

`TabItem`: `{ key: T; label: string; disabled?: boolean }`.

## Accessibility

- Container: `accessibilityRole="tablist"`
- Each tab: `accessibilityRole="tab"` with `accessibilityState.selected`


---

# Toast

> Lightweight notification that appears from the top or bottom and auto-dismisses.

Source: https://expo-ui.thunderdevelops.in/docs/components/toast

## Installation

```bash
npx expo-app-ui add toast
```

## Usage

```tsx
import Toast from "@/components/ui/toast";
import { useState } from "react";

const [show, setShow] = useState(false);

<Toast
  visible={show}
  onHide={() => setShow(false)}
  message="Saved successfully"
  variant="success"
  position="top"
  duration={3000}
/>
```

## Props

| Prop             | Type                                                     | Default    | Description                       |
| ---------------- | -------------------------------------------------------- | ---------- | --------------------------------- |
| `visible`        | `boolean`                                                | required   | Show/hide                         |
| `message`        | `string`                                                 | required   | Toast text                        |
| `variant`        | `'info' \| 'success' \| 'warning' \| 'error'`            | `'info'`   | Color tone                        |
| `position`       | `'top' \| 'bottom'`                                      | `'top'`    | Anchor edge                       |
| `duration`       | `number`                                                 | `3000`     | Auto-dismiss ms (`0` = sticky)    |
| `onHide`         | `() => void`                                             | -          | Called when fade-out completes    |
| `onPress`        | `() => void`                                             | -          | Optional press handler            |
| `icon`           | `ReactNode`                                              | -          | Optional leading icon             |
| `topOffset`      | `number`                                                 | `56`       | Top inset                         |
| `bottomOffset`   | `number`                                                 | `56`       | Bottom inset                      |

## Accessibility

- `accessibilityRole="alert"` with `accessibilityLiveRegion="polite"` so VoiceOver/TalkBack announces it


---

# Tooltip

> Long-press tooltip that auto-positions and clamps within the viewport.

Source: https://expo-ui.thunderdevelops.in/docs/components/tooltip

## Installation

```bash
npx expo-app-ui add tooltip
```

## Usage

```tsx
import Tooltip from "@/components/ui/tooltip";

<Tooltip content="Save your changes" placement="top">
  <Button title="Save" onPress={() => {}} />
</Tooltip>
```

## Props

| Prop               | Type                                         | Default      | Description                       |
| ------------------ | -------------------------------------------- | ------------ | --------------------------------- |
| `content`          | `string`                                     | required     | Tooltip text                      |
| `children`         | `ReactElement`                               | required     | Trigger element                   |
| `placement`        | `'top' \| 'bottom' \| 'left' \| 'right'`     | `'top'`      | Preferred placement               |
| `backgroundColor`  | `string`                                     | `'#1F2937'`  | Tooltip background                |
| `textColor`        | `string`                                     | `'#FFFFFF'`  | Text color                        |
| `offset`           | `number`                                     | `8`          | Gap from trigger                  |
| `maxWidth`         | `number`                                     | `240`        | Max tooltip width                 |
| `disabled`         | `boolean`                                    | `false`      | Disable trigger                   |

## Accessibility

- Trigger has `accessibilityHint`
- Tooltip body has `accessibilityRole="text"` with the content as label
- Tap outside or anywhere to dismiss


---

# Theme Constants

> Theme constants including colors, fonts, and sizes for consistent styling in Expo React Native. Learn how to use the theme constants in your project.

Source: https://expo-ui.thunderdevelops.in/docs/constants/theme

## Installation

```bash
npx expo-app-ui add theme
```

:::note
This will automatically add required dependencies: normalizeSize.
:::

## Usage

```tsx
import { colors, fonts, size } from "@/constants/theme";
```

## Exports

### Colors

| Color | Value |
|-------|-------|
| primary | #007AFF |
| secondary | #5856D6 |
| success | #34C759 |
| warning | #FF9500 |
| error | #FF3B30 |
| white | #FFFFFF |
| black | #000000 |
| gray | #8E8E93 |
| lightGray | #F2F2F7 |
| darkGray | #1C1C1E |
| forest_green | #228B22 |

### Sizes

| Size | Value |
|------|-------|
| xs | 12 |
| sm | 14 |
| base | 16 |
| md | 18 |
| lg | 20 |
| lg2 | 24 |
| xl | 26 |
| xl2 | 28 |
| xxl | 32 |
| txl | 40 |

## Examples

### Using Colors

```tsx
<View style={{ backgroundColor: colors.primary }} />
```

### Using Fonts

```tsx
<Text style={{ fontFamily: fonts.inter }} />
```

### Using Sizes

```tsx
<Text style={{ fontSize: size.md }} />
```

## Features

- Comprehensive color palette
- Normalized font sizes
- Easy to customize
- Consistent design system



---

# normalizeSize

> A utility function to normalize font sizes based on device font scale for Expo React Native. Learn how to use normalizeSize to handle accessibility settings.

Source: https://expo-ui.thunderdevelops.in/docs/helpers/normalizeSize

## Installation

```bash
npx expo-app-ui add normalizeSize
```

## Usage

```tsx
import { normalizeSize } from "@/helper/normalizeSize";
```

## Function Signature

```tsx
normalizeSize(size: number): number
```

### Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| size | number | The base font size to normalize |

### Returns

| Type | Description |
|------|-------------|
| number | The normalized font size |

## Examples

### Basic Usage

```tsx
const fontSize = normalizeSize(16);
// On normal devices: returns 16
// On devices with large text: returns ~13.6
```

### In StyleSheet

```tsx
const styles = StyleSheet.create({
  text: {
    fontSize: normalizeSize(18),
  },
});
```

## Features

- Automatic font scale detection
- Adjusts for accessibility settings
- Prevents text from becoming too large