如何在 React Native 中设置搜索栏

Question

I am a new in react native i am try to set search bar in my application. To search in flatlist data. i am not able to search in flatlist data,What is the error i don't know. how can i set how to resolve my problem please resolve my issue. i have attached the my code given below.

import React from 'react';
import { StyleSheet, FlatList, View, TouchableOpacity, Image, Text, TextInput } from 'react-native';
import { dishesData } from './DishesData';
import { SearchBar } from 'react-native-elements'

const MenuListScreen = ({ navigation }) => {
  const state = {
    searchText: "",
    dishesData:[],
    filteredData: [],
  };
  let search = (searchText) => {
    this.setState({searchText: searchText});
  
    let filteredData = state.dishesData.filter(function (item) {
      return item.description.includes(searchText);
    });
  
    this.setState({filteredData: filteredData});
  };
  return (

    <View style={styles.container}>
      <SearchBar
        round={true}
        lightTheme={true}
        placeholder="Search..."
        autoCapitalize='none'
        autoCorrect={false}
        onChangeText={search}
        value={state.searchText}
      />

      <FlatList style={styles.list}
        contentContainerStyle={styles.listContainer}
        data={dishesData}
        horizontal={false}
        numColumns={1}
        keyExtractor={(item) => {
          return item.id;
        }}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() => navigation.navigate('MenuDetail', { id: item.id })}
            >
              <Image
                style={styles.userImage}
                source={{ uri: item.imageSource }}
              />
              <View style={styles.cardFooter}>
                <View style={{ alignItems: "center", justifyContent: "center" }}>
                  <Text style={styles.name}>{item.title}</Text>
                  <Text style={styles.position}>{item.price}</Text>
                  {/* <TouchableOpacity style={styles.followButton}
                    onPress={() =>
                      props.navigation.navigate('DetailsPage', item)
                    }>
                    <Text style={styles.followButtonText}>Buy Now</Text>
                  </TouchableOpacity> */}
                </View>
              </View>
            </TouchableOpacity>
          )
        }} />

    </View>

  );
};

Answer 1

Hi there you can filter items by using filter function and you are already doing that but for accuracy I'll suggest to do like this.

let search = (searchText) => {
    this.setState({searchText: searchText});
  
    let filteredData = state.dishesData.filter(function (item) {
      return item.description.toUpperCase().includes(searchText.toUpperCase());
    });
  
    this.setState({filteredData: filteredData});
  };

and to render the filtered items on Flatlist you have to toggle data array on FlatList

<FlatList style={styles.list}
        contentContainerStyle={styles.listContainer}
        data={state.searchText ? state.filteredData:state.dishesData}
        horizontal={false}
        numColumns={1}
        keyExtractor={(item) => {
          return item.id;
        }}.../>

Here is the Snack Link you can test as well Working Example