AppDividend
Latest Code Tutorials

React Native ScrollView Example Tutorial

3,589

Get real time updates directly on you device, subscribe now.

In this tutorial, we will discuss React Native ScrollView Example. The ScrollView is a 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). ScrollViews can be configured to allow paging through views using swiping gestures by using a pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPagerAndroid component.

A ScrollView with the single item can be used to allow a user to zoom content. 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.

Also, you can check out the below course to learn React Native From Scratch.
React Native – The Practical Guide

React Native ScrollView Example

First, we will install the React Native, and then we will start working on our React Native ScrollView 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
Related Post: React Native Flexbox Tutorial

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

sudo npm install -g react-native-cli

Okay, now create an application for 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 enable hot reload on the simulator.

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

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

Related Post: React Native Flexbox Tutorial

So just replace the code of 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 like below.

RN ScrollView Tutorial

So that is the primary design now, we are going to 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.

Related Posts
1 of 8

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 ScrollView component from the react-native core library. Now, save the file and again switch to the simulator and now you can able to 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 verticle scrollbar is hidden from the screen. ScrollView simply renders all its react child components at once. That makes it very easy to understand and use.

ScrollView has performance downside. Imagine you have a very long list of items that 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.

Horizontal ScrollView

Set the ScrollView’s prop as Horizontal = { true } . This makes this scroll view in Horizontal format. If you want to make this scroll view in vertical format then don’t add this prop and you are good to go.

Now, we will add an image. So create one folder inside 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, now you can able to 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 this is it for the React Native ScrollView Example Tutorial.

Leave A Reply

Your email address will not be published.

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