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.