React Native ScrollView: Step by Step Guide

A ScrollView in React Native with a single item can allow the user to zoom content. For example, set up a maximumZoomScale and minimumZoomScale props, and the user will be able to use pinch and expand gestures to zoom in and zoom out.

React Native ScrollView

The ScrollView is a built-in React Native 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). In addition, ScrollViews can be configured to allow paging through views using swiping gestures and pagingEnabled props.

Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

Have you ever had a situation where you sometimes had content shorter than the screen size and didn’t require scrolling but occasionally had content taller than the screen size, thus necessitating scroll to allow the user to see all the content?

If that’s your case, you can leverage the onContentSizeChange prop of a ScrollView and check whether the content height is taller than the screen size.

First, we will install React Native, and then we will start working on our tutorial.

Step 1: Install React Native

If you are a newbie to React Native, then these posts might be helpful to you.

Step 2: Edit the App.js file to add the content and styles.

I have made a straightforward design in the previous tutorial. You can see it here.

Related Post: React Native Flexbox

To replace the code of the App.js file with the following one.

// App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

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,
  }
});

You will get the screen below.

So that is the original design now. We will add more Text so that we see what happened to the screen.

// App.js

return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );

Okay, save the file and then switch to the iPhone Simulator. You will see something like this.

All of the text is gone, and our layout looks very bad. So here, ScrollView’s job takes place. You can scroll down to see all the text elements. Let me show you how you can do this.

// App.js

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

export default class App extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </ScrollView>
    );
  }
}

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

You can import the ScrollView component from the react-native core library. Now, save the file and again switch to the simulator, and now you can scroll down the screen, and also verticle scrollbar is there.

We can easily hide the verticle sidebar by adding the following property to true.

showsVerticalScrollIndicator={false}

// App.js

<ScrollView showsVerticalScrollIndicator={false}>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
   <Text style={styles.welcome}>Welcome to React Native</Text>
</ScrollView>

Now, you can see that the verticle scrollbar is hidden from the screen. This is because ScrollView renders all its react child components at once. That makes it very easy to understand and use.

ScrollView has a performance downside. Imagine a very long list of items you want to display, maybe several screens worth of content. Creating JavaScript components and native views for everything all at once will contribute to slow rendering and increased memory usage.

ScrollView has so many properties to work with. You can check out these at the documentation.

How to set ScrollView horizontal in React Native

To set the ScrollView as Horizontal in React Native, use the ScrollView’s prop as Horizontal = { true } . This makes this scroll view in a Horizontal format. If you want to make this scroll view in the vertical format, don’t add this prop, and you are good to go.

Now, we will add an image. So create one folder inside the Project folder root called images and add the image; in my case, it is Krunal.jpg. You can add whatever you want. So now, we will display the Image and Textview in the horizontal ScrollView.

// App.js

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('./images/Krunal.jpg')} style={[styles.image, { width: screenWidth }]}/>
        <Text style={styles.welcome}> Welcome to React NativeWelcome to React Native</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,
  }
});

Here, I have used Dimensions to use the screen width. So after saving the code, you can now scroll horizontally, and I have hidden the horizontal scrollbar.

You can see that I have taken the screenshot at the time; I am scrolling horizontally. So that’s it for the React Native ScrollView.

React Native ScrollView: Step by Step Guide