How can I use FlatList to display data from an API in React Native?

How can I use FlatList to display data from an API in React Native?

You can use the FlatList component in React Native to efficiently render a list of data fetched from an API. First, you'll need to fetch the data using a method like fetch or axios, then pass the data to the FlatList as the 'data' prop.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id.toString()}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  );
};

export default App;

What if the API data is paginated?

If the API data is paginated, you can implement pagination by keeping track of the current page and fetching more data when the user scrolls to the end of the list. You can use the 'onEndReached' prop of FlatList to trigger the fetch for the next page.