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.

Practice

1. What is the main purpose of using RefreshControl in React Native pull-to-refresh patterns?

easy

A. To load images asynchronously in the list.

B. To navigate between different screens in the app.

C. To provide a visual indicator and handle the refresh action when the user pulls down on a list.

D. To style the list items with custom colors.

Solution

1. Step 1: Understand the role of RefreshControl

   RefreshControl is used to show a spinner and detect pull-down gestures on scrollable lists.

2. Step 2: Identify its purpose in pull-to-refresh

   It triggers a refresh callback and shows a loading indicator while data updates.

3. Final Answer:

   To provide a visual indicator and handle the refresh action when the user pulls down on a list. -> Option C

4. Quick Check:

   RefreshControl = Visual indicator + refresh handler [OK]

Hint: RefreshControl shows spinner and triggers refresh on pull [OK]

Common Mistakes:

• Confusing RefreshControl with navigation components
• Thinking RefreshControl styles list items
• Assuming RefreshControl loads images

2. Which of the following is the correct way to add pull-to-refresh to a FlatList in React Native?

easy

A. } />

B.

C.

D.

Solution

1. Step 1: Recall correct RefreshControl usage

   React Native uses the refreshControl prop on scrollable components like FlatList to enable pull-to-refresh.

2. Step 2: Match correct syntax

   The correct syntax is passing a RefreshControl component with refreshing and onRefresh props inside refreshControl.

3. Final Answer:

   <FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} /> -> Option A

4. Quick Check:

   refreshControl prop with RefreshControl component = correct [OK]

Hint: Use refreshControl prop with RefreshControl component [OK]

Common Mistakes:

• Using non-existent props like onPullRefresh
• Passing boolean props directly without RefreshControl
• Confusing prop names like pullToRefresh

3. Given this code snippet, what will be the value of refreshing after the user pulls down and the onRefresh function finishes?

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

const onRefresh = () => {
  setRefreshing(true);
  fetchData().then(() => setRefreshing(false));
};

medium

A. true

B. false

C. undefined

D. null

Solution

1. Step 1: Analyze state changes during refresh

   Initially, refreshing is false. When onRefresh runs, it sets refreshing to true.

2. Step 2: Understand asynchronous fetchData effect

   After fetchData completes, setRefreshing(false) runs, setting refreshing back to false.

3. Final Answer:

   false -> Option B

4. Quick Check:

   Refreshing ends with false after fetch completes [OK]

Hint: Refreshing state toggles true then false after fetch [OK]

Common Mistakes:

• Assuming refreshing stays true forever
• Confusing asynchronous timing of setState
• Ignoring the promise resolution

4. Identify the error in this pull-to-refresh implementation:

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

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

return (
  <FlatList
    data={data}
    refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
  />
);

medium

A. setRefreshing(false) is called immediately, not after fetchData finishes.

B. refreshControl prop is missing onRefresh handler.

C. refreshing state is not initialized.

D. FlatList cannot use RefreshControl.

Solution

1. Step 1: Check refresh state timing

   The code calls setRefreshing(false) immediately after fetchData(), without waiting for data to load.

2. Step 2: Understand asynchronous fetchData

   Since fetchData is async, refreshing should be set to false only after it completes, typically in a .then() or async/await.

3. Final Answer:

   setRefreshing(false) is called immediately, not after fetchData finishes. -> Option A

4. Quick Check:

   Refreshing must end after fetch completes, not immediately [OK]

Hint: Wait for fetchData to finish before setting refreshing false [OK]

Common Mistakes:

• Calling setRefreshing(false) too early
• Ignoring async nature of fetchData
• Misplacing refreshControl props

5. You want to implement pull-to-refresh on a ScrollView that loads a list of items from an API. Which approach correctly updates the UI and handles the refreshing state? A) Use refreshControl with a RefreshControl component, manage a boolean refreshing state, and update the list data inside the onRefresh callback after fetching. B) Use onRefresh prop directly on ScrollView and update data without managing refreshing state. C) Use a button to reload data instead of pull-to-refresh. D) Use refreshing state only without RefreshControl component.

hard

A. Use refreshing state only without RefreshControl component.

B. Use onRefresh prop on ScrollView without refreshing state.

C. Use a button to reload data instead of pull-to-refresh.

D. Use refreshControl with RefreshControl, manage refreshing state, update data in onRefresh.

Solution

1. Step 1: Understand ScrollView pull-to-refresh pattern

   React Native requires RefreshControl passed via refreshControl prop to enable pull-to-refresh on ScrollView.

2. Step 2: Manage refreshing state and update data

   You must manage a boolean refreshing state to show the spinner and update the list data inside the onRefresh callback after fetching new data.

3. Final Answer:

   Use refreshControl with RefreshControl, manage refreshing state, update data in onRefresh. -> Option D

4. Quick Check:

   RefreshControl + refreshing state + data update = correct pattern [OK]

Hint: Always use RefreshControl with refreshing state on ScrollView [OK]

Common Mistakes:

• Trying to use onRefresh prop directly on ScrollView
• Not managing refreshing state boolean
• Skipping RefreshControl component