Pull-to-refresh patterns in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native component used for pull-to-refresh.

React Native

import { FlatList, [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AScrollView

BRefreshControl

CTouchableOpacity

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Importing ScrollView instead of RefreshControl

Using Button for pull-to-refresh

The RefreshControl component is used to add pull-to-refresh functionality in React Native.

2fill in blank

medium

Complete the code to set the refreshing state in the component.

React Native

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

Drag options to blanks, or click blank then click option'

AsetRefreshing

BrefreshHandler

CsetRefresh

DsetRefreshControl

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different setter name that doesn't match the state variable

Confusing the handler function with the setter

The setter function for the refreshing state is conventionally named setRefreshing.

3fill in blank

hard

Fix the error in the RefreshControl usage by completing the missing prop name.

React Native

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

Drag options to blanks, or click blank then click option'

AhandleRefresh

BsetRefreshing

ConRefresh

Drefreshing

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the prop name instead of the function

Passing the state variable instead of a function

The onRefresh prop expects a function to call when the user pulls to refresh. Here, handleRefresh is the function name.

4fill in blank

hard

Fill both blanks to complete the pull-to-refresh handler that sets refreshing state correctly.

React Native

const handleRefresh = () => {
  [1](true);
  setTimeout(() => {
    [2](false);
  }, 2000);
};

Drag options to blanks, or click blank then click option'

AsetRefreshing

Brefreshing

CsetRefresh

Drefresh

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable instead of the setter

Using different function names for setting state

The function setRefreshing is called to update the refreshing state to true and then back to false after 2 seconds.

5fill in blank

hard

Fill all three blanks to complete the FlatList with pull-to-refresh using RefreshControl.

React Native

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  refreshControl={<RefreshControl refreshing=[1] onRefresh=[2] colors={["blue"]} />}
  contentContainerStyle={styles.[3]
/>

Drag options to blanks, or click blank then click option'

Arefreshing

BhandleRefresh

Ccontainer

DrefreshControl

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up state variable and setter function

Using wrong style property name

The refreshing state controls the spinner, handleRefresh is the function called on pull, and container is a style for the content container.

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