Skip to content

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

License

Notifications You must be signed in to change notification settings

sergey-kozel/react-native-modal-selector

 
 

Repository files navigation

react-native-modal-selector npm version

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

This project is the official continuation of the abandoned react-native-modal-picker repo. Contributors are welcome to request a promotion to collaborator status.

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(props) {
        super(props);

        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', accessibilityLabel: 'Tap here for cranberries' },
            // etc...
            // Can also add additional custom keys which are passed to the onChange callback
            { key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
        ];

        return (
            <View style={{flex:1, justifyContent:'space-around', padding:50}}>

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

                // Wrapper
                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    supportedOrientations={['landscape']}
                    accessible={true}
                    scrollViewAccessibilityLabel={'Scrollable options'}
                    cancelButtonAccessibilityLabel={'Cancel Button'}
                    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>
        );
    }
}

Data Format

The selector accept a specific format of data:

[{ key: 5, label: 'Red Apples' }]

If your data has a specific format, you can define extractors of data, example:

this.setState({data: [{ id: 5, name: 'Red Apples' }]});

return (
  <ModalSelector
     data={this.state.data}
     keyExtractor= {(item) => item.id}
     labelExtractor= {(item) => item.name}/>
);

API

Props

Prop Type Optional Default Description
data array No [] array of objects with a unique key and label to select in the modal.
onChange function Yes () => {} callback function, when the users has selected an option
onModalOpen function Yes () => {} callback function, when modal is opening
onModalClose function Yes () => {} callback function, when modal is closing
`keyExtractor function Yes (data) => data.key extract the key from the data item
`labelExtractor function Yes (data) => data.label extract the label from the data item
initValue string Yes Select me! text that is initially shown on the button
cancelText string Yes cancel text of the cancel button
animationType string Yes slide type of animation to be used to show the modal. Must be one of none, slide or fade.
disabled bool Yes false true disables opening of the modal
childrenContainerStyle object Yes {} style definitions for the children container view
touchableStyle object Yes {} style definitions for the touchable element
touchableActiveOpacity number Yes 0.2 opacity for the touchable element on touch
supportedOrientations ['portrait', 'landscape'] Yes both orientations the modal supports
keyboardShouldPersistTaps string / bool Yes always passed to underlying ScrollView
style object Yes style definitions for the root element
selectStyle       object   Yes     {}         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 Yes {} style definitions for the select element (available in default mode only!)
overlayStyle object Yes { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
sectionStyle object Yes {} style definitions for the section element
sectionTextStyle object Yes {} style definitions for the select text element
optionStyle object Yes {} style definitions for the option element
optionTextStyle object Yes {} style definitions for the option text element
optionContainerStyle object Yes {} style definitions for the option container element
cancelStyle object Yes {} style definitions for the cancel element
cancelTextStyle object Yes {} style definitions for the cancel text element
cancelContainerStyle object Yes {} style definitions for the cancel container
backdropPressToClose bool Yes false true makes the modal close when the overlay is pressed
passThruProps object Yes {} props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
accessible bool Yes false true enables accessibility for modal and options. Note: data items should have an accessibilityLabel property if this is enabled
scrollViewAccessibilityLabel string Yes undefined Accessibility label for the modal ScrollView
cancelButtonAccessibilityLabel string Yes undefined Accessibility label for the cancel button

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 64.5%
  • Objective-C 20.8%
  • Python 8.1%
  • Java 6.6%