ScrollView and FlatList
On the web, a long page scrolls by itself. On a phone, nothing scrolls unless you ask. Sprout's settings screen is short and fixed; its plant list might hold five plants or five hundred. React Native has two main answers, and picking the wrong one makes a big list slow.
The rule
ScrollView renders everything; FlatList renders only what is near the screen.
ScrollView is a scrollable View. Every child is created at once, even the ones far off screen:
<ScrollView contentContainerStyle={{ padding: 16 }}>
<Text>Settings</Text>
<Text>Units</Text>
<Text>About Sprout</Text>
</ScrollView>That is fine for a short, known amount of content. Styles that shape the inner content, such as padding, go in contentContainerStyle. Add horizontal to scroll sideways.
FlatList is for data lists. It virtualizes: it creates rows only for items on or near the screen, and recycles memory as you scroll.
<FlatList
data={plants}
keyExtractor={(plant) => plant.id}
renderItem={({ item }) => <PlantCard plant={item} />}
ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
ListEmptyComponent={<Text>No plants yet. Add one!</Text>}
/>datais the array.renderItemreceives an object; the current element is itsitemfield (plusindex).keyExtractorreturns a unique string for each item so React can track rows.ListEmptyComponent,ListHeaderComponentandListFooterComponentfill the obvious gaps.onEndReachedfires near the bottom, for loading more.
FlatList can also scroll sideways with horizontal, or show a grid with numColumns={2}, which suits a wall of plant photos.
Do not put a FlatList inside a ScrollView that scrolls the same way. The outer one forces every row to render, which defeats virtualization, and React Native warns about it. Use the list's header and footer props instead.
The shortcut
Ask "do I know how much content there is?" A short, fixed amount: ScrollView. An array that can grow: FlatList.
Settings
Six fixed rows, written by hand. Small and known:
ScrollView.
Drills
Answer fast — trust the rule.
Why is FlatList better than ScrollView for 500 plants?
Inside renderItem={({ item }) => ...}, what is item?
What should keyExtractor return?
Where does padding around a ScrollView's inner content belong?
You want a big title above the plant list. What is the better approach?
Remember
ScrollViewrenders everything;FlatListrenders what is near the screen.- Ask "do I know how much content there is?"
- Trap: a
FlatListinside a same-directionScrollView.