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.