react-native-select-plus

Simple select component for react-native.

Demo

Installation

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

or use yarn

$ yarn add react-native-select-plus

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 component
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Select from 'react-native-select-plus';

class SelectExample extends Component {

  state = {
    value: null,
    items: [
      { key: 1, section: true, label: "Fruits" },
      { key: 2, label: "Red Apples" },
      { key: 3, label: "Cherries" },
      { key: 4, label: "Cranberries" },
      { key: 5, label: "Pink Grapefruit" },
      { key: 6, label: "Raspberries" },
      { key: 7, section: true, label: "Vegetables" },
      { key: 8, label: "Beets" },
      { key: 9, label: "Red Peppers" },
      { key: 10, label: "Radishes" },
      { key: 11, label: "Radicchio" },
      { key: 12, label: "Red Onions" },
      { key: 13, label: "Red Potatoes" },
      { key: 14, label: "Rhubarb" },
      { key: 15, label: "Tomatoes" }
    ];
  };



  onSelectedItemsChange = (key, value) => {
    this.setState({ value: value });
  };

  render() {
    const { value, items } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <Select
          data={items}
          width={250}
          placeholder="Select a value ..."
          onSelect={this.onSelectedItemsChange.bind(this)}
          search={true}
        />
        <View>
          <Text>{value}</Text>
        </View>
      </View>
    );
  }
}

Props

| Prop Name | Data Type | Default Values | Description | | ------------------- | --------- | -------------- | ------------------------------------------------ | | onSelect | function | null | function that executes on selection of an option | | placeholder | string | Select | Text to show as default text | | searchPlaceholder | string | Search | Text to show as default search text | | style | object | null | To style the select box. | | textStyle | object | null | To style the text shown in the box | | search | bool | true | Use search in conponent | | initKey | number | 0 | Init key for default option | | parentScrollEnable | function | null | Hack for Android nested ScrollView | | parentScrollDisable | function | null | Hack for Android nested ScrollView |

The MIT License (MIT). Please see LICENSE for more information.