Nonlinear Programming Methods

    react-native-modal-picker-fix

    0.0.22 • Public • Published

    npm version

    react-native-modal-picker

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

     
    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 (
                <View style={{flex:1, justifyContent:'space-around', padding:50}}>
     
                    <ModalPicker
                        data={data}
                        initValue="Select something yummy!"
                        onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />
     
                    <ModalPicker
                        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} />
                            
                    </ModalPicker>
                </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!)
    • 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

    Keywords

    none

    Install

    npm i react-native-modal-picker-fix

    DownloadsWeekly Downloads

    8

    Version

    0.0.22

    License

    none

    Last publish

    Collaborators

    • dck