# React Native Pickers

> @elik56a/react-native-pickers: wheel, time, date (calendar, range, multiple, wheel), date-time, select (local or server search), horizontal list (segmented control, chips) and emoji pickers, plus bottom sheets and form fields, for React Native, Expo and React Native Web, with zero native code (pure JavaScript). Native iOS, Material and web designs by default (design="auto"), or one design everywhere; fully themeable.

This file contains links to documentation sections following the llmstxt.org standard.

## Table of Contents

- [React Native Pickers, zero native code](https://react-native-pickers.dev/docs/intro.md): React Native Pickers: wheel, time, duration, date, month, week, range, date-time, select, country, phone, time zone, emoji and color pickers with b...
- [For AI assistants](https://react-native-pickers.dev/docs/resources/ai.md): Machine-readable documentation for React Native Pickers — llms.txt, llms-full.txt and per-page Markdown — plus a compact usage cheat sheet for code...
- [Install React Native Pickers](https://react-native-pickers.dev/docs/getting-started/installation.md): Install @elik56a/react-native-pickers in Expo, bare React Native or React Native Web. Zero native code: no linking, pods, rebuild or config plugin.
- [Quick start](https://react-native-pickers.dev/docs/getting-started/quick-start.md): Every picker in React Native Pickers in five minutes, with live, editable examples.
- [Core concepts](https://react-native-pickers.dev/docs/getting-started/core-concepts.md): The ideas shared by every component: controlled vs uncontrolled state, onChange vs onValueChanging, sheets and drafts, fields, iOS / Material / web...
- [iOS, Material & web designs](https://react-native-pickers.dev/docs/guides/designs.md): React Native pickers that look native on every OS: iOS on iPhone, Material Design on Android, a web design in the browser. Or one design everywhere...
- [React Native Bottom Sheet](https://react-native-pickers.dev/docs/components/bottom-sheet.md): Animated React Native bottom sheet with drag-to-dismiss, backdrop, header, footer and keyboard avoidance. Zero native code: no Reanimated or Gestur...
- [React Native Color Picker](https://react-native-pickers.dev/docs/components/color-picker.md): React Native color picker that looks native: iOS's Grid, Spectrum and Sliders, Google's swatch circles with a custom color, or the browser's spectr...
- [React Native Country Picker](https://react-native-pickers.dev/docs/components/country-picker.md): React Native country picker with flags and dialing codes: 250 countries, search by name in any language, ISO code or +dial code, preferred countrie...
- [React Native Date Picker & Calendar](https://react-native-pickers.dev/docs/components/date-picker.md): React Native calendar date picker with min/max dates, disabled days, marked dates and prices, any locale and swipe between months. iOS, Material an...
- [React Native Date Range Picker](https://react-native-pickers.dev/docs/components/date-range-picker.md): React Native date range picker (check-in / check-out) with min/max nights, multiple ranges and multiple date selection, built on the calendar.
- [React Native Date Time Picker](https://react-native-pickers.dev/docs/components/date-time-picker.md): React Native date and time picker in one component: one row of wheels on iOS, or a calendar with the time under it (Material) or beside it (web). Z...
- [React Native Date Wheel Picker](https://react-native-pickers.dev/docs/components/date-wheel-picker.md): React Native date wheel picker (day / month / year) with locale-aware column order, min/max dates and day clamping. Ideal for birthdays. Zero nativ...
- [React Native Duration Picker](https://react-native-pickers.dev/docs/components/duration-picker.md): React Native duration and countdown timer picker: iOS wheels, Material number boxes or columns to click on the web, with unit labels, the value in ...
- [React Native Emoji Picker](https://react-native-pickers.dev/docs/components/emoji-picker.md): React Native emoji picker with 1,923 emojis, categories, search, skin tones, recents and Emoji-version filtering, in native iOS, Material and web d...
- [React Native Horizontal List](https://react-native-pickers.dev/docs/components/horizontal-list.md): React Native segmented control and horizontal chips with icons on any side, that scroll sideways, reveal the next item when you tap one at the edge...
- [React Native Month Picker](https://react-native-pickers.dev/docs/components/month-picker.md): React Native month and year picker for card expiry dates, reports and billing periods: iOS month and year wheels, or a Material and web grid of mon...
- [React Native Multi-Column Wheel Picker](https://react-native-pickers.dev/docs/components/multi-wheel-picker.md): Several React Native wheel pickers side by side sharing one selection band — for units, measurements, compound values and custom date/time layouts.
- [React Native Phone Number Input](https://react-native-pickers.dev/docs/components/phone-field.md): React Native phone number input with a country code picker: flags and dialing codes for 250 countries, formatting as you type, E.164 value, paste d...
- [React Native Date, Time & Wheel Picker Fields](https://react-native-pickers.dev/docs/components/picker-fields.md): Form fields for React Native that open a picker in a dropdown, bottom sheet or modal and show the picked value: DatePickerField, TimePickerField, D...
- [React Native Bottom Sheet Pickers](https://react-native-pickers.dev/docs/components/picker-sheets.md): Ready-made React Native bottom-sheet pickers with Cancel / Done: DatePickerSheet, TimePickerSheet, DateTimePickerSheet, DurationPickerSheet, MonthP...
- [React Native Searchable Select List](https://react-native-pickers.dev/docs/components/select-list.md): Inline, searchable React Native selection list with single or multiple selection, groups, icons, descriptions and custom rows — the list inside Sel...
- [React Native Select & Dropdown Picker](https://react-native-pickers.dev/docs/components/select-picker.md): React Native select and dropdown picker: a searchable bottom sheet, modal or dropdown. Single or multi-select with chips, groups, icons, a clear bu...
- [React Native Time Picker](https://react-native-pickers.dev/docs/components/time-picker.md): React Native time picker: iOS wheels, a Material clock dial or columns to click on the web. 12h/24h from the locale, minute intervals, min/max time...
- [React Native Time Zone Picker](https://react-native-pickers.dev/docs/components/time-zone-picker.md): React Native time zone picker: every IANA zone with its GMT offset and name, sorted by offset, search by city, offset or IANA name, the device's zo...
- [React Native Week Strip](https://react-native-pickers.dev/docs/components/week-strip.md): React Native week strip date picker: one week of days under its month, swipe or arrows to change weeks, marked dates with dots, min/max and disable...
- [React Native Wheel Picker](https://react-native-pickers.dev/docs/components/wheel-picker.md): iOS-style 3D wheel picker for React Native with infinite loop, disabled items, tap-to-type, a flat variant, custom rows and haptics hooks. Zero nat...
- [Date utilities](https://react-native-pickers.dev/docs/api/date-utils.md): Pure, local-time date helpers from React Native Pickers: toDateKey, addDays, addMonths, isSameDay, formatDate, getMonthNames and more.
- [Emoji utilities](https://react-native-pickers.dev/docs/api/emoji-utils.md): getAllEmojis, searchEmojis, findEmoji and withSkinTone for building reaction bars, shortcode autocomplete and custom emoji UIs in React Native.
- [API reference](https://react-native-pickers.dev/docs/api/reference.md): Every export of @elik56a/react-native-pickers — components, sheets, fields, hooks, theme helpers, date and emoji utilities and types — on one page.
- [Theme API](https://react-native-pickers.dev/docs/api/theme.md): PickersProvider, usePickerTheme, createTheme, mergeTheme, lightTheme, darkTheme, designs and textStyle — signatures and behaviour.
- [Accessibility](https://react-native-pickers.dev/docs/guides/accessibility.md): How React Native Pickers support VoiceOver, TalkBack and the keyboard — adjustable wheels, labelled calendar days, arrow keys on the web, selection...
- [Forms (React Hook Form, Formik)](https://react-native-pickers.dev/docs/guides/forms.md): Use React Native date, time and select pickers in React Hook Form and Formik with Controller, validation, errors and dates serialized as ISO strings.
- [Haptics](https://react-native-pickers.dev/docs/guides/haptics.md): Add iOS-style selection haptics to React Native wheel, time and date pickers with onValueChanging and expo-haptics or react-native-haptic-feedback.
- [i18n & RTL](https://react-native-pickers.dev/docs/guides/i18n-rtl.md): Localize React Native pickers: Intl month, weekday and AM/PM names, 12/24h clock, first day of week, date order and automatic right-to-left layout.
- [Performance](https://react-native-pickers.dev/docs/guides/performance.md): How React Native Pickers stay at 60 fps — native-driver animations, virtualized fixed-layout lists, memoized rows — and how to keep your usage fast.
- [Expo, bare RN & web](https://react-native-pickers.dev/docs/guides/platforms.md): React Native Pickers has zero native code, so it runs in Expo Go, dev builds, bare React Native, React Native Web and Next.js, on the New Architect...
- [Render props](https://react-native-pickers.dev/docs/guides/render-props.md): Replace any part of a React Native picker (wheel rows, calendar days, select triggers, options, emoji cells) while keeping behaviour and accessibil...
- [Styling with slots](https://react-native-pickers.dev/docs/guides/styling.md): Style any visual part of every React Native picker through typed slot styles — no forking, no !important. Complete slot list per component.
- [Theming](https://react-native-pickers.dev/docs/guides/theming.md): Theme every React Native picker with PickersProvider: colours, radius, spacing and typography tokens, automatic dark mode, iOS / Material / web des...
- [TypeScript](https://react-native-pickers.dev/docs/guides/typescript.md): Type-safe React Native pickers — generic value types, mode-discriminated date selection, typed slot names and exported prop types.
- [Alarm & reminder time](https://react-native-pickers.dev/docs/recipes/alarm-time.md): React Native alarm / reminder time picker with a big clock display, 5-minute steps, a time sheet and weekday selection.
- [Birthday picker](https://react-native-pickers.dev/docs/recipes/birthday.md): React Native birthday / date-of-birth picker with minimum age validation and a localized display field, as a calendar or date wheels.
- [Hotel booking range](https://react-native-pickers.dev/docs/recipes/booking-range.md): Build an Airbnb-style check-in / check-out date range picker in React Native with nightly prices, booked days, minimum stay and a confirm sheet.
- [Category filter chips](https://react-native-pickers.dev/docs/recipes/category-chips.md): React Native category filter chips that scroll sideways and reveal the next category on tap, filtering a list below, built with HorizontalList.
- [Chat input with emoji](https://react-native-pickers.dev/docs/recipes/chat-emoji.md): React Native chat screen with an emoji button that opens an emoji bottom sheet, inserting emojis at the cursor position, persisted recents and skin...
- [Country and phone number](https://react-native-pickers.dev/docs/recipes/country-select.md): React Native sign-up form with a country picker and a phone number field whose dialing code follows the chosen country, built with CountryPicker. F...
- [Duration & timer picker](https://react-native-pickers.dev/docs/recipes/duration.md): React Native workout form with a duration field and a rest timer, built with DurationPickerField: wheels on iOS, number boxes in Material, columns ...
- [Filters bottom sheet](https://react-native-pickers.dev/docs/recipes/filters-sheet.md): Build a React Native filters bottom sheet combining a sort segmented control, a date range, select fields and an Apply footer with draft state usin...
- [Flight search form](https://react-native-pickers.dev/docs/recipes/flight-search-form.md): A real-world React Native form with airport search loaded from a server as you type, popular airports before typing, a segmented trip type and cabi...
- [Search a server](https://react-native-pickers.dev/docs/recipes/server-search.md): React Native searchable select that loads options from an API as the user types, with a loader, debounced requests, load-more pagination and a cust...
- [Tag & multi-select](https://react-native-pickers.dev/docs/recipes/tags.md): React Native multi-select tag picker with chips, maximum selections, grouped options and a clear button using SelectPicker multiple mode.
- [React Native Picker Libraries Compared](https://react-native-pickers.dev/docs/resources/comparison.md): How React Native Pickers compares to native date/time pickers, calendar, select/dropdown, emoji and bottom-sheet libraries, and when to choose each.
- [Contributing](https://react-native-pickers.dev/docs/resources/contributing.md): Set up the repo, run the example app on web, iOS and Android, and follow the project structure and conventions.
- [React Native Pickers FAQ](https://react-native-pickers.dev/docs/resources/faq.md): Frequently asked questions about React Native Pickers: Expo Go, native code, the iOS and Material look, customizing, time zones, null values, contr...
- [Migrate from react-native-country-picker-modal](https://react-native-pickers.dev/docs/resources/migration/country-picker-modal.md): Switch from react-native-country-picker-modal to React Native Pickers: CountryPicker with emoji flags, dialing codes, search in any language, prefe...
- [Migrate from @react-native-community/datetimepicker](https://react-native-pickers.dev/docs/resources/migration/datetimepicker.md): Switch from @react-native-community/datetimepicker to React Native Pickers: DatePicker, TimePicker and DateTimePicker with the same props, a calend...
- [Migrate from react-native-dropdown-picker](https://react-native-pickers.dev/docs/resources/migration/dropdown-picker.md): Switch from react-native-dropdown-picker to React Native Pickers: SelectPicker with no open state to manage, search, multi-select chips, groups and...
- [Migrate from react-native-element-dropdown](https://react-native-pickers.dev/docs/resources/migration/element-dropdown.md): Switch from react-native-element-dropdown to React Native Pickers: Dropdown and MultiSelect become one SelectPicker, with search, chips, groups and...
- [Migrate from rn-emoji-keyboard](https://react-native-pickers.dev/docs/resources/migration/emoji-keyboard.md): Switch from rn-emoji-keyboard to React Native Pickers: EmojiPickerSheet with search, recents, skin tones and a category bar that follows the platfo...
- [Migrate to React Native Pickers](https://react-native-pickers.dev/docs/resources/migration.md): Prop-by-prop guides to move from datetimepicker, react-native-date-picker, react-native-calendars, dropdown and select libraries, the country and p...
- [Migrate from react-native-modal-datetime-picker](https://react-native-pickers.dev/docs/resources/migration/modal-datetime-picker.md): Switch from react-native-modal-datetime-picker to React Native Pickers: DatePickerSheet, TimePickerSheet and DateTimePickerSheet with Cancel / Done...
- [Migrate from react-native-phone-number-input](https://react-native-pickers.dev/docs/resources/migration/phone-number-input.md): Switch from react-native-phone-number-input to React Native Pickers: PhoneField with a country code button, formatting as you type and an E.164 val...
- [Migrate from react-native-picker-select](https://react-native-pickers.dev/docs/resources/migration/picker-select.md): Switch from react-native-picker-select to React Native Pickers: SelectPicker with search, multi-select, chips, groups and server search, in a botto...
- [Migrate from @react-native-picker/picker](https://react-native-pickers.dev/docs/resources/migration/picker.md): Switch from @react-native-picker/picker to React Native Pickers: WheelPicker with the iOS wheel on every platform, or SelectPicker for a dropdown. ...
- [Migrate from react-native-calendars](https://react-native-pickers.dev/docs/resources/migration/react-native-calendars.md): Switch from react-native-calendars to React Native Pickers: the same marked dates, built-in range and multiple selection, localized names from Intl...
- [Migrate from react-native-date-picker](https://react-native-pickers.dev/docs/resources/migration/react-native-date-picker.md): Switch from react-native-date-picker to React Native Pickers: the same date, time and date-time wheels and modal, in pure JavaScript, so it runs in...
- [Migrate from @react-native-segmented-control/segmented-control](https://react-native-pickers.dev/docs/resources/migration/segmented-control.md): Switch from @react-native-segmented-control/segmented-control to React Native Pickers: HorizontalList, a segmented control or chips that scroll sid...
- [Troubleshooting](https://react-native-pickers.dev/docs/resources/troubleshooting.md): Fixes for common React Native Pickers issues: wheel not showing the value, object values, days off by one, sheet behind keyboard, empty emoji boxes.