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

Location-based check-in/check-out system with timer, option selection, and check-out form.

## Installation

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

## Overview

The Check In system is a multi-component feature for location-based check-in/check-out workflows. It consists of:

- **`CheckInProvider`** — Context provider that manages state (session, timer, sheets)
- **`DocyCheckInButton`** — Floating action button that toggles check-in/check-out
- **`DocyCheckInSheet`** — ActionSheet for selecting a check-in location/option
- **`DocyCheckOutSheet`** — ActionSheet with notes/outcome form for completing check-out

The system is **form-library-agnostic** and **geolocation-library-agnostic** — you provide `getLocation` and optionally `requestLocationPermission` callbacks.

## Usage

```tsx
import {
  CheckInProvider,
  DocyCheckInButton,
  DocyCheckInSheet,
  DocyCheckOutSheet
} from '@/components/docyrus-native/checkin';

function App() {
  const getLocation = async () => {
    // Use any geolocation library
    return { latitude: 41.0082, longitude: 28.9784 };
  };

  return (
    
  );
}
```

## API Reference

### CheckInProvider

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Child components |
| `getLocation` | `() => Promise<{ latitude: number; longitude: number }>` | — | **Required.** Returns current device location |
| `requestLocationPermission` | `() => Promise<'granted' \| 'denied'>` | — | Request location permission before check-in |
| `defaultOptions` | `CheckInOption[]` | `[]` | Default check-in options if `onCheckIn` is not provided |
| `onCheckIn` | `(location) => Promise<CheckInOption[]>` | — | Called on check-in, returns available options |
| `onCheckOut` | `(data) => Promise<void>` | — | Called on check-out with session data, form data, and end location |

### DocyCheckInButton

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `'sm' \| 'md' \| 'lg'` | `'sm'` | Button size |
| `bottom` | `number` | `20` | Bottom position offset |
| `top` | `number` | — | Top position offset |
| `left` | `number` | — | Left position offset |
| `right` | `number` | `20` | Right position offset |
| `onCheckInStart` | `() => void` | — | Called when check-in starts |
| `onCheckInComplete` | `() => void` | — | Called when check-in completes |
| `onCheckOutStart` | `() => void` | — | Called when check-out starts |
| `onCheckOutComplete` | `() => void` | — | Called when check-out completes |

### DocyCheckInSheet

No additional props. Uses `CheckInProvider` context internally.

### DocyCheckOutSheet

No additional props. Uses `CheckInProvider` context internally. Displays session info, notes textarea, outcome input, and submit/cancel buttons.

## Components

| Component | Description |
|-----------|-------------|
| `CheckInProvider` | Context provider for check-in state |
| `DocyCheckInButton` | Floating action button (location icon → timer) |
| `DocyCheckInSheet` | Location/option selection sheet |
| `DocyCheckOutSheet` | Check-out form sheet with notes and outcome |

## Hooks

| Hook | Returns | Description |
|------|---------|-------------|
| `useCheckIn()` | `CheckInContextType` | Access check-in state and actions |

## 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.checkin.title` | Check In | Check-in sheet title |
| `ui.checkin.tabAll` | All | Tab |
| `ui.checkin.tabRecent` | Recent | Tab |
| `ui.checkin.tabFavorites` | Favorites | Tab |
| `ui.checkin.empty` | No locations found | Empty options list |
| `ui.checkout.title` | Check Out | Check-out sheet title |
| `ui.checkout.sessionLabel` | Current Session | Session card label |
| `ui.checkout.startedAt` | Started at | Session start label |
| `ui.checkout.notesLabel` | Notes | Notes field label |
| `ui.checkout.notesPlaceholder` | Add any notes about this check-in... | Notes placeholder |
| `ui.checkout.outcomeLabel` | Outcome | Outcome field label |
| `ui.checkout.outcomePlaceholder` | Enter outcome | Outcome placeholder |
| `ui.checkout.submit` | Complete Check Out | Submit button |
| `ui.common.cancel` | Cancel | Cancel button |
| `ui.checkout.locationInfo` | Location will be captured on check-out | Location hint |

## Type Exports

| Type | Description |
|------|-------------|
| `CheckInProviderProps` | Props for CheckInProvider |
| `DocyCheckInButtonProps` | Props for DocyCheckInButton |
| `CheckInOption` | Check-in option (`{ id, label, icon?, color? }`) |
| `CheckInSession` | Active session (`{ id, optionId, optionLabel, startTime, elapsedSeconds, location }`) |