ScrollView makes content that's larger than the screen scrollable – unlike FlatList, though, without virtualization, so it's only suited for manageable amounts of content.

1. Description

A regular View simply "clips" content that exceeds its size – nothing scrolls automatically. ScrollView solves exactly that: it renders ALL its child elements immediately (no lazy loading) and makes them reachable by swiping.

2. Short example

<ScrollView>
  <Text>Very long text ...</Text>
</ScrollView>

3. Complete project

npx create-expo-app scrollview-demo
cd scrollview-demo

import { ScrollView, Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <ScrollView
      style={styles.scrollView}
      contentContainerStyle={styles.content}
      showsVerticalScrollIndicator={false}
    >
      <Text style={styles.heading}>About React Native</Text>
      {[1, 2, 3, 4, 5, 6, 7, 8].map((number) => (
        <View key={number} style={styles.paragraph}>
          <Text>Paragraph number {number}: this is sample text long enough to make the page scroll.</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollView: { flex: 1, backgroundColor: '#fff' },
  content: { padding: 20, paddingTop: 60 },
  heading: { fontSize: 22, fontWeight: 'bold', marginBottom: 16 },
  paragraph: { marginBottom: 16 },
});

4. Explanation

• style on ScrollView itself affects the OUTER container (e.g. background color, flex behavior in the parent).
• contentContainerStyle, by contrast, affects the INNER, scrollable area (e.g. padding) – a common beginner mistake is setting padding on style instead of contentContainerStyle, leading to unexpected behavior.
• showsVerticalScrollIndicator={{false}} hides the small scroll bar on the right edge, for a cleaner look.

5. Outputs