https://github.com/johnborges/react-native-pickr

Cross platform picker built with react-native
https://github.com/johnborges/react-native-pickr

react-native

Last synced: about 2 months ago
JSON representation

Cross platform picker built with react-native

• Host: GitHub
• URL: https://github.com/johnborges/react-native-pickr
• Owner: johnborges
• Created: 2019-02-11T01:44:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-26T04:56:26.000Z (about 7 years ago)
• Last Synced: 2025-02-15T13:55:35.659Z (over 1 year ago)
• Topics: react-native
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-native-pickr

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

Renders a native picker component for iOS and Android. On iOS, the picker renders within a transparent `Modal` component fixed at the bottom of the screen. Androind uses the OOB `Picker`.

![ios](http://johnborg.es/assets/dropdown_android.gif "ios picker")

![android](http://johnborg.es/assets/dropdown_ios.gif "android picker")

## Installation

`yarn add react-native-pickr`

## Props

### `options`

Options that will populate the dropdown. Must be an array of objects in the format:

`{ label: , value:  }`

### `selectedOption`

Value matching one of the items in options. Can be a string or an integer.

### `onChange`

Callback for when an item from options is selected. Called with the following parameter:

- itemValue: item that was selected from options

# Usage

```javascript

import React, { Component } from 'react';

import Pickr from 'react-native-pickr';

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      selectedUsState: 'NJ',

    }

    this._onChange = this._onChange.bind(this);

  }

  _onChange(value) {

    this.setState({selectedUsState: value});

  }

  render() {

    return (

      

    );

  }

}

```