React Native

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


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


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 (
        onTextChange={text => alert(text)}
        onItemSelect={item => alert(JSON.stringify(item))}
        containerStyle={{ padding: 5 }}
          padding: 12,
          borderWidth: 1,
          borderColor: '#ccc',
          borderRadius: 5,
          padding: 10,
          marginTop: 2,
          backgroundColor: '#ddd',
          borderColor: '#bbb',
          borderWidth: 1,
          borderRadius: 5,
        itemTextStyle={{ color: '#000' }}
        itemsContainerStyle={{ maxHeight: 250 }}
        placeholder="Select Item"

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button