React native – FlatList inside ScrollView in React-Native?

In this situation, if you aim for a homepage where you can scroll through a list of rectangles, it’s best to use FlatList instead of ScrollView, especially for handling a large number of items effectively. Nonetheless, given your existing ScrollView containing all the content, you can still attain your desired layout by placing a FlatList within the ScrollView.

import React from ‘react’;
import {

 SafeAreaView, ScrollView, FlatList, View, Text, StyleSheet } from 'react-native';

const RectangleComponent = ({ index }) => {
  return (
    <View key={index} style={styles.rectangle}>
      <Text>{`Rectangle ${index + 1}`}</Text>
    </View>
  );
};

const HomeScreen = () => {
  const renderRectangle = ({ index }) => <RectangleComponent index={index} />;

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        {/* Your existing content */}
        <Image />
        <Text>Some Text</Text>

        {/* FlatList for rectangles */}
        <FlatList
          data={Array.from(Array(10).keys())}
          renderItem={renderRectangle}
          keyExtractor={(item, index) => index.toString()}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rectangle: {
    height: 100,
    backgroundColor: 'lightblue',
    marginVertical: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomeScreen;

RectangleComponent represents each rectangle item in your list. It’s a functional component that takes an index as a prop and renders a rectangle with the corresponding index.

HomeScreen is your main component. It contains your existing content (image, text) within the ScrollView, and then a FlatList for rendering the rectangles.

renderRectangle is the function used by FlatList to render each item. It passes the index to RectangleComponent.

keyExtractor is used to generate keys for items in the FlatList.

By nesting the FlatList inside the ScrollView, you can maintain your existing scrollable layout while efficiently rendering a large number of rectangle items using FlatList.

Update
Feedback: I’m trying now, but i get this error: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality – use another VirtualizedList-backed container instead." –
frak01

The error you’re encountering indicates that nesting a FlatList (which is a virtualized list component) inside a ScrollView (another scrolling container) is not recommended because it can lead to issues with scrolling behavior and performance. To address this error, you need to remove the outer ScrollView and use only the FlatList as the main scrolling container. I will update the code –
Anthony Heremans

import React from 'react';
import { FlatList, SafeAreaView, StyleSheet, Text } from 'react-native';

const data = Array.from(Array(10).keys()).map(i => ({ key: String(i), name: `Rectangle ${i}` }));

const RectanglesComponent = () => {
  const renderItem = ({ item }) => (
    <SafeAreaView key={item.key} style={styles.rectangle}>
      <Text>{item.name}</Text>
    </SafeAreaView>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.key}
    />
  );
};

const styles = StyleSheet.create({
  rectangle: {
    // Your rectangle styles here
    width: 100,
    height: 50,
    backgroundColor: 'red',
    marginVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default RectanglesComponent;