This question concerns many software developers, sometimes even experienced hands. It is because, in React Native, FlatList and ScrollView components can be used to display lists of content and enable scrolling.
However, let us look at their different use cases and abilities to help us decide when to use each.
1. Size of Content:
We can use ScrollView when we have a small or moderate amount of content that can fit within the viewport without performance issues. We can also use ScrollView when you need to scroll a single, small content area that doesn’t require virtualization.
On the other hand, if we have a long list of data or a potentially infinite list that requires efficient memory usage and performance optimizations, then we should use FlatList.
2. Code Performance
ScrollView renders all its child components at once, even if it’s not visible on the screen. This can impact performance if our list is large or changes dynamically. It is unsuitable for long lists with many items.
In comparison, FlatList renders items lazily, which means it only renders the items that are currently visible on the screen. This virtualization technique makes it efficient for handling large lists. It supports lazy loading, item recycling, and dynamic content updates without re-rendering the entire list. FlatList provides better performance for large datasets compared to ScrollView.
3. Horizontal and Vertical Scrolling
ScrollView is a general-purpose scrolling container and can be used for both horizontal and vertical scrolling. FlatList is suitable for both horizontal and vertical lists.
4. Ease of Use
ScrollView is simpler to set up and use compared to FlatList. FlatList requires specifying a data prop as an array of items and requires renderItem prop to define the appearance of each item.
Code Example: Should I Use ScrollView or FlatList?
Let us attempt to render a list of seventeen (17) items. Our list is expected to grow and become very large. We will explore two examples, one with FlatList and the other with ScrollView, to help us compare both.
Example 1: FlatList
In this example, we have a FlatList component rendering a list of items from the data array.
const data = [
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' },
{ id: 3, title: 'Item 3' },
{ id: 4, title: 'Item 4' },
{ id: 5, title: 'Item 5' },
{ id: 6, title: 'Item 6' },
{ id: 7, title: 'Item 7' },
{ id: 8, title: 'Item 8' },
{ id: 9, title: 'Item 9' },
{ id: 10, title: 'Item 10' },
{ id: 11, title: 'Item 11' },
{ id: 12, title: 'Item 12' },
{ id: 13, title: 'Item 13' },
{ id: 14, title: 'Item 14' },
{ id: 15, title: 'Item 15' },
{ id: 16, title: 'Item 16' },
{ id: 17, title: 'Item 17' },
];
Each item is wrapped in a View and displayed with a Text component.
const FlatListExample = () => {
const renderItem = ({ item }) => (
<View style={{ padding: 10 }}>
<Text>{item.title}</Text>
</View>
);
The renderItem function defines the appearance of each item, and keyExtractor is used to extract unique keys for each item.
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
);
};
export default FlatListExample;
Example 2: ScrollView
In this second example, we use a ScrollView component to create a scrollable view. Inside the ScrollView, we have multiple View components representing the items. Each item is displayed using a Text component.
const ScrollViewExample = () => {
return (
<ScrollView>
<View style={{ padding: 10 }}>
<Text>Item 1</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 2</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 3</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 4</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 5</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 6</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 7</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 8</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 9</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 10</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 11</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 12</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 13</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 14</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 15</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 16</Text>
</View>
<View style={{ padding: 10 }}>
<Text>Item 17</Text>
</View>
</ScrollView>
);
};
export default ScrollViewExample;
The content inside the ScrollView is manually provided without using a data array or dynamic rendering like in the FlatList example.
When we examine the two codes, we will find out that the ScrollView example was easier to set up when compared to that of FlatList. But we would choose FlatList over ScrollView because our list is large and expected to grow. FlatList will improve the performance of our code because it renders only items visible on the screen.
Summary
If we have a small to moderate amount of content, or a simple scrollable view, we can use ScrollView. For larger lists, lists with dynamic content, or lists that need performance optimizations, FlatList is the recommended choice.
Kindly find the complete example codes for FlatList and ScrollView below. You can grow the list and adjust them and see how each performs.
Use the Expo Go app to run and test your code in real time.
Example 1: FlatList (complete code)
Example 2: ScrollView (complete code)
