CODEWITHSUNDEEP
react-nativereact-native-flatlist
user12551649
user12551649

Reputation: 426

How to make search bar with dropdown list in react-native?

I want to create a search bar with a drop-down list with react-native, more like this imageenter image description here

I know there are lots of libraries regarding these which makes my task easy but I have just started with react-native so for my knowledge I wanna know how these things are made.

I came across tutorials of how to make a search bar with live search and update the flatlist by filtering the data based on your search but none of them has a dropdown list involved.

Code updating my flatlist based on search word is already done, I need to just display this flatlist in the form of a dropdown list.

A link to tutorial or sample code would be helpful.

Upvotes: 2

Views: 9294

Answers (1)

SRanuluge
SRanuluge

Reputation: 697

Check below example which i created using flatlist and TextInput. Items are displayed in the form of a dropdown list when you search items. i think this will help you.

import React, { Component } from "react";
import { View, Text, FlatList, TextInput, ListItem } from "react-native";

class FlatListDropDown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      value: "",
    };

    this.arrayNew = [{ name: "Robert" }, { name: "Bryan" }, { name: "Vicente" }, { name: "Tristan" }, { name: "Marie" }, { name: "Onni" }, { name: "sophie" }, { name: "Brad" }, { name: "Samual" }, { name: "Omur" }, { name: "Ower" }, { name: "Awery" }, { name: "Ann" }, { name: "Jhone" }, { name: "z" }, { name: "bb" }, { name: "cc" }, { name: "d" }, { name: "e" }, { name: "f" }, { name: "g" }, { name: "h" }, { name: "i" }, { name: "j" }, { name: "k" }, { name: "l" }];
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#CED0CE",
        }}
      />
    );
  };

  searchItems = (text) => {
    const newData = this.arrayNew.filter((item) => {
      const itemData = `${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
      value: text,
    });
  };

  renderHeader = () => {
    return (
      <TextInput
        style={{ height: 60, borderColor: "#000", borderWidth: 1 }}
        placeholder="   Type Here...Key word"
        onChangeText={(text) => this.searchItems(text)}
        value={this.state.value}
      />
    );
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          padding: 25,
          width: "98%",
          alignSelf: "center",
          justifyContent: "center",
        }}
      >
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <Text style={{ padding: 10 }}>{item.name} </Text>
          )}
          keyExtractor={(item) => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default FlatListDropDown;

Feel free for doubts

Upvotes: 4

Related Questions