Docyrus
iOSAndroid
Installation
pnpm dlx @docyrus/cli add @docyrus/rn-phone-inputUsage
import { PhoneInput } from '@/components/docyrus-native/phone-input';
<PhoneInput
value={phone}
onValueChange={setPhone}
countryCode={country}
onCountryCodeChange={setCountry}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | '' | Phone number |
onValueChange | (value: string) => void | — | Value change handler |
countryCode | string | 'US' | Selected country code |
onCountryCodeChange | (code: string) => void | — | Country change handler |
countries | CountryCode[] | 15 defaults | Country list |
placeholder | string | 'Phone number' | Placeholder text |
disabled | boolean | false | Disable interaction |
invalid | boolean | false | Show invalid state |
size | 'sm' | 'md' | 'lg' | 'md' | Input size |
className | string | — | Additional CSS classes |
inputClassName | string | — | TextInput CSS classes |
accessibilityLabel | string | — | Accessibility label |
CountryCode
| Property | Type | Description |
|---|---|---|
code | string | ISO country code (e.g. 'US') |
dialCode | string | Dial code (e.g. '+1') |
flag | string | Flag emoji |
name | string | Country name |
Type Exports
| Type | Description |
|---|---|
PhoneInputProps | Props for PhoneInput component |
PhoneInputSize | 'sm' | 'md' | 'lg' |
CountryCode | Country code entry type |
NotificationsPanel
Notification list panel with underline tabs, icon badges, pill action buttons and a customizable header and footer.
PivotCalendar
Date-bucketed pivot for React Native — a month calendar with per-day measures and a tap-to-expand day sheet, plus week, days-of-month and year grids with a sticky group column. API-aligned with the web PivotCalendar.