React Native Searchable Dropdown

Searchable Dropdown to help you search with in the list (using ListView and FlatList), and you can pick single item.

example

Installation

npm install --save react-native-searchable-dropdown

Properties

PropsDescription
itemsdropdown items
defaultIndexDefault selected index of items. (optional)
onTextChangeon text change you can passs onTextChange and catch the input text. (optional)
onItemSelecton item selection you can passs onItemSelect and catch the input item.
containerStylecomponent container style
textInputStyleTextInput style
itemStyleitems on dropdown
itemTextStyleitem text
resetValuereset textInput Value with true and false state
placeholdertextInput placeholder
placeholderTextColortextInput placeholderTextColor
itemsContainerStyleitems container style you can pass maxHeight to restrict the items dropdown hieght
underlineColorAndroidTextInput underline height
listTypedefault will be FlatList or you can pass ListView

Example

import React, { Component } from 'react';
import SearchableDropdown from 'react-native-searchable-dropdown';

var items = [
  {
    id: 1,
    name: 'JavaScript',
  },
  {
    id: 2,
    name: 'Java',
  },
  {
    id: 3,
    name: 'Ruby',
  },
  {
    id: 4,
    name: 'React Native',
  },
  {
    id: 5,
    name: 'PHP',
  },
  {
    id: 6,
    name: 'Python',
  },
  {
    id: 7,
    name: 'Go',
  },
  {
    id: 8,
    name: 'Swift',
  },
];
class Example extends Component {
  render() {
    return (
      <SearchableDropdown
        onTextChange={text => alert(text)}
        onItemSelect={item => alert(JSON.stringify(item))}
        containerStyle={{ padding: 5 }}
        textInputStyle={{
          padding: 12,
          borderWidth: 1,
          borderColor: '#ccc',
          borderRadius: 5,
        }}
        itemStyle={{
          padding: 10,
          marginTop: 2,
          backgroundColor: '#ddd',
          borderColor: '#bbb',
          borderWidth: 1,
          borderRadius: 5,
        }}
        itemTextStyle={{ color: '#222' }}
        itemsContainerStyle={{ maxHeight: 140 }}
        items={items}
        defaultIndex={2}
        placeholder="placeholder"
        resetValue={false}
        underlineColorAndroid="transparent"
      />
    );
  }
}