Platforms
| Platform | Support | Notes |
|---|---|---|
| Expo Go | ✅ | No native code, so nothing to prebuild |
| Expo dev builds / EAS | ✅ | |
| Bare React Native (iOS, Android) | ✅ | react-native >= 0.72 |
| New Architecture (Fabric) | ✅ | Uses only core components |
| Hermes / JSC | ✅ | Intl names fall back to English where unsupported |
| React Native Web | ✅ | This site runs the library on RNW |
| Expo Router web / Next.js | ✅ | Via react-native-web |
| react-native-windows / macos | Untested | Core components only, so likely to work |
Why zero native code matters​
- Native feel, your brand. Each platform gets its own design, in your colors and fonts. Native date pickers change with every OS version, and Android's calendar dialog can't be themed much.
- No native build. Add the package and reload. Works in Expo Go and in OTA updates.
- One code path. No platform-specific bugs to chase, and tests run in Jest without native mocks.
Designs​
Pickers look native on each platform: iOS on iOS, Material Design on Android, a web design on the web. Set design="ios" (or "material", "web") on PickersProvider to use one look everywhere. See Designs for what each one changes and how to customize it.
How it's built​
Only React Native core APIs: FlatList, Animated (native driver on iOS/Android), PanResponder, Modal, Pressable, TextInput and Intl. No Reanimated, Gesture Handler, SVG or vector icons.
Web specifics​
- The wheel snaps to the nearest row once scrolling stops. Mouse wheel, trackpad and touch all work.
Modal(used by sheets) renders into a portal on the web.- Everything works from the keyboard: arrow keys move through calendars, lists and grids and step wheels and sliders, Esc closes a sheet, and focus returns to the field. See Accessibility.
- Animations run on the JS driver on the web, because the native driver isn't available there.
Previewing other platforms​
Pickers adapt to Platform.OS: fields open a dropdown on the web and a bottom sheet on iOS and Android, sheets keep room for the iOS home indicator and status bar, and headers drag on native. To see the native behavior in a browser (a design system, Storybook, these docs), set platform on the provider:
<PickersProvider platform="ios">
<App />
</PickersProvider>
The switch on every live example here previews iOS, Android and Web this way, with each platform's design. Other platforms, such as Windows and macOS, behave like Android.
Next.js / SSR​
Render pickers on the client. They measure layout and animate, so wrap them in a client component:
'use client';
import { DatePicker } from '@elik56a/react-native-pickers';
and alias react-native to react-native-web in your bundler config (Expo's and Next's RNW guides cover this).
Testing​
Components render in Jest with the react-native preset. Use testID props to find them:
render(<SelectPicker testID="country" options={opts} value={null} onChange={onChange} />);
Wheels settle with timers, so use fake timers (jest.useFakeTimers() + jest.runAllTimers()) when asserting on onChange after a scroll event.