React Native – Searchable Dropdown

In this tutorial we are going to cover the Searchable Dropdown topic. Searchable Dropdown to help you search with in the list (using ListView and FlatList), and you can pick single item. For this you have to install following dependency.

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

App.js


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',
  },
];
export default class App 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: '#000' }}
        itemsContainerStyle={{ maxHeight: 250 }}
        items={items}
        defaultIndex={0}
        placeholder="Select Item"
        resetValue={false}
        underlineColorAndroid="transparent"
      />
    );
  }
}
0 0 vote
Article Rating

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x