ScrollView macht Inhalte scrollbar, die größer als der Bildschirm sind – anders als FlatList aber ohne Virtualisierung, also nur für überschaubare Inhaltsmengen geeignet.

1. Beschreibung

Ein normaler View "schneidet" Inhalte, die über seine Größe hinausgehen, einfach ab – nichts scrollt automatisch. ScrollView löst genau das: es rendert ALLE seine Kind-Elemente sofort (kein Lazy Loading) und macht sie durch Wischen erreichbar.

2. Kurzes Beispiel

<ScrollView>
  <Text>Sehr langer Text ...</Text>
</ScrollView>

3. Komplettes Projekt

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}>Über React Native</Text>
      {[1, 2, 3, 4, 5, 6, 7, 8].map((nummer) => (
        <View key={nummer} style={styles.absatz}>
          <Text>Absatz Nummer {nummer}: Dies ist Beispieltext, der lang genug ist, um die Seite zum Scrollen zu bringen.</Text>
        </View>
      ))}
    </ScrollView>
  );
}

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

4. Erklärung

• style auf ScrollView selbst betrifft den ÄUSSEREN Container (z. B. Hintergrundfarbe, Flex-Verhalten in der Elternkomponente).
• contentContainerStyle betrifft dagegen den INNEREN, scrollbaren Bereich (z. B. Innenabstand) – ein häufiger Anfängerfehler ist, Padding auf style statt contentContainerStyle zu setzen, was zu unerwartetem Verhalten führt.
• showsVerticalScrollIndicator={{false}} blendet den kleinen Scrollbalken am rechten Rand aus, für ein aufgeräumteres Erscheinungsbild.

5. Ausgaben