# rn-network-banner
URL: /docs/native/docyrus/network-banner

Animated banner for displaying network connectivity status with retry and dismiss actions.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-network-banner
```

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

## Usage

```tsx
import { NetworkBanner } from '@/components/docyrus-native/network-banner';

<NetworkBanner
  visible={!isOnline}
  variant="offline"
  onRetry={() => checkConnection()}
  onDismiss={() => setDismissed(true)}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | — | Whether the banner is visible |
| `variant` | `'offline' \| 'slow' \| 'reconnecting'` | `'offline'` | Network status variant |
| `message` | `string` | — | Custom message (overrides variant default) |
| `onRetry` | `() => void` | — | Retry button handler (shows button when provided) |
| `retryLabel` | `string` | `'Retry'` | Retry button text |
| `onDismiss` | `() => void` | — | Dismiss button handler (shows X when provided) |
| `position` | `'top' \| 'bottom'` | `'top'` | Banner position on screen |
| `className` | `string` | — | Additional CSS classes |

## Translation Keys

Built-in copy is read through `useUiTranslation()` — provide these keys via `<UiTranslationProvider>`. Without a provider the English fallback is shown.

| Key | English fallback | Used for |
|-----|------------------|----------|
| `ui.networkBanner.offline` | You're offline | `offline` message (`message` prop wins) |
| `ui.networkBanner.slow` | Slow connection | `slow` message |
| `ui.networkBanner.reconnecting` | Reconnecting... | `reconnecting` message |
| `ui.networkBanner.retry` | Retry | Retry button (`retryLabel` prop wins) |

## Type Exports

| Type | Description |
|------|-------------|
| `NetworkBannerProps` | Props for NetworkBanner component |
| `NetworkBannerVariant` | `'offline' \| 'slow' \| 'reconnecting'` |