React Native Vertical ScrollView Example Android

This tutorial explains how to create simple vertical ScrollView in react native application. 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).

NOTE : By default, ScrollView is laid out vertically. In order to scroll the content horizontally, you simple need to pass a horizontal={true} prop to the ScrollView Component, like so:

<ScrollView horizontal={true}>

  <Text>Child 1</Text>
  <Text>Child 2</Text>
  <Text>Child 3</Text>

</ScrollView>

In this example we are going to place 10 Image Components inside the vertically align ScrollView component and it will display the images in list view structure from top to bottom.

React Native Vertical ScrollView Example :

Lets follow the below steps to create Simple Vertical ScrollView in React Native.

Project Structure :

Place the images inside the images folder.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Image, ScrollView} from "react-native";

Step-4 : Implement render method and return ScrollView component wrapped by root View component. This ScrollView component is vertically align and it consists of 10 Image component as child.

render() {
    return (
      <View style={styles.container}>

      <Text style={styles.headerText}>
         Vertical Scrollview Example.
       </Text>

        <ScrollView>
          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/1.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/2.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/3.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/4.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/5.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/6.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/7.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/8.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/9.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/10.jpg")}
          />
        </ScrollView>
      </View>
    );
  }

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple vertical scroll view  layout with the help of ScrollView Component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Image, ScrollView} from "react-native";

export default class HomeActivity extends Component {
  render() {
    return (
      <View style={styles.container}>

      <Text style={styles.headerText}>
         Vertical Scrollview Example.
       </Text>

        <ScrollView>
          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/1.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/2.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/3.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/4.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/5.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/6.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/7.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/8.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/9.jpg")}
          />

          <Image
            style={{ width: "100%", height: 200, resizeMode: "cover" }}
            source={require("./images/10.jpg")}
          />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
});

Screenshot :

First scroll 

Second scroll

Third scroll

This is all about react native vertical scrollview example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Vertical%20ScrollView%20Example%20Android