Pull-to-refresh in React Native - Mini App: Build & Ship

Build: PullToRefreshScreen

A simple screen with a list of items that can be refreshed by pulling down from the top.

Target UI

-------------------------
| PullToRefreshScreen   |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| Item 4                |
| Item 5                |
|                       |
| Pull down to refresh  |
-------------------------

Display a vertical scrollable list of 5 items labeled 'Item 1' to 'Item 5'.

Implement pull-to-refresh gesture that triggers a refresh indicator.

When refreshed, update the list by appending ' - refreshed' to each item label.

Use React Native's RefreshControl component.

Ensure accessibility by adding appropriate accessibility labels.

Starter Code

React Native

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

export default function PullToRefreshScreen() {
  const [items, setItems] = useState([
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5'
  ]);
  const [refreshing, setRefreshing] = useState(false);

  // TODO: Add onRefresh function to update items

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={items}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Text style={{ padding: 20 }}>{item}</Text>}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={() => { /* TODO: Implement refresh logic */ }}
            accessibilityLabel="Pull to refresh list"
          />
        }
      />
    </SafeAreaView>
  );
}

Task 1

Solution

React Native

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

export default function PullToRefreshScreen() {
  const [items, setItems] = useState([
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5'
  ]);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setItems((prevItems) => prevItems.map(item => item.includes(' - refreshed') ? item : item + ' - refreshed'));
      setRefreshing(false);
    }, 1000); // Simulate network request delay
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={items}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Text style={{ padding: 20 }} accessibilityLabel={item}>{item}</Text>}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            accessibilityLabel="Pull to refresh list"
          />
        }
      />
    </SafeAreaView>
  );
}

We use React Native's RefreshControl inside the FlatList to enable pull-to-refresh. The onRefresh function sets the refreshing state to true, simulates a delay with setTimeout to mimic a network call, then updates the list items by appending ' - refreshed' only once to each item. Finally, it sets refreshing to false to hide the spinner. Accessibility labels are added to the refresh control and each item for screen readers.

Final Result

Completed Screen

-------------------------
| PullToRefreshScreen   |
-------------------------
| Item 1 - refreshed     |
| Item 2 - refreshed     |
| Item 3 - refreshed     |
| Item 4 - refreshed     |
| Item 5 - refreshed     |
|                       |
| Pull down to refresh  |
-------------------------

User pulls down on the list to trigger the refresh spinner.

After about 1 second, the list items update to show ' - refreshed' appended.

The refresh spinner disappears.

Stretch Goal

Add a button that resets the list items back to their original labels without ' - refreshed'.

💡 Hint

Add a button below the list that when pressed calls setItems with the original array ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'].