ScrollView component in React Native

Introduction

The ScrollView component lets you show content that is bigger than the screen by allowing the user to scroll up and down or sideways.

When you have a list of items that is too long to fit on one screen.

When you want to show a long article or text that the user can scroll through.

When you have a form with many input fields that don't fit on the screen at once.

When you want to create a horizontal gallery of images that the user can swipe through.

Syntax

React Native

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

export default function App() {
  return (
    <ScrollView>
      {/* Your content here */}
    </ScrollView>
  );
}

ScrollView can scroll vertically by default.

Use the horizontal prop to scroll sideways.

Examples

A simple vertical scroll with three text items.

React Native

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

export default function App() {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
    </ScrollView>
  );
}

This ScrollView scrolls horizontally instead of vertically.

React Native

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

export default function App() {
  return (
    <ScrollView horizontal>
      <Text>Left</Text>
      <Text>Center</Text>
      <Text>Right</Text>
    </ScrollView>
  );
}

Sample App

This app shows 20 text items inside a ScrollView. Because there are many items, you can scroll vertically to see them all.

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView>
        {[...Array(20).keys()].map(i => (
          <Text key={i} style={styles.item}>Item {i + 1}</Text>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40
  },
  item: {
    fontSize: 24,
    margin: 10,
    padding: 10,
    backgroundColor: '#ddeeff'
  }
});

Important Notes

ScrollView renders all its children at once, so it is best for small lists.

For very long lists, use FlatList for better performance.

You can add padding or margin inside ScrollView to improve spacing.

Summary

ScrollView lets users scroll content that is larger than the screen.

It scrolls vertically by default, or horizontally with the horizontal prop.

Use ScrollView for small to medium amounts of content.