Skip to content

An OS independant take on the native react-native-picker with modal for selecting items

License

Notifications You must be signed in to change notification settings

fruitl00p/react-native-selectbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-selectbox

This is a platform independant (Android / iOS) version of the native picker / selectbox that react-native has. It's basically the Android version and the iOS version merged into one: only show a single selected label and only after clicking on this show the full list of items.

This is a derivation of the react-native-modal-picker by d-a-n I've simplified this a bit and removed alot of state handling preferring outside control. This allows for Redux state handling. I've also added the option of having the react-native-picker prompt feature. The prompt is a simple text above the list inside the modal.

Install

npm i react-native-selectbox --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 Selectbox from 'react-native-selectbox'

[..]

class App extends React.Component {

    ...

    _onChange = (item) => {
        // the full item as defined in the list of items is passed to the onChange handler to give full
        // flexibility on what to do... 
    }

    render() {
        const items = [
            { key: 0, label: 'Fruits', value:'some value' },
            { key: 1, label: 'Fruits', value:{this: "could", be:"anything"} },
        ];

        return (
            <View>
                <Selectbox
                    selectedItem=this.props.selectedItem
                    onChange={this._onChange}
                    items=items />
            </View>
        );
    }
}

Props

  • items - [] required, array of objects with a unique key and label
  • selectedItem - object required, the selected Item to be rendered directly
  • promptLabel - object optional, a string which will appear above the list of options / picker
  • cancelLabel - object optional, a string to be shown on the modal (defaults: cancel)
  • onChange - function optional, callback function, when the user selects an item
  • animationType - function optional, a string for the animation used to show the modal (defaults: slide)
  • transparent - function optional, a boolean value for the transparency of the modal
  • style - object optional, style definitions for the root element
  • optionLabelStyle - string optional, style definitions for each element from the options
  • selectLabelStyle - object optional, style definitions for currently selected item

About

An OS independant take on the native react-native-picker with modal for selecting items

Resources

License

Stars

Watchers

Forks

Packages

No packages published