React Native ScrollView Component

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.

Here are the steps to use ScrollView in React Native:

Step 1: Install React Native

sudo npm install -g react-native-cli

Now create an application for the iOS platform.

react-native init ScrollViewTutorial

After installing the project, go into that project and start the package development server by typing the following command.

cd ScrollViewTutorial

react-native run-ios

You will see an IOS Simulator default screen like this image.

React Native Starter App

Now open this project on Editor; in my case, it is Visual Studio Code.

Don’t forget to enable hot reload. You can enable it by typing cmd + d and helping a hot reload on the simulator.

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

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.

RN ScrollView Tutorial

So that is the original design now. We will add more Text to 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>
    );

Save the file and then switch to the iPhone Simulator. You will see something like this.

React Native ScrollView

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 switch to the simulator, and now you can scroll down the screen, and the 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 long list of items you want to display, maybe several screens worth of content. Creating JavaScript components and native views for everything simultaneously will contribute to slow rendering and increased memory usage.

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

How to set ScrollView horizontal in React Native

To set the ScrollView as Horizontal in React Native, use 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.

Horizontal ScrollView

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.

That’s it.

1 thought on “React Native ScrollView Component”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.