Skip to main content
Version: v0.4.x

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. 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.