react-native-advanced-select v1.0.7

react-native-advanced-select

Simple select component with in-built search for React-Native.

Demo

Installation

$ npm install react-native-advanced-select --save

or use yarn

$ yarn add react-native-advanced-select

Usage

Note: Ensure to add and configure react-native-vector-icons to your project before using this package.

The snippet below shows how the component can be used

import React from 'react';
import { View, Text } from 'react-native';
import Select from 'react-native-advanced-select';

class SelectExample extends React.Component {
  constructor(props, state) {
    super(props, state);
    this.state = {
      selectedKey: '',
      items: [
        { myKey: 1, myLabel: "Fruits" },
        { myKey: 2, myLabel: "Red Apples" },
        { myKey: 3, myLabel: "Cherries" },
        { myKey: 4, myLabel: "Cranberries" },
        { myKey: 5, myLabel: "Pink Grapefruit" },
        { myKey: 6, myLabel: "Raspberries" },
        { myKey: 7, myLabel: "Vegetables" },
        { myKey: 8, myLabel: "Beets" },
        { myKey: 9, myLabel: "Red Peppers" },
        { myKey: 10, myLabel: "Radishes" },
        { myKey: 11, myLabel: "Radicchio" },
        { myKey: 12, myLabel: "Red Onions" },
        { myKey: 13, myLabel: "Red Potatoes" },
        { myKey: 14, myLabel: "Rhubarb" },
        { myKey: 15, myLabel: "Tomatoes" }
      ]
    };
  }

  onSelectedItemsChange = (item, index) => {
    const key = item.myKey
    this.setState({ selectedKey: key });
  };

  render() {
    const { selectedKey, items } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <Select
          selectedKey={selectedKey}
          data={items}
          width={250}
          placeholder="Select a value ..."
          onSelect={this.onSelectedItemsChange.bind(this)}
          search={true}
          keyExtractor={(item) => item.myKey || ''}
          labelExtractor={(item) => item.myLabel || ''}
        />
      </View>
    );
  }
}

Props