FAQ

Does it work in Expo Go?

Yes. There's no native code, so it runs in Expo Go, dev builds, bare React Native and the web without a rebuild.

Does it look native on iOS and Android?

Yes. By default each platform gets its own design: the iOS design on iOS, Material Design on Android (outlined fields, radios, a clock dial, OK under the content) and a web design in the browser. See Designs.

Can I use the iOS look on Android too, or one look everywhere?

Yes. <PickersProvider design="ios"> uses the iOS design on every platform; "material" and "web" work the same way. A component's own design prop wins over the provider's.

How much can I customize?

Everything. Colors, radius, spacing and fonts are theme tokens (light and dark), every visual part takes a style through styles, and render props replace rows, days, triggers and chevrons. Your settings always win over the design. See Theming and Styling with slots.

Does it need Reanimated or Gesture Handler?

No. It uses only React Native core: Animated (native driver), PanResponder, FlatList and Modal.

How do I clear a date?

Set value to null (single mode) or { start: null, end: null } (range). The calendar shows no selection.

How do I clear a single SelectPicker with the × button?

Single mode × calls only onClear, so reset your state there: clearable onClear={() => setValue(null)}. Multiple mode clears for you.

Why doesn't onChange fire when I set value?

By design: onChange reports user changes only. Programmatic changes to value move the picker silently, which avoids feedback loops.

Why doesn't onChange fire while the wheel is spinning?

onChange fires once the wheel settles. Use onValueChanging for per-row updates (haptics, live labels).

What time zone are dates in?

Local time, the same as new Date(). Calendar days are compared by local year / month / day, so time zones never shift a selected day. Serialize days with toDateKey, not toISOString().

Does TimePicker change the date?

No. It only changes hours, minutes and seconds, and the date part of value is preserved.

Can I select a date and a time together?

Yes, with DateTimePicker: one row of wheels on iOS, a calendar with the time under it in Material, or beside it on the web. In a form, use DateTimePickerField.

<DateTimePicker value={when} onChange={setWhen} minuteInterval={5} />

How big is it?

There are no dependencies. The emoji table (about 134 KB of source text) is the largest part. On the web it's dropped by tree-shaking if you don't import EmojiPicker or the emoji utilities.

Can I use custom fonts?

Yes: theme={{ typography: { fontFamily: 'Inter-Regular', fontFamilyMedium: 'Inter-SemiBold' } }} on PickersProvider.

How do I make the wheel bigger?

itemHeight sets the row height, visibleItems the row count, and styles.itemText the font size. The wheel's height is itemHeight × visibleItems.

How do I load options from an API?

Pass loadOptions={(query) => api.search(query)} to SelectPicker or SelectList. The list waits for a pause in typing, shows a loader until the results arrive, and ignores answers to older queries. For pagination or your own caching, use onSearchChange with loading and onEndReached instead. See Search a server.

Does it work with React Native Web?

Yes, with the same components and props. On the web, fields and SelectPicker open a dropdown under the field, sheets open as a centered modal on wide windows, and pickers use the web design. See Platforms.

How do I use it in a ScrollView?

Just place it there. Wheels and the emoji grid scroll independently and don't trigger the "VirtualizedLists should never be nested" warning. For SelectList inside a ScrollView, set listHeight.

Is it accessible?

Yes. Wheels are adjustable with increment / decrement actions, days announce full dates, and states are exposed throughout. See Accessibility.

Does it support RTL?

Yes, automatically through I18nManager.isRTL. See i18n & RTL.