React Native Horizontal ScrollView Example Android

This tutorial explains how to create horizontal ScrollView example in react native application. As we are already discussed the ScrollView is a generic scrolling container that can host multiple components and views. In this example  we are going to display 10 images in horizontal fashion in ScrollView Component and you can view the images by scrolling left to right or right to left direction, depending upon image placement or position.

If you want to know about vertical ScrollView example in react native, then refer below example :
1. React Native Vertical ScrollView Example

React Native Horizontal ScrollView Example :

Lets follow the below steps to create Simple Horizontal 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 horizontally allign and it consists of 10 Image component as child.

render() {

    let dimensions = Dimensions.get("window");
    let imageHeight = Math.round((dimensions.width * 9) / 16);
    let imageWidth = dimensions.width;

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

        <Text style={styles.headerText}>Horizontal ScrollView Example.</Text>

        <ScrollView horizontal={true}>

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/1.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/2.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/3.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/4.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/5.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/6.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/7.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/8.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/9.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            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 horizontal 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, Dimensions } from "react-native";

export default class HomeActivity extends Component {
  render() {

    let dimensions = Dimensions.get("window");
    let imageHeight = Math.round((dimensions.width * 9) / 16);
    let imageWidth = dimensions.width;

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

        <Text style={styles.headerText}>Horizontal ScrollView Example.</Text>

        <ScrollView horizontal={true}>

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/1.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/2.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/3.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/4.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/5.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/6.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/7.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/8.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            source={require("./images/9.jpg")}
          />

          <Image
            style={{ height: imageHeight, width: imageWidth }}
            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 horizontal 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.