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.