React Native Swiper Slider Layout Example

This tutorial explains how to create simple swiper slider layout in react native application. Now a days this kind of swiper slider layout design used by most of the android or ios mobile application. If you own a smartphone, you already know what a gesture is. Gestures are those subtle motions to trigger interactions between the touch screen and the user. Generally, it lasts for the time between the first touch on the screen to the point when the finger leaves the surface. Using this Swiper layout design we can switch back and froth between previous and next page of your mobile application.

React Native Swipe Components Example

In this example we will create simple swiper slider layout example in react native application. Using this Swiper layout design we can switch back and froth between previous and next page of your mobile application.

Step 1: First create the new reactive project.

Step 2 :  Install the install react-native-web-swiper package in your React Native project. Refer the below screenshot, while installing react swiper slider layout package.

Command : 

npm i react-native-web-swiper --save

Once installation complete check you package.json file in react native application. You  will find  React Native swiper slider layout package installed in dependencies section.

{
  "name": "RNV59",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android",
    "test": "jest"
  },
  "dependencies": {
    "@popmotion/popcorn": "^0.3.3",
    "d3-shape": "^1.3.4",
    "expo": "^32.0.0",
    "randomcolor": "^0.5.4",
    "react": "16.8.3",
    "react-native": "0.59.1",
    "react-native-loading-spinner-overlay": "^1.0.1",
    "react-native-paper": "^2.2.8",
    "react-native-swiper": "^1.5.14",
    "react-native-web-swiper": "^1.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "^24.5.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Step 3: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

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

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';
import Swiper from "react-native-web-swiper";

Step 5: Open App.js component and  and Implement render method. Apply the below code inside the render block of your App component.

render() {

    return (
      <View style={styles.container}>
      
        <View style={{ flex: 1 }}>
          <Swiper
            index={1}
          >
            <View style={[styles.slideContainer,styles.slide1]}>
              <Text>Slide 1</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide2]}>
              <Text>Slide 2</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide3]}>
              <Text>Slide 3</Text>
            </View>
          </Swiper>
        </View>

        <View style={{ flex: 1 }}>
          <Swiper
            direction={"column"}
            loop
            autoplayTimeout={-2.5}
            overRangeButtonsOpacity={0.3}
          >
            <View style={[styles.slideContainer,styles.slide1]}>
              <Text>Slide 1</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide2]}>
              <Text>Slide 2</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide3]}>
              <Text>Slide 3</Text>
            </View>
          </Swiper>
        </View>

      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }, 
  slideContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  slide1: {
    backgroundColor: "rgba(20,20,200,0.3)"
  },
  slide2: {
    backgroundColor: "rgba(20,200,20,0.3)"
  },
  slide3: {
    backgroundColor: "rgba(200,20,20,0.3)"
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple swiper slider layout example in react native application, with help of  that you can perform swipe left and right and see the next screen of your android or ios screen.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, Button } from 'react-native';
import Swiper from "react-native-web-swiper";


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
      
        <View style={{ flex: 1 }}>
          <Swiper
            index={1}
          >
            <View style={[styles.slideContainer,styles.slide1]}>
              <Text>Slide 1</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide2]}>
              <Text>Slide 2</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide3]}>
              <Text>Slide 3</Text>
            </View>
          </Swiper>
        </View>

        <View style={{ flex: 1 }}>
          <Swiper
            direction={"column"}
            loop
            autoplayTimeout={-2.5}
            overRangeButtonsOpacity={0.3}
          >
            <View style={[styles.slideContainer,styles.slide1]}>
              <Text>Slide 1</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide2]}>
              <Text>Slide 2</Text>
            </View>
            <View style={[styles.slideContainer,styles.slide3]}>
              <Text>Slide 3</Text>
            </View>
          </Swiper>
        </View>

      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  }, 
  slideContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  slide1: {
    backgroundColor: "rgba(20,20,200,0.3)"
  },
  slide2: {
    backgroundColor: "rgba(20,200,20,0.3)"
  },
  slide3: {
    backgroundColor: "rgba(200,20,20,0.3)"
  },

});

Screenshot : 

This is all about simple swiper slider layout 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.