Check In

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

iOSAndroid

Preview Check In on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

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

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 (
    <CheckInProvider
      getLocation={getLocation}
      defaultOptions={[
        { id: '1', label: 'Office', icon: 'building-01', color: '#3b82f6' },
        { id: '2', label: 'Client Site', icon: 'user-group', color: '#22c55e' },
      ]}
      onCheckOut={async ({ session, formData, endLocation }) => {
        console.log('Checked out:', session, formData, endLocation);
      }}>
      <DocyCheckInButton size="md" />
      <DocyCheckInSheet />
      <DocyCheckOutSheet />
    </CheckInProvider>
  );
}

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 }`)

Check In

On this page