Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/d-a-n/react-native-modal-picker

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
https://github.com/d-a-n/react-native-modal-picker

Last synced: 5 days ago
JSON representation

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

Awesome Lists containing this project

README 

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



# react-native-modal-picker

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.



## Demo






## Install



```sh

npm i react-native-modal-picker --save

```



## Usage



You can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.



See `SampleApp` for an example how to use this component.



```jsx



import ModalPicker from 'react-native-modal-picker'



[..]



class SampleApp extends Component {



    constructor() {

        super();



        this.state = {

            textInputValue: ''

        }

    }



    render() {

        let index = 0;

        const data = [

            { key: index++, section: true, label: 'Fruits' },

            { key: index++, label: 'Red Apples' },

            { key: index++, label: 'Cherries' },

            { key: index++, label: 'Cranberries' },

            { key: index++, label: 'Pink Grapefruit' },

            { key: index++, label: 'Raspberries' },

            { key: index++, section: true, label: 'Vegetables' },

            { key: index++, label: 'Beets' },

            { key: index++, label: 'Red Peppers' },

            { key: index++, label: 'Radishes' },

            { key: index++, label: 'Radicchio' },

            { key: index++, label: 'Red Onions' },

            { key: index++, label: 'Red Potatoes' },

            { key: index++, label: 'Rhubarb' },

            { key: index++, label: 'Tomatoes' }

        ];



        return (

            



                { alert(`${option.label} (${option.key}) nom nom nom`) }} />



                { this.setState({textInputValue:option.label})}}>

                    

                    

                        

                

            

        );

    }

}

```



## Props



* `data - []` required, array of objects with a unique key and label

* `style - object` optional, style definitions for the root element

* `onChange - function` optional, callback function, when the users has selected an option

* `initValue - string` optional, text that is initially shown on the button

* `cancelText - string` optional, text of the cancel button

* `selectStyle - object` optional, style definitions for the select element (available in default mode only!)

* `selectTextStyle - object` optional, style definitions for the select element (available in default mode only!)

* `overlayStyle - object` optional, style definitions for the overly/background element

* `sectionStyle - object` optional, style definitions for the section element

* `sectionTextStyle - object` optional, style definitions for the select text element

* `optionStyle - object` optional, style definitions for the option element

* `optionTextStyle - object` optional, style definitions for the option text element

* `cancelStyle - object` optional, style definitions for the cancel element

* `cancelTextStyle - object` optional, style definitions for the cancel text element