Pull-to-refresh patterns in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this pull-to-refresh code?

Consider this React Native code snippet using RefreshControl. What will the user see when pulling down the list?

React Native

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

export default function App() {
  const [refreshing, setRefreshing] = useState(false);
  const [items, setItems] = useState(['Apple', 'Banana']);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      setItems([...items, 'Cherry']);
      setRefreshing(false);
    }, 1000);
  };

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

A The list shows 'Apple', 'Banana', and after pull-to-refresh, 'Cherry' is added to the list.

B The list shows only 'Apple' and 'Banana' and does not update after pull-to-refresh.

C The app crashes because RefreshControl requires a ScrollView, not FlatList.

D The pull-to-refresh indicator never stops spinning because refreshing is never set to false.

💡 Hint

Look at how refreshing state is set to false after 1 second.

The onRefresh function sets refreshing to true, then after 1 second adds 'Cherry' to the list and sets refreshing back to false. This causes the pull-to-refresh spinner to show briefly and the list to update.

❓ lifecycle

intermediate

What happens if you forget to set refreshing to false?

In a React Native pull-to-refresh pattern, what is the effect of never setting the refreshing state back to false after refresh?

React Native

const onRefresh = () => {
  setRefreshing(true);
  setTimeout(() => {
    // forgot to setRefreshing(false)
  }, 1000);
};

A The pull-to-refresh spinner keeps spinning indefinitely, blocking user interaction.

B The spinner disappears automatically after 1 second even if refreshing stays true.

C The app crashes with a runtime error about state updates.

D The list refreshes normally but the spinner never shows.

💡 Hint

Think about what controls the spinner visibility.

The refreshing prop controls the spinner. If it stays true, the spinner never stops spinning, confusing the user.

❓ navigation

advanced

How to preserve pull-to-refresh state when navigating back?

You have a screen with pull-to-refresh that fetches data. When navigating away and back, the list resets and does not keep refreshed data. How to fix this?

A Remove the pull-to-refresh feature to avoid state loss.

B Store the refreshed data in a global state or context so it persists across navigation.

C Call <code>setRefreshing(true)</code> in <code>useEffect</code> without fetching data again.

D Use <code>setTimeout</code> to delay navigation so data stays refreshed.

💡 Hint

Think about where the data lives and how navigation affects component state.

Component state resets on navigation. Storing data in a global store or context keeps it persistent, so the refreshed list remains when returning.

📝 Syntax

advanced

Which option correctly implements pull-to-refresh with functional component?

Choose the code snippet that correctly implements pull-to-refresh in React Native functional component.

A

const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
  setRefreshing(true);
  fetchData().then(() => setRefreshing(false));
};
<FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} />

B

const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
  fetchData().then(() => setRefreshing(false));
};
<FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} />

C

const [refreshing, setRefreshing] = useState(false);
const onRefresh = async () => {
  setRefreshing(true);
  await fetchData();
  setRefreshing(false);
};
<FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} />

D

const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
  setRefreshing(true);
  fetchData();
  setRefreshing(false);
};
<FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} />

💡 Hint

Remember to set refreshing true before fetching and false after fetch completes.

Option C uses async/await to set refreshing true before fetch and false after fetch completes, ensuring spinner shows correctly.

🔧 Debug

expert

Why does pull-to-refresh not trigger on Android?

This React Native app uses RefreshControl inside a ScrollView. Pull-to-refresh works on iOS but not on Android. What is the cause?

React Native

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

export default function App() {
  const [refreshing, setRefreshing] = useState(false);
  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 1000);
  };

  return (
    <ScrollView style={{flex:1}} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
      <Text>Pull down to refresh</Text>
    </ScrollView>
  );
}

A Android requires an extra prop <code>enabled={true}</code> on RefreshControl.

B RefreshControl is not supported on Android ScrollView, only on FlatList.

C The refreshing state must be initialized to true on Android for pull-to-refresh to work.

D Android requires the ScrollView to have a fixed height or flex style to enable pull-to-refresh.

💡 Hint

Check the container style and how Android handles ScrollView layout.

On Android, ScrollView must have a fixed height or flex style so it can detect pull gestures for RefreshControl. Without it, pull-to-refresh won't trigger.

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