Skip to main content
Version: Next 🚧

Installation

React Native Pickers is pure JavaScript: one package, with no native linking, pods or rebuilds.

npm install @elik56a/react-native-pickers

That's it. The package is pure JavaScript, so there is:

  • no pod install
  • no native rebuild — it works in Expo Go
  • no Babel plugin, Metro config or config plugin
  • no other dependency (no Reanimated, Gesture Handler or SVG)

Peer dependencies are react >= 18 and react-native >= 0.72, which your app already has.

Optional: add the theme provider​

Every component works with sensible light and dark defaults that follow the OS appearance, and looks native on each platform (iOS, Material on Android, web). To use your brand colours everywhere, or one design on every platform, wrap your app once:

App.tsx
import { PickersProvider } from '@elik56a/react-native-pickers';

export default function App() {
  return (
    <PickersProvider
      theme={{ colors: { primary: '#FF5A5F' } }}
      design="auto" // or 'ios' | 'material' | 'web' to use one look everywhere
    >
      <RootNavigator />
    </PickersProvider>
  );
}

See Theming for every token and Designs for the looks.

React Native Web​

Nothing extra is needed beyond a standard react-native-web setup (Expo web already has one). If you bundle manually, alias react-native to react-native-web:

webpack.config.js
module.exports = {
  resolve: { alias: { 'react-native$': 'react-native-web' } },
};

This documentation site is itself built this way: every live example is the real library running on React Native Web.

Importing​

Everything is a named export from the package root:

import {
  WheelPicker,
  MultiWheelPicker,
  TimePicker,
  DatePicker,
  Calendar,
  DateWheelPicker,
  SelectPicker,
  SelectList,
  HorizontalList,
  EmojiPicker,
  BottomSheet,
  PickerSheet,
  DatePickerSheet,
  TimePickerSheet,
  WheelPickerSheet,
  EmojiPickerSheet,
  PickersProvider,
} from '@elik56a/react-native-pickers';

The package is marked sideEffects: false, so bundlers that tree-shake (web) drop what you don't import. On native, Metro resolves the TypeScript source through the react-native export condition.

Smaller native bundles​

Metro doesn't tree-shake, so a root import bundles every picker on iOS and Android, including about 130 KB of emoji data. Import from the feature subpaths instead and Metro only bundles what you use:

import { DatePicker, DatePickerSheet } from '@elik56a/react-native-pickers/date';
import { SelectPicker } from '@elik56a/react-native-pickers/select';
import { PickersProvider } from '@elik56a/react-native-pickers/core';
SubpathExports
/wheelWheelPicker, MultiWheelPicker, WheelPickerSheet
/timeTimePicker, TimePickerSheet
/dateDatePicker, DateWheelPicker, DatePickerSheet
/calendarCalendar
/datetimeDateTimePicker, DateTimePickerSheet
/selectSelectPicker, SelectList
/listHorizontalList
/emojiEmojiPicker, EmojiPickerSheet, emoji utils
/sheetBottomSheet, PickerSheet, useDraft
/corePickersProvider, themes, date utils

Each subpath also exports its types. Subpaths need React Native 0.79+ (Expo SDK 53+), where Metro reads package exports by default. On older versions, set resolver.unstable_enablePackageExports = true in metro.config.js or keep the root import.