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.