ScrollView Component

Making Content Scrollable

On mobile devices, screens are small. Content often doesn't fit in one view. The ScrollView component solves this by making its content scrollable. You wrap your content in a ScrollView and users can scroll through it by swiping up and down.

ScrollView renders all its children at once — it loads everything into memory. This works great for small amounts of content but can be slow for long lists. For large datasets, you'll want to use FlatList instead, which we'll cover next.

Basic ScrollView

Here's a simple ScrollView that lets users scroll through a long list of items:

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

function LongList() {
  return (
    <ScrollView style={styles.container}>
      {Array.from({ length: 20 }, (_, i) => (
        <View key={i} style={styles.item}>
          <Text style={styles.text}>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  item: { padding: 20, borderBottomWidth: 1, borderBottomColor: '#ccc' },
  text: { fontSize: 18 },
});

export default LongList;

The ScrollView automatically adds scrolling when its children exceed the available space. You don't need to calculate anything — just put your content inside and it works.

Scroll Directions

By default, ScrollView scrolls vertically. But you can also make it scroll horizontally — perfect for image carousels or horizontal menus.

<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }} />
  <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} />
  <View style={{ width: 200, height: 200, backgroundColor: 'green' }} />
</ScrollView>

Set horizontal to true for horizontal scrolling. The showsHorizontalScrollIndicator and showsVerticalScrollIndicator props control whether the scroll indicator is visible. You can also use pagingEnabled to make it snap to full pages as you scroll.

Handling Scroll Events

Sometimes you need to respond to scrolling — maybe to show a header when the user scrolls down, or to load more content when they reach the bottom. ScrollView provides event handlers for this.

<ScrollView
  onScroll={(event) => {
    const yOffset = event.nativeEvent.contentOffset.y;
    console.log('Scrolled to:', yOffset);
  }}
  scrollEventThrottle={16}
>
  {/* Your content */}
</ScrollView>

The onScroll event fires as the user scrolls, giving you the current scroll position. The scrollEventThrottle controls how often the event fires — 16 milliseconds gives you about 60 events per second, which is smooth enough for most animations.