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

const DataList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/items')
      .then(response => response.json())
      .then(result => {
        setData(result);
        setLoading(false);
      })
      .catch(error => console.error(error));
  }, []);

  if (loading) return <ActivityIndicator size="large" />;

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

Progress:

• Set up state management (data, loading, error)
• Create fetch function with proper error handling
• Implement useEffect for data loading
• Add loading and error UI states
• Configure FlatList with fetched data
• Handle pull-to-refresh and pagination

Step 1: State Setup

JavaScript
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [refreshing, setRefreshing] = useState(false);

Step 2: Fetch Function

JavaScript
const fetchData = async () => {
  try {
    setLoading(true);
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
    setError(null);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

Step 3: Pull-to-Refresh

JavaScript
const onRefresh = async () => {
  setRefreshing(true);
  await fetchData();
  setRefreshing(false);
};