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

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you pull down on a ScrollView with RefreshControl?

In React Native, when you add a RefreshControl to a ScrollView, what is the expected behavior when the user pulls down on the list?

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), 2000);
  };

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

A The list scrolls up and triggers the onRefresh function, showing a spinner until refreshing is true.

B The list scrolls down and immediately reloads without showing any spinner.

C The list scrolls down but does not trigger any function or show any spinner.

D The list scrolls down and triggers the onRefresh function, showing a spinner until refreshing is false.

💡 Hint

Think about what the RefreshControl component does when refreshing is true.

When you pull down on a ScrollView with RefreshControl, it triggers the onRefresh callback and shows a spinner until the refreshing state is set to false.

❓ lifecycle

intermediate

What is the role of the refreshing state in Pull-to-refresh?

In a React Native pull-to-refresh implementation, why do we need a refreshing state variable?

React Native

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

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

A It disables the ScrollView while refreshing is true.

B It stores the data fetched from the server during refresh.

C It controls whether the spinner is visible and stops it when data loading finishes.

D It triggers the onRefresh function automatically when set to true.

💡 Hint

Think about what the RefreshControl uses to show or hide the loading spinner.

The refreshing state tells RefreshControl when to show or hide the spinner. Setting it to true shows the spinner, and false hides it after data loads.

📝 Syntax

advanced

Which code snippet correctly implements pull-to-refresh in a FlatList?

Select the code snippet that correctly uses RefreshControl with a FlatList to enable pull-to-refresh.

A

import { FlatList, RefreshControl } from 'react-native';

<FlatList
  data={data}
  renderItem={renderItem}
  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
/>

B

import { FlatList } from 'react-native';

<FlatList
  data={data}
  renderItem={renderItem}
  onRefresh={onRefresh}
  refreshing={refreshing}
/>

C

import { FlatList } from 'react-native';

<FlatList
  data={data}
  renderItem={renderItem}
  refreshControl={RefreshControl(refreshing, onRefresh)}
/>

D

import { FlatList, RefreshControl } from 'react-native';

<FlatList
  data={data}
  renderItem={renderItem}
  refreshControl={<RefreshControl onRefresh={onRefresh} />}
/>

💡 Hint

Remember that RefreshControl is a component and must be passed as JSX inside refreshControl prop.

Option A correctly passes a RefreshControl component with refreshing and onRefresh props. Option A uses props that FlatList does not support directly. Option A calls RefreshControl like a function, which is invalid. Option A misses the refreshing prop, so spinner won't show.

🔧 Debug

advanced

Why does the spinner never stop after pull-to-refresh?

Given this code snippet, why does the spinner keep spinning forever after pulling to refresh? const [refreshing, setRefreshing] = useState(false); const onRefresh = () => { setRefreshing(true); fetchData(); };

React Native

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

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

A Because fetchData is synchronous and blocks the UI thread.

B Because setRefreshing(false) is never called after fetchData finishes, so spinner stays visible.

C Because setRefreshing(true) should be called after fetchData, not before.

D Because refreshing state should be initialized as true, not false.

💡 Hint

Think about when the refreshing state is set back to false.

The spinner stays because refreshing remains true. The code never sets refreshing to false after data loads, so the spinner never hides.

🧠 Conceptual

expert

How to ensure accessibility for pull-to-refresh in React Native?

Which approach best improves accessibility for users relying on screen readers when implementing pull-to-refresh in React Native?

A Add an accessible label to the RefreshControl and announce refresh status changes using accessibilityLiveRegion.

B Add a button outside the list to manually trigger refresh instead of pull-to-refresh.

C Use only visual spinner without any accessibility props because screen readers ignore RefreshControl.

D Disable pull-to-refresh for screen reader users to avoid confusion.

💡 Hint

Think about how screen readers get notified about UI changes.

Adding accessible labels and using accessibilityLiveRegion helps screen readers announce when refresh starts and ends, improving accessibility.

Practice

1. What is the main purpose of using RefreshControl in a React Native app?

easy

A. To enable pull-to-refresh functionality in scrollable lists

B. To add animations to buttons

C. To handle navigation between screens

D. To style text components

Solution

1. Step 1: Understand the role of RefreshControl

   RefreshControl is a component used inside scrollable views to provide pull-to-refresh behavior.

2. Step 2: Identify its main purpose

   Its main purpose is to let users pull down on a list to trigger a refresh action, usually to update content.

3. Final Answer:

   To enable pull-to-refresh functionality in scrollable lists -> Option A

4. Quick Check:

   Pull-to-refresh = RefreshControl usage [OK]

Hint: RefreshControl is for pull-to-refresh in lists [OK]

Common Mistakes:

• Confusing RefreshControl with navigation or styling
• Thinking it adds animations to buttons
• Using it outside scrollable components

2. Which of the following is the correct way to use RefreshControl inside a ScrollView?

easy

A.

B.

C. } />

D. } />

Solution

1. Step 1: Recall correct RefreshControl usage

   The refreshControl prop expects a RefreshControl component with props refreshing and onRefresh.

2. Step 2: Match correct syntax

   <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} /> correctly passes refreshing and onRefresh inside <RefreshControl /> as a JSX element.

3. Final Answer:

   <ScrollView refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} /> -> Option D

4. Quick Check:

   refreshControl prop = RefreshControl component with correct props [OK]

Hint: Use refreshControl prop with RefreshControl JSX [OK]

Common Mistakes:

• Passing props directly to ScrollView instead of RefreshControl
• Calling RefreshControl as a function instead of JSX
• Using wrong prop names like refresh or refreshHandler

3. Given this code snippet, what will happen when the user pulls down the list?

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

const onRefresh = React.useCallback(() => {
  setRefreshing(true);
  setTimeout(() => setRefreshing(false), 2000);
}, []);

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

medium

A. The spinner never shows because refreshing is false

B. The spinner shows for 2 seconds, then hides automatically

C. The spinner shows indefinitely and never hides

D. The app crashes due to missing dependencies

Solution

1. Step 1: Understand the refreshing state changes

   When the user pulls down, onRefresh sets refreshing to true, showing the spinner.

2. Step 2: Analyze the timeout effect

   After 2 seconds, setRefreshing(false) hides the spinner automatically.

3. Final Answer:

   The spinner shows for 2 seconds, then hides automatically -> Option B

4. Quick Check:

   refreshing true then false after timeout = spinner shows then hides [OK]

Hint: Refreshing true shows spinner; false hides it [OK]

Common Mistakes:

• Assuming spinner never hides without manual reset
• Thinking refreshing starts as true initially
• Confusing useCallback dependencies causing crashes

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

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

function onRefresh() {
  setRefreshing(true);
  fetchData();
  setRefreshing(false);
}

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

medium

A. onRefresh should be async but is not

B. refreshControl prop should be refreshControl (lowercase c)

C. setRefreshing(false) is called immediately, hiding spinner too soon

D. FlatList does not support RefreshControl

Solution

1. Step 1: Check refreshing state timing

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

2. Step 2: Understand spinner behavior

   This causes the spinner to hide right away, not showing the loading state properly.

3. Final Answer:

   setRefreshing(false) is called immediately, hiding spinner too soon -> Option C

4. Quick Check:

   Refreshing state must stay true until data loads [OK]

Hint: Keep refreshing true until data fetch completes [OK]

Common Mistakes:

• Calling setRefreshing(false) too early
• Misnaming refreshControl prop
• Assuming FlatList can't use RefreshControl

5. You want to add pull-to-refresh to a SectionList that fetches new data asynchronously. Which approach correctly ensures the spinner shows during fetch and hides after completion?

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

const onRefresh = async () => {
  // What goes here?
};

hard

A. setRefreshing(true); await fetchData(); setRefreshing(false);

B. await fetchData(); setRefreshing(true); setRefreshing(false);

C. setRefreshing(false); await fetchData(); setRefreshing(true);

D. setRefreshing(true); fetchData(); setRefreshing(false);

Solution

1. Step 1: Set refreshing true before fetching

   Call setRefreshing(true) to show spinner before starting data fetch.

2. Step 2: Await fetchData and then set refreshing false

   Use await fetchData() to wait for data, then call setRefreshing(false) to hide spinner after completion.

3. Final Answer:

   setRefreshing(true); await fetchData(); setRefreshing(false); -> Option A

4. Quick Check:

   Show spinner before await, hide after await [OK]

Hint: Set refreshing true before await, false after await [OK]

Common Mistakes:

• Setting refreshing false before fetch completes
• Not awaiting fetchData causing spinner to hide early
• Switching order of setRefreshing calls