How to Use ScrollView in React Native: Simple Guide

In React Native, use the ScrollView component to create a scrollable container for content that exceeds the screen size. Wrap your content inside ScrollView to enable vertical or horizontal scrolling automatically.

Syntax

The ScrollView component wraps content that needs scrolling. It supports props like horizontal to scroll sideways and showsVerticalScrollIndicator to toggle scroll bars.

Use it like this:

• <ScrollView>: Container for scrollable content.
• horizontal: Optional boolean to scroll horizontally.
• contentContainerStyle: Style for inner content layout.

javascript

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

export default function App() {
  return (
    <ScrollView horizontal={false} contentContainerStyle={styles.container}>
      <Text>Scrollable content here</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  }
});

Output

A vertical scrollable area with padded text inside.

Example

This example shows a vertical ScrollView with multiple colored boxes that overflow the screen height, enabling scrolling.

javascript

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

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.contentContainer}>
      {[...Array(20)].map((_, i) => (
        <View key={i} style={[styles.box, {backgroundColor: i % 2 === 0 ? '#4CAF50' : '#2196F3'}]}>
          <Text style={styles.text}>Box {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    padding: 10
  },
  box: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    borderRadius: 8
  },
  text: {
    color: 'white',
    fontSize: 18
  }
});

Output

A vertical scrollable list of 20 colored boxes labeled 'Box 1' to 'Box 20'. User can scroll down to see all boxes.

Common Pitfalls

Common mistakes when using ScrollView include:

• Putting too many heavy components inside ScrollView causing performance issues.
• Not setting contentContainerStyle for padding or alignment, leading to cramped content.
• Using ScrollView for very long lists instead of FlatList, which is optimized for large data.
• Forgetting to set horizontal prop when horizontal scrolling is needed.

javascript

/* Wrong: No padding, cramped content */
<ScrollView>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</ScrollView>

/* Right: Add padding with contentContainerStyle */
<ScrollView contentContainerStyle={{ padding: 20 }}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</ScrollView>

Quick Reference

Key props for ScrollView:

• horizontal: Scrolls horizontally if true.
• contentContainerStyle: Styles inner content container.
• showsVerticalScrollIndicator: Show/hide vertical scrollbar.
• showsHorizontalScrollIndicator: Show/hide horizontal scrollbar.
• keyboardShouldPersistTaps: Controls tap behavior when keyboard is open.

Key Takeaways

Wrap content inside ScrollView to enable scrolling when content overflows screen size.

Use horizontal prop for sideways scrolling and contentContainerStyle for padding.

Avoid putting very large lists inside ScrollView; use FlatList for better performance.

Remember to style the inner container to prevent cramped content and improve layout.

ScrollView automatically handles scrolling gestures and shows scroll indicators by default.