React Native Searchable Dropdown | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

To create a Searchable Dropdown in React Native, react-native-searchable-dropdown package provides a SearchableDropdown component

A Searchable Dropdown provides suggestions based on user input

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named SearchableDropdownApp)

react-native init SearchableDropdownApp

This creates a directory named SearchableDropdownApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here SearchableDropdownApp)

cd SearchableDropdownApp

Add react-native-searchable-dropdown package to current project using yarn

yarn add react-native-searchable-dropdown

or using npm

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

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

<SearchableDropdown
  //onTextChange listener for searchable input
  onTextChange={() => onTextChangeListener()}
  //onItemSelect listener for dropdown
  onItemSelect={() => onTextSelectListener()}
  //suggestion container style
  containerStyle={{ styles.containerStyle }}
  textInputStyle={{ styles.textInputStyle }}
  //single dropdown item style
  itemStyle={{ styles.itemStyle }}
  //single dropdown item text style
  itemTextStyle={{ styles.itemTextStyle }}
  //style for itemsContainer
  itemsContainerStyle={{ styles.itemsContainerStyle }}
  //data for dropdown
  items={data}
  //default selected item index
  defaultIndex={2}
  //placeholder text for search input
  placeholder="placeholder"
/>

Items data format

[ {
    id : 1,
    name: "itemOneName"
    }, {
    id : 2,
    name : "itemTwoLabel"
    }
]

App Code

Example with 2 searchable drop-downs, where one of them gets data from local array data and other one from server

To use it without implementing local server, remove componentDidMount() and second SearchableDropdown in render() function

App.js

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

var localData = [
  { id: 1, name: '1' },
  { id: 2, name: '2' },
  { id: 3, name: '3' },
  { id: 4, name: '4' },
  { id: 5, name: '5' },
  { id: 6, name: '6' },
  { id: 7, name: '7' },
  { id: 8, name: '8' },
  { id: 9, name: '9' },
  { id: 10, name: '10' },
];


export default class App extends Component {
  constructor() {
    super();
    this.state = {
      serverData: [],
      counter: 1
    };
  }

  componentDidMount() {
    //fetch('https://restcountries.eu/rest/v2/all')
    fetch('http://192.168.43.34:3000/numbers')
      .then(response => response.json())
      .then(responseJson => {
        console.log("response json " + JSON.stringify(responseJson))
        this.setState({
          serverData: [...this.state.serverData, ...responseJson.serverData],
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    return (
      <View style={{ flex: 1, marginTop: 30 }}>
        <Text style={{ marginLeft: 10 }}>
          SearchableDropdown with local data
        </Text>
        <SearchableDropdown
          //onTextChange listener for searchable input
          onTextChange={text => console.log(text)}
          //onItemSelect called after selection from dropdown
          onItemSelect={item => alert(JSON.stringify(item))}
          //suggestion container style
          containerStyle={{ padding: 5 }}
          textInputStyle={{
            padding: 12,
            borderWidth: 1,
            borderColor: '#ccc',
            backgroundColor: '#FAF7F6',
          }}
          //single dropdown item style
          itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: '#FAF9F8',
            borderColor: '#bbb',
            borderWidth: 1,
          }}
          //single dropdown item text style
          itemTextStyle={{
            color: '#222',
          }}
          //maxHeight to restrict height of items dropdown
          itemsContainerStyle={{
            maxHeight: '60%',
          }}
          //mapping of item array
          items={localData}
          //default selected item index
          defaultIndex={2}
          //placeholder text for search input
          placeholder="placeholder"
          //to remove underline from android input
          underlineColorAndroid="transparent"
        />
        <Text style={{ marginLeft: 10 }}>
          SearchableDropdown with server data
        </Text>
        <SearchableDropdown
          onTextChange={text => console.log(text)}
          onItemSelect={item => alert(JSON.stringify(item))}
          containerStyle={{ padding: 5 }}
          textInputStyle={{
            padding: 12,
            borderWidth: 1,
            borderColor: '#ccc',
            backgroundColor: '#FAF7F6',
          }}
          itemStyle={{
            padding: 10,
            marginTop: 2,
            backgroundColor: '#FAF9F8',
            borderColor: '#bbb',
            borderWidth: 1,
          }}
          itemTextStyle={{
            color: '#222',
          }}
          itemsContainerStyle={{
            maxHeight: '50%',
          }}
          items={this.state.serverData}
          defaultIndex={2}
          placeholder="placeholder"
          underlineColorAndroid="transparent"
        />
      </View>
    );
  }
}