JSPM – react-native-modal-selector@0.0.17

Package Exports

react-native-modal-selector

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-modal-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Demo

Install

npm i react-native-modal-selector --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.

import ModalSelector from 'react-native-modal-selector'

[..]

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 (
            <View style={{flex:1, justifyContent:'space-around', padding:50}}>

                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />

                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    onChange={(option)=>{ this.setState({textInputValue:option.label})}}>

                    <TextInput
                        style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}}
                        editable={false}
                        placeholder="Select something yummy!"
                        value={this.state.textInputValue} />

                </ModalSelector>
            </View>
        );
    }
}

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!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop.
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