react-native-modal-selector-searchable

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

Search functionality has been added to this fork repository

This project was forked from react-native-modal-selector

Change log

v2.1.6

• Added placeholderTextColor and keyboardType props on search field (faslash)

v2.1.5

• Added searchAutoFocus prop for autofocus on search field (jonacds)

Demo

Install

npm i react-native-modal-selector-searchable --save

Usage

You can either use this component in its default mode, as a wrapper around your existing component or provide a custom component (where you need to control opening of the modal yourself). 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-searchable'

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 (
            
        );
    }
}

Data Format

The selector accepts a specific format of data:

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

Optionally provide a component key which overrides the default label text. Optionally provide a unique testID for each item:

[{
  key: 5,
  label: 'Red Apples',
  // The next keys are optional --
  component: ,
  testID: '5-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 (
   item.id}
    labelExtractor= {item => item.name}
  />
);

API

Props

Methods

getSelectedItem(): get current selected item, updated by onChange event.