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

    Install

    npm i react-native-advanced-select

    DownloadsWeekly Downloads

    4

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    87.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • ekansh_mahajan