# rn-fab
URL: /docs/native/docyrus/fab

Floating action button with ActionSheet menu, position control, and variant colors.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-fab
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { Fab } from '@/components/docyrus-native/fab';

<Fab onPress={() => console.log('pressed')} />

<Fab
  variant="secondary"
  items={[
    { label: 'Camera', onPress: () => {} },
    { label: 'Gallery', onPress: () => {} },
  ]}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onPress` | `() => void` | — | Press handler (when no items provided) |
| `label` | `string` | — | Extended label text next to icon |
| `icon` | `ReactNode` | — | Custom icon element |
| `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'` | Screen position |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'destructive'` | `'primary'` | Color variant |
| `disabled` | `boolean` | `false` | Disabled state |
| `items` | `FabItem[]` | — | Menu items (opens ActionSheet when pressed) |
| `menuTitle` | `string` | — | Title for the ActionSheet menu |
| `className` | `string` | — | Additional CSS classes |
| `textClassName` | `string` | — | Label text CSS classes |

### FabItem

| Prop | Type | Description |
|------|------|-------------|
| `label` | `string` | Menu item label |
| `icon` | `ReactNode` | Menu item icon |
| `onPress` | `() => void` | Menu item press handler |

## Type Exports

| Type | Description |
|------|-------------|
| `FabProps` | Props for Fab component |
| `FabItem` | Menu item configuration object |
| `FabSize` | `'sm' \| 'md' \| 'lg'` |
| `FabPosition` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` |
| `FabVariant` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'destructive'` |