Is there any method to implement search input in React Native FlatList?

Question

I want to implement a search bar for flat list data, the problem is that the search function is working but it is not coming back to its original state data after a search is done or search text is null.

 const [data,setdata] = useState([{
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        fullName: "Bianca Bradley",
        timeStamp: "12:47 PM",
        recentText: "Contacts",
        avatarUrl: "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
      }, {
        id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
        fullName: "Sujitha Mathur",
        timeStamp: "11:11 PM",
        recentText: "Contacts",
        avatarUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU"
      },
]
 const handleSearch = text => {
      const formattedQuery = text.toLowerCase();
      const ndata = data.filter((item) => {
        return item.fullName.toLowerCase().match(formattedQuery)
      })
      setdata(ndata);
      setQuery(text);
      console.log("Working",ndata)
     }
 return (
    <>
     <Center>
      <View style={[styles.searchboxview]}>
        <Input type="text" value={query} onChangeText={(text)=>handleSearch(text)} style={[styles.searchbox]} textAlign="center" placeholder="Search User Name" w="85%" maxWidth="340px" />
      </View>
  </Center>
    <FlatList data={data} style={[styles.list]} renderItem={({
    item
  })  keyExtractor={item => item.id} />
 </>
  )
}

The problem which i can predict is that setdata(ndata) sets to new search data and it doesnot returns back to original data list. What will be the solution for it?

Answer 1

You can add a condition, if the text in textinput is empty then we will set the main data as data which is passed to the flatlist