Installation

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

npm

npm install @elik56a/react-native-pickers

yarn

yarn add @elik56a/react-native-pickers

pnpm

pnpm add @elik56a/react-native-pickers

Expo

npx expo 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. To use your brand colours everywhere, wrap your app once:

App.tsx

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

export default function App() {
  return (
    <PickersProvider theme={{ colors: { primary: '#FF5A5F' } }}>
      <RootNavigator />
    </PickersProvider>
  );
}

See Theming for every token.

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,
  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';

Subpath	Exports
/wheel	WheelPicker, MultiWheelPicker, WheelPickerSheet
/time	TimePicker, TimePickerSheet
/date	DatePicker, DateWheelPicker, DatePickerSheet
/calendar	Calendar
/datetime	DateTimePicker, DateTimePickerSheet
/select	SelectPicker, SelectList
/emoji	EmojiPicker, EmojiPickerSheet, emoji utils
/sheet	BottomSheet, PickerSheet, useDraft
/core	PickersProvider, 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.