ScrollView
ScrollView renders all its children at once, making it suitable for short content that needs to scroll.
Basic Usage
import { ScrollView, Text, View } from 'react-native'
const Screen = () => (
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ padding: 16 }}
>
<Text>Item 1</Text>
<Text>Item 2</Text>
{/* ... many items */}
</ScrollView>
)
Horizontal ScrollView
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<Card />
<Card />
<Card />
</ScrollView>
Useful Props
<ScrollView
horizontal={false}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
onScroll={handleScroll}
scrollEventThrottle={16}
pagingEnabled={true}
/>
⚠️ Performance Warning
Never put a FlatList or a large dynamic list inside a ScrollView — this breaks FlatList's virtualization and causes performance issues. Use FlatList with ListHeaderComponent instead.