React Native – ScrollView

In this chapter, we will show you how to work with the ScrollView element.

The ScrollView is the generic scrolling container that can host multiple components and views. The scrollable items need not be homogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).You just need to add horizontal while adding a ScrollView tag <ScrollView horizontal>.

React Native ScrollView is a component to wrap the content which is overflowing from the screen. When you have any UI or text which is going after filling the while screen you can wrap it with ScrollView.

To Import ScrollView in the Code

import { ScrollView } from 'react-native'

Props

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

export default class App extends Component {
  render() {
    return (
      <ScrollView style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native 1</Text>
        <Text style={styles.welcome}>Welcome to React Native 2</Text>
        <Text style={styles.welcome}>Welcome to React Native 3</Text>
        <Text style={styles.welcome}>Welcome to React Native 4</Text>
        <Text style={styles.welcome}>Welcome to React Native 5</Text>
        <Text style={styles.welcome}>Welcome to React Native 6</Text>
        <Text style={styles.welcome}>Welcome to React Native 7</Text>
        <Text style={styles.welcome}>Welcome to React Native 8</Text>
        <Text style={styles.welcome}>Welcome to React Native 9</Text>
        <Text style={styles.welcome}>Welcome to React Native 10</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes quick to debug.

Doesn’t yet support other contained responders from blocking this scroll view from becoming the responder.

ScrollView renders all its react child components at once, but this has a performance downside.

Imagine you have a very long list of items you want to display, maybe several screens worth of content. Creating JS components and native views for everything all at once, much of which may not even be shown, will contribute to slow rendering and increased memory usage.

This is where FlatList comes into play. FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

Horizontal ScrollView

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

export default class App extends Component {
  render() {
    let screenWidth = Dimensions.get('window').width;
    return (
      <ScrollView
        horizontal={true}
        style={styles.contentContainer}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        >
        <Image source={require('./assets/images.jpg')} style={[styles.image, { width: screenWidth }]}/>
        <Text style={styles.welcome}> Welcome to React Native Tutorial</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  contentContainer: {
    marginTop: 50,
    paddingVertical: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});