Infinite scrolling (onEndReached) in React Native - Mini App: Build & Ship

Build: Infinite Scroll List

A screen that shows a list of items and loads more items automatically when the user scrolls to the bottom.

Target UI

-------------------------
| Infinite Scroll List   |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| ...                   |
| Loading more...       |
-------------------------

Display a scrollable list of items with initial 20 items labeled 'Item 1' to 'Item 20'.

When the user scrolls near the bottom, automatically load 20 more items and append to the list.

Show a loading indicator at the bottom while loading more items.

Use FlatList component with onEndReached to detect scrolling near the end.

Ensure no duplicate items and smooth scrolling experience.

Starter Code

React Native

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

export default function InfiniteScrollList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // TODO: Load initial 20 items here
  }, []);

  const loadMore = () => {
    // TODO: Load 20 more items and update data
  };

  const renderItem = ({ item }) => <Text style={styles.item}>{item}</Text>;

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item}
        renderItem={renderItem}
        onEndReached={loadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={loading ? <ActivityIndicator size="small" /> : null}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc' },
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function InfiniteScrollList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  useEffect(() => {
    loadMore();
  }, []);

  const loadMore = useCallback(() => {
    if (loading) return;
    setLoading(true);
    setTimeout(() => {
      const newItems = [];
      const start = (page - 1) * 20 + 1;
      for (let i = start; i < start + 20; i++) {
        newItems.push(`Item ${i}`);
      }
      setData(prevData => [...prevData, ...newItems]);
      setPage(prevPage => prevPage + 1);
      setLoading(false);
    }, 1000); // simulate network delay
  }, [loading, page]);

  const renderItem = ({ item }) => <Text style={styles.item}>{item}</Text>;

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item}
        renderItem={renderItem}
        onEndReached={loadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={loading ? <ActivityIndicator size="small" /> : null}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc' },
});

This solution uses React Native's FlatList to display a list of items. Initially, it loads 20 items labeled 'Item 1' to 'Item 20'.

The loadMore function adds 20 more items each time it is called, simulating a network delay with setTimeout. It uses a loading state to avoid multiple loads at once.

The onEndReached prop triggers loadMore when the user scrolls near the bottom. A loading spinner shows at the bottom while loading more items.

This creates a smooth infinite scrolling experience without duplicates.

Final Result

Completed Screen

-------------------------
| Infinite Scroll List   |
-------------------------
| Item 1                |
| Item 2                |
| Item 3                |
| ...                   |
| Item 40               |
| Loading more...       |
-------------------------

User scrolls down the list.

When near bottom, new items (e.g., Item 21 to Item 40) load automatically.

Loading spinner appears at bottom while loading.

List grows smoothly with new items appended.

Stretch Goal

Add a pull-to-refresh feature to reload the list from the start.

💡 Hint

Use FlatList's refreshing and onRefresh props to implement pull-to-refresh.