AppDividend
Latest Code Tutorials

React Native ScrollView Example | How To Use React Native ScrollView

1

In this tutorial, we will discuss React Native ScrollView. 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).

ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props.

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

A ScrollView in React Native with a single item can be used to allow the 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.

React Native ScrollView Example

Ever have the situation where you sometimes had content that was 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 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

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 enable a 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 it here.

Related Post: React Native Flexbox Tutorial

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

RN ScrollView Tutorial

So that is the original 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.

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 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 the verticle scrollbar is hidden from the screen. ScrollView renders all its react child components at once. That makes it very easy to understand and use.

ScrollView has a 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.

#How to make ScrollView horizontal in React Native

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

Recommended Posts

React Native Swipe Components Example

How To Use React Native FlatList

React Native Drawer Navigator Example

React Native Tab View Example

Native Navigation using React Native Navigation Example

React Native Redux Example Tutorial

React Native Modal Example

React Native Create Delete Functionality

How To Connect React Native Application With Laravel API Tutorial

Beginners Guide To Create React Native Application

1 Comment
  1. Janith says

    thanks for the 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.