react-native-advanced-select

1.0.7 • Public • Published

react-native-advanced-select

npm version MIT license

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

Prop Name Prop Type Default Values Description
onSelect func (item, index) => {} Callback function invoked on option select that takes (selectedOptionItem, selectedOptionindex) as parameters
placeholder string Select Text to show as default text
searchPlaceholder string Search Text to show as default search text
style object {} To style the select box
optionTextStyle object {} To style the text shown in the box
optionContainerStyle object {} To style the options shown
search bool false Use search in Component
selectedKey string or number "" Key of the item which is selected whose label will be displayed
parentScrollEnable func null Hack for Android nested ScrollView
parentScrollDisable func null Hack for Android nested ScrollView
keyExtractor func (item) => item.key || "" Function that extracts the key to uniquely identify an item
labelExtractor func (item) => item.label || "" Function that extracts the label to be displayed for an item
disabled bool false To disable dropdown toggle/click
disabledTextStyle object { color: 'lightgrey' } To style text displayed when disabled is true
optionNumberOfLines number 1 To set certain number of lines to text rendered in select value and select options' labels
placeholderTextStyle object {} To style the placeholder text displayed when no option is selected
showCustomRightIconView boolean false To decide if you want to render custom right icon for dropdown or not
customRightIconView func null To render custom right icon view in dropdown
selectedRowStyle object { backgroundColor: '#D1D1D6FF' } To style the selected option view when dropdown is opened

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.7
    1
    • latest

Version History

Package Sidebar

Install

npm i react-native-advanced-select

Weekly Downloads

7

Version

1.0.7

License

MIT

Unpacked Size

87.8 kB

Total Files

9

Last publish

Collaborators

  • ekansh_mahajan