React Native Full Width Horizontal ScrollView

This tutorial explains how to create react native full page width swipeable horizontal scrollView layout for android or ios device. In this example we have created simple swipeable horizontal view and when you can perform swipe left and right operation in your android or iOS device using below code, then you will find below observation:
1. when user swipe left in the device, then it will navigate user to next page or view.
2. when user swipe right in the device, then it will navigate user to previous page or view.

Basically, react native ScrollView component provides a very special property named as pagingEnabled = { boolean }  , in which Boolean can have one of two values either true  or false . pagingEnabled  allows you to stop at every single view during scrolling.

        Demo  

React Native Full Page Width Swipeable Horizontal ScrollView

Lets follow the below steps to Create simple full Width Horizontal ScrollView

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 App.js File in your favorite 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, ScrollView, Dimensions, Image } from 'react-native';

Step 4: Create a global variable above the class named as deviceWidth. This variable is used store the current device width, So the current view expand all over the screen. We would retrieve the device width using Dimensions.get(‘window’).width inbuilt method.

var deviceWidth = Dimensions.get('window').width;

Step 5 : Implement render method inside the App class and wrapped the below layout design inside the root View component.

• horizontal = { true } : This prop would make the ScrollView Horizontal.
• showsHorizontalScrollIndicator = {false} : This prop would hide the ScrollView’s own horizontal indicator bar.
• pagingEnabled = { true } : This prop would only allows single view at a time on device screen and stops other views interrupting the opened view.

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false}>
          <View style={styles.firstView}>
            <Text style={styles.headerText}>First View</Text>
          </View>

          <View style={styles.secondView}>
            <Text style={styles.headerText}>Second View</Text>
          </View>

          <View style={styles.thirdView}>
            <Text style={styles.headerText}>Third View</Text>
          </View>

          <View style={styles.forthView}>
            <Text style={styles.headerText}>Forth View</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

Step 6 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 30,
    textAlign: "center",
    margin: 10,
    color: 'white',
    fontWeight: "bold"
  },
  firstView: {
    width: deviceWidth,
    backgroundColor: '#F44336',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  secondView: {
    width: deviceWidth,
    backgroundColor: '#9C27B0',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  thirdView: {
    width: deviceWidth,
    backgroundColor: '#3F51B5',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  forthView: {
    width: deviceWidth,
    backgroundColor: '#009688',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to Create Custom full page width swipeable horizontal scrollView in react native application.

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

var deviceWidth = Dimensions.get('window').width;


export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <ScrollView horizontal={true} pagingEnabled={true} showsHorizontalScrollIndicator={false}>
          <View style={styles.firstView}>
            <Text style={styles.headerText}>First View</Text>
          </View>

          <View style={styles.secondView}>
            <Text style={styles.headerText}>Second View</Text>
          </View>

          <View style={styles.thirdView}>
            <Text style={styles.headerText}>Third View</Text>
          </View>

          <View style={styles.forthView}>
            <Text style={styles.headerText}>Forth View</Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5",
  },
  headerText: {
    fontSize: 30,
    textAlign: "center",
    margin: 10,
    color: 'white',
    fontWeight: "bold"
  },
  firstView: {
    width: deviceWidth,
    backgroundColor: '#F44336',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  secondView: {
    width: deviceWidth,
    backgroundColor: '#9C27B0',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  thirdView: {
    width: deviceWidth,
    backgroundColor: '#3F51B5',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  forthView: {
    width: deviceWidth,
    backgroundColor: '#009688',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },

});

Screenshots : 

This is all about full page width swipeable horizontal scrollView in react native application. 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.