Searching with an API in React Native allows users to fetch filtered data dynamically from a backend server. Common examples include product search, user lookup, or searching posts from a remote API.
TextInput to capture search textfetch()FlatListThe basic flow is:
// React Native search using API with fetch
import React, { useState } from "react";
import { View, TextInput, FlatList, Text } from "react-native";
const SearchApiExample = () => {
const [query, setQuery] = useState("");
const [data, setData] = useState([]);
const searchData = async (text) => {
// Call API with search query
const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
const result = await response.json();
// Filter data based on user input
const filtered = result.filter(item =>
item.name.toLowerCase().includes(text.toLowerCase())
);
setData(filtered);
};
return (
<View>
<TextInput
placeholder="Search user..."
value={query}
onChangeText={(text) => {
setQuery(text);
searchData(text);
}}
/>
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text>{item.name}</Text>
)}
/>
</View>
);
};
export default SearchApiExample;
Interact with the simulator below. As you type, the system simulates an API request (with a small network delay) and updates the list dynamically.
setTimeout