https://github.com/jkomyno/react-native-universal-picker

Cross platform component that uses React Native's Picker on Android and ActionSheetIOS on iOS.
https://github.com/jkomyno/react-native-universal-picker

dropdown picker react-native select ui

Last synced: 5 months ago
JSON representation

Cross platform component that uses React Native's Picker on Android and ActionSheetIOS on iOS.

• Host: GitHub
• URL: https://github.com/jkomyno/react-native-universal-picker
• Owner: jkomyno
• License: mit
• Created: 2017-08-18T14:07:03.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-03-29T10:36:16.000Z (over 8 years ago)
• Last Synced: 2025-09-13T22:43:18.509Z (10 months ago)
• Topics: dropdown, picker, react-native, select, ui
• Language: JavaScript
• Size: 56.6 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-universal-picker

[![npm version](https://badge.fury.io/js/react-native-universal-picker.svg)](https://badge.fury.io/js/react-native-universal-picker)

[![Build Status](https://travis-ci.org/jkomyno/react-native-universal-picker.svg?branch=master)](https://travis-ci.org/jkomyno/react-native-universal-picker)

---

Cross platform component that uses React Native's Picker on Android and ActionSheetIOS on iOS.

TypeScript type definitions available.

## Installation

`yarn add react-native-universal-picker`

Or, if you prefer using npm:

`npm i -S react-native-universal-picker`

## How to use

It exposes the same API as [React Native's Picker](https://facebook.github.io/react-native/docs/picker.html).

```javascript

import React, { PureComponent } from 'react';

import { View } from 'react-native';

import Picker from 'react-native-universal-picker';

export default class Example extends PureComponent {

  state = {

    language: 'js',

  };

  onValueChange = (itemValue, itemIndex) => {

    this.setState({

      language: itemValue,

    });

  }

  render() {

    return (

      

        

          

          

        

      

    )

  }

}

```

## Available Props

Note that you can also use every prop from [React Native's Picker](https://facebook.github.io/react-native/docs/picker.html).

Check the [TypeScript type definition file](src/index.d.ts) for further info.

Prop              | Type     | Default  | Description

----------------- | -------- | -------- | --------------------

cancelLabel       | string   | 'Cancel' | The label of the latest ActionSheetIOS option button, which is the one that dismisses the picker on iOS

## Contributing

PRs are obviously welcome! :octocat:

## License

[MIT](LICENSE)