React Native - ScrollView

React Native - ScrollView

The ScrollView component is a generic scrolling container that can host multiple components and views. It’s suitable for displaying a small number of items of varying types or when content might exceed the screen size. For long lists of similar data, FlatList is generally more performant.

This chapter demonstrates how to use ScrollView to make content scrollable.

Basic ScrollView Example

We’ll create a ScrollView that contains several Text elements, making the content scrollable vertically.

MyScrollView.js

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

const MyScrollView = () => {
  const items = [
    { id: '1', text: 'Item 1: Lorem ipsum dolor sit amet.' },
    { id: '2', text: 'Item 2: Consectetur adipiscing elit.' },
    { id: '3', text: 'Item 3: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
    { id: '4', text: 'Item 4: Ut enim ad minim veniam, quis nostrud exercitation.' },
    { id: '5', text: 'Item 5: Ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
    { id: '6', text: 'Item 6: Duis aute irure dolor in reprehenderit.' },
    { id: '7', text: 'Item 7: In voluptate velit esse cillum dolore eu fugiat nulla pariatur.' },
    { id: '8', text: 'Item 8: Excepteur sint occaecat cupidatat non proident.' },
    { id: '9', text: 'Item 9: Sunt in culpa qui officia deserunt mollit anim id est laborum.' },
    { id: '10', text: 'Item 10: This is the tenth item in the scrollable list.' },
    { id: '11', text: 'Item 11: Adding more items to ensure scrolling is needed.' },
    { id: '12', text: 'Item 12: The ScrollView will allow vertical scrolling.' },
  ];

  return (
    <View style={styles.safeArea}>
      <StatusBar barStyle="dark-content" />
      <ScrollView
        style={styles.scrollView}
        // contentContainerStyle={styles.contentContainer} // Optional: style the inner content container
        // keyboardShouldPersistTaps='handled' // Useful for forms inside ScrollView
        // showsVerticalScrollIndicator={false} // To hide the scrollbar
      >
        <Text style={styles.title}>Scrollable Content</Text>
        {items.map((item) => (
          <View key={item.id} style={styles.itemContainer}>
            <Text style={styles.itemText}>{item.text}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    // paddingTop: StatusBar.currentHeight, // Only for Android if not using SafeAreaView
  },
  scrollView: {
    backgroundColor: '#f0f8ff',
  },
  contentContainer: { // Example style for the inner content view
    paddingBottom: 20, // Ensure space at the bottom
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
    color: '#333',
  },
  itemContainer: {
    backgroundColor: '#ffffff',
    padding: 15,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  itemText: {
    fontSize: 16,
    color: '#555',
  },
});

export default MyScrollView;

Explanation

• Wrapping Content: All child components of ScrollView are rendered, even if they are not currently visible on screen. This is why FlatList is preferred for long lists.
• Vertical Scrolling: By default, ScrollView scrolls vertically. To enable horizontal scrolling, set the horizontal={true} prop.
• Styling: You can style the ScrollView itself (e.g., backgroundColor) and its internal content container using the contentContainerStyle prop (e.g., for padding around the content).
• keyboardShouldPersistTaps: Controls whether the keyboard is dismissed when a tap occurs outside of a focused text input. 'handled' is often a good default.

When you run this component, you’ll see a list of items. If the total height of the items exceeds the screen height, you’ll be able to scroll vertically to see all of them.

Horizontal ScrollView

To create a horizontal ScrollView, add the horizontal={true} prop. You’ll also likely want to style children to be laid out in a row (e.g., using flexDirection: 'row' on a container or by their natural inline flow).

// Inside your render method for a horizontal scroll:
// <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
//   <View style={styles.horizontalItem}><Text>Item 1</Text></View>
//   <View style={styles.horizontalItem}><Text>Item 2</Text></View>
//   {/* ... more items ... */}
// </ScrollView>

// const styles = StyleSheet.create({
//   horizontalItem: {
//     width: 150, // Example fixed width for horizontal items
//     height: 100,
//     backgroundColor: 'skyblue',
//     marginHorizontal: 10,
//     justifyContent: 'center',
//     alignItems: 'center',
//   }
// });

ScrollView vs. FlatList

• Use ScrollView when:
  • You have a small amount of content of mixed types.
  • You need generic scrollable container for various views rather than a list of uniform data.
• Use FlatList when:
  • You have long lists of data (hundreds or thousands of items).
  • Items are mostly uniform in structure.
  • You need performance optimizations like item virtualization, pull-to-refresh, or infinite scrolling.

It’s important to choose the right component for your needs to ensure good performance and user experience. For more details on ScrollView props and usage, refer to the official documentation: https://reactnative.dev/docs/scrollview