React Native

Bikram Sambat pickers for Expo / React Native, built for React Native Reusables (NativeWind v4, @/ aliases).

Prerequisites

• RNR project setup: components.json, NativeWind v4, lib/utils (cn)
• Expo SDK 50+ / React Native 0.74+
• react-native-safe-area-context (iOS sheets)
• react-native-svg (Android time clock — added with time/datetime items)

Missing RNR button, text, and icon are installed automatically when you add picker items (see Registry deps below).

Install

Use @react-native-reusables/cli with full *.json URLs — not short names like @react-nepali-datetime-picker-native/bs-date-picker (RNR CLI prefixes its own registry and fails).

Install in order: bs-calendar → bs-date-picker → bs-time-picker → bs-datetime-picker.

Hosted (recommended):

pnpm dlx @react-native-reusables/cli@latest add \
  https://binodnepali.github.io/react-nepali-datetime-picker/r-native/bs-calendar.json \
  https://binodnepali.github.io/react-nepali-datetime-picker/r-native/bs-date-picker.json \
  https://binodnepali.github.io/react-nepali-datetime-picker/r-native/bs-time-picker.json \
  https://binodnepali.github.io/react-nepali-datetime-picker/r-native/bs-datetime-picker.json \
  --yes

Use --yes without --overwrite so existing files (especially your RNR button.tsx) are kept. Add --overwrite only when you want to refresh every file.

Local (sibling repo, no server): run pnpm registry:build, then from your app:

pnpm dlx shadcn@latest add \
  ../react-nepali-datetime-picker/apps/docs/public/r-native/bs-calendar.json \
  ../react-nepali-datetime-picker/apps/docs/public/r-native/bs-date-picker.json \
  ../react-nepali-datetime-picker/apps/docs/public/r-native/bs-time-picker.json \
  ../react-nepali-datetime-picker/apps/docs/public/r-native/bs-datetime-picker.json \
  --yes

Use file paths with shadcn add locally. RNR CLI rewrites relative paths to its own registry and fails — reserve RNR CLI for full hosted https://…/*.json URLs below.

shadcn alternative

Same JSON URLs work with pnpm dlx shadcn@latest add …. For namespaced installs, register the registry in components.json then use shadcn add @react-nepali-datetime-picker-native/bs-calendar (etc.).

Registry deps

Picker items declare RNR primitives as full URLs in registryDependencies (not bare "button").

Cross-picker imports use relative paths (../../lib/bs-time-picker) in registry source so shadcn add does not rewrite them to @/components/ui/… (that caused require cycles when item names matched lib paths).

fromAdDate / toAdDate live in core time/datetime.ts and ship with the registry.

Usage

import { useState } from "react"
import { BsDatePicker } from "@/components/ui/bs-date-picker"
import { BsTimePicker } from "@/components/ui/bs-time-picker"
import { BsDateTimePicker } from "@/components/ui/bs-datetime-picker"
import { BsCalendar } from "@/components/ui/bs-calendar"
import { toAdDate } from "@/lib/bs-datetime-picker"
import type { BsDate } from "@/lib/bs-day-picker/types"
import type { BsTime, BsDateTime } from "@/lib/bs-time-picker/time/types"

// Date — onValueChange returns BsDate; use getDayAdDate for AD (see /api#bs-ad)
<BsDatePicker value={date} onValueChange={setDate} locale="ne" placeholder="मिति छान्नुहोस्" />

// Time
<BsTimePicker value={time} onValueChange={setTime} locale="ne" cancelLabel="रद्द" confirmLabel="ठीक" />

// Date + time — toAdDate(value) for Gregorian APIs (see /api/pickers#bs-ad-datetime)
<BsDateTimePicker value={dt} onValueChange={setDt} locale="ne" placeholder="मिति र समय छान्नुहोस्" />

// Inline calendar only
<BsCalendar mode="single" selected={date} onSelect={setDate} locale="ne" />

Native pickers use onValueChange (not web onChange). Icons use lucide-react-native via the RNR Icon wrapper.

Platform behavior

Metro resolves .ios.tsx / .android.tsx automatically — install once.

Component	iOS	Android	Web
Date	Sheet + chronological wheel	Material calendar dialog	Popover + calendar grid
Time	Hour / minute / AM·PM wheels	Material time dialog (clock)	Popover + time selects
DateTime	Date + time wheels in one sheet	Calendar dialog → time dialog	Popover: calendar + time selects
Calendar	Inline grid	Inline grid	Inline grid

Metro resolves bs-*-picker.tsx barrels to .ios.tsx / .android.tsx. Barrels exist for TypeScript import paths only.

Web pickers use the web registry (r/bs-*.json) with popover — not the native r-native/ bundle.

PortalHost

If pickers sit inside other portal-based overlays, mount a PortalHost at the app root per RNR docs.