FlatList inside ScrollView in React-Native? [closed]

Question

I'm learning to use React Native by creating an application, so I'm creating a scrollable homepage and inside it 10 rectangles with different names. If I understand correctly, you need to use flatlist to manage the scrolling of these rectangles, but I already have a scrollview within the same page. I have something like this:

<ScrollView> 
  <Image/>
  <Text/>
  <RectangleComponents/>
</ScrollView>

Inside RectanglesComponent is the code that creates the 10 rectangles. I'm currently using a ScrollView here too because I couldn't use FlatList inside a ScrollView. Example of RectanglesComponent:

    return (
    <SafeAreaView style={styles.container}>
        {Array.from(Array(10).keys()).map(i => ( 
            <SafeAreaView key={i} style={styles.rectangle}/>
    </SafeAreaView>
    );

In this case, I need to know if FlatList or ScrollView is good?

Answer 1

You should choose either ScrollView or FlatList

According to React Native docs (https://reactnative.dev/docs/scrollview):

<ScrollView> vs <FlatList> - which one to use?

ScrollView renders all its react child components at once, but this has a performance downside.

Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

FlatList is also handy if you want to render separators between your items, multiple columns, infinite scroll loading, or any number of other features it supports out of the box.

Reading your requirement, FlatList is the best and easiest way to implement.