Infinite scrolling (onEndReached) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to call the function when the list reaches the end.

React Native

import React from 'react';
import { FlatList } from 'react-native';

export default function MyList() {
  const loadMore = () => {
    console.log('Load more items');
  };

  return (
    <FlatList
      data={[]}
      renderItem={() => null}
      onEndReached=[1]
    />
  );
}

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

AloadMore()

BloadMore

ConEndReached

D() => loadMore()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the function name, which calls it immediately.

Passing a string instead of a function.

The onEndReached prop expects a function reference, so you pass loadMore without parentheses.

2fill in blank

medium

Complete the code to set the threshold for triggering onEndReached when the user scrolls near the bottom.

React Native

<FlatList
  data={items}
  renderItem={renderItem}
  onEndReached={loadMore}
  onEndReachedThreshold=[1]
/>

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

A0.5

B50

C5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using integers like 5 or 50 which are invalid for this prop.

Using 1 which triggers only at the very bottom.

The onEndReachedThreshold expects a decimal between 0 and 1 representing how far from the bottom the event triggers. 0.5 means halfway.

3fill in blank

hard

Fix the error in the code to prevent multiple calls when reaching the end.

React Native

const [loading, setLoading] = React.useState(false);

const loadMore = () => {
  if ([1]) return;
  setLoading(true);
  fetchMoreItems().then(() => setLoading(false));
};

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

Atrue

B!loading

Cloading

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for !loading which allows multiple calls.

Using true or false literals instead of the state variable.

Check if loading is true to avoid starting another load while one is in progress.

4fill in blank

hard

Fill both blanks to correctly update the list with new items and stop loading.

React Native

const [items, setItems] = React.useState([]);
const [loading, setLoading] = React.useState(false);

const loadMore = () => {
  if (loading) return;
  setLoading(true);
  fetchMoreItems().then(newItems => {
    setItems([1]);
    setLoading([2]);
  });
};

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

AprevItems => [...prevItems, ...newItems]

BnewItems

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing items instead of appending.

Setting loading to true instead of false.

Use a function to append new items to the existing list and set loading to false after loading finishes.

5fill in blank

hard

Fill all three blanks to create a FlatList with infinite scrolling, loading indicator, and proper key extraction.

React Native

import React from 'react';
import { FlatList, ActivityIndicator, View, Text } from 'react-native';

export default function InfiniteList({ data, loadMore, loading }) {
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.[1]
      renderItem={({ item }) => <Text>{item.name}</Text>}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={() => (
        loading ? <[2] size="large" color="#0000ff" /> : <[3] />
      )}
    />
  );
}

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

Aid

BActivityIndicator

CView

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-unique keys.

Not showing a loading spinner.

Returning null instead of a View for footer.

Use id as the key, show ActivityIndicator when loading, and an empty View when not loading.