React Native ScrollView: Step by Step Guide

1
2630
React Native ScrollView Example Tutorial

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.

Related Post: Beginners Guide To Create React Native Application

Now, type the following command to install react-native cli globally.

sudo npm install -g react-native-cli

Okay, 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, and in my case, it is Visual Studio Code.

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

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.

RN ScrollView Tutorial

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.

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 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.

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.

Recommended Posts

React Native Swipe Components

How To Use React Native FlatList

React Native Drawer Navigator

React Native Tab View

Native Navigation using React Native Navigation

React Native Redux

React Native Modal

React Native Create Delete Functionality

How To Connect React Native Application With Laravel API

Beginners Guide To Create React Native Application

1 Comment

Leave A Reply

Please enter your comment!
Please enter your name here

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