? React Native List with API Data

? Quick Overview

Displaying a list of data fetched from an API is one of the most common tasks in React Native apps. Typically, this is achieved using the FlatList component combined with asynchronous API calls.

? Key Concepts

• Fetching data from a remote API
• Using useEffect for lifecycle handling
• Storing API data using useState
• Rendering efficient lists using FlatList

? Syntax / Theory

React Native provides the FlatList component for rendering large lists efficiently. Data is usually fetched inside useEffect and stored in state.

? Code Example(s)

// React Native FlatList with API data example
import React, { useEffect, useState } from "react";
import { View, Text, FlatList } from "react-native";

const App = () => {
const [users, setUsers] = useState([]);

useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => setUsers(data));
}, []);

return (

 item.id.toString()}
renderItem={({ item }) => (
{item.name}
)}
/>

);
};

export default App;

? Live Output / Explanation

? Interactive Example / Visual Flow

Click the button below to simulate fetching data from a real API and rendering it into a list, just like React Native does.

? Use Cases

• User lists in admin dashboards
• Product listings in e-commerce apps
• Chat message histories
• News feed or article lists