How do I implement refresh control in a React Native FlatList?

How do I implement refresh control in a React Native FlatList?

You can use the RefreshControl component from React Native. First, import it, then add it to your FlatList.

Can you show me a code example?

Sure! Here's a simple example:

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

const MyList = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // Fetch data or perform any action
    setTimeout(() => setRefreshing(false), 2000);
  };

  return (
    <FlatList
      data={[...]} // your data here
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={item => item.id}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

This will add a pull-to-refresh feature to your FlatList.

What if I want to customize the refresh control?

You can customize the RefreshControl by using props like tintColor, title, and titleColor. For example:

<RefreshControl
  refreshing={refreshing}
  onRefresh={onRefresh}
  tintColor='blue'
  title='Loading...'
  titleColor='red'
/>