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

Build: PullToRefreshScreen

A simple screen that shows a list of items and allows the user to pull down to refresh the list.

Target UI

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

Display a vertical scrollable list of at least 5 items.

Implement pull-to-refresh gesture to reload the list.

Show a loading spinner at the top while refreshing.

After refresh, update the list with new items or a timestamp.

Use React Native's RefreshControl component.

Starter Code

React Native

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

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

  const onRefresh = () => {
    // TODO: Implement refresh logic
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

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

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      const newTimestamp = new Date().toLocaleTimeString();
      setItems([
        `Refreshed at ${newTimestamp} - Item 1`,
        `Refreshed at ${newTimestamp} - Item 2`,
        `Refreshed at ${newTimestamp} - Item 3`,
        `Refreshed at ${newTimestamp} - Item 4`,
        `Refreshed at ${newTimestamp} - Item 5`
      ]);
      setRefreshing(false);
    }, 2000);
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={(item) => item}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc' }
});

This solution uses React Native's RefreshControl inside a FlatList to enable pull-to-refresh functionality.

When the user pulls down, onRefresh is called. It sets refreshing state to true, which shows the spinner.

We simulate fetching new data with setTimeout for 2 seconds. After that, we update the list items with new strings that include the current time to show the refresh happened.

Finally, refreshing is set to false to hide the spinner.

This pattern is common in mobile apps to let users refresh content easily.

Final Result

Completed Screen

-------------------------
| PullToRefreshScreen   |
|-----------------------|
| > Refreshed at 12:00:01 - Item 1 |
| > Refreshed at 12:00:01 - Item 2 |
| > Refreshed at 12:00:01 - Item 3 |
| > Refreshed at 12:00:01 - Item 4 |
| > Refreshed at 12:00:01 - Item 5 |
|                       |
| Pull down to refresh  |
-------------------------

User pulls down on the list to trigger refresh.

A spinner appears at the top indicating loading.

After 2 seconds, the list updates with new timestamped items.

Spinner disappears and user can scroll the updated list.

Stretch Goal

Add a message at the bottom that shows the last refreshed time.

💡 Hint

Use a state variable to store the last refresh time and display it below the FlatList.