React Native Swiper: A Practical Guide

Swipe gestures are reflexive to leave sloppy smear marks across our screens. In this tutorial, we’ll build  React Native swiper components in both Android and iOS simulators. So let us install React Native on mac and start working on our demo project.

React Native Swiper

To create a swiper component in React Native, use the react-native-swiper. The Swiper component will act as a wrapper component in which we pass a property called showButtons, whose value is true.

Let’s go step by step to install a react-native-swiper and create a swiper.

Step 1: Install React Native.

Type the following command in your terminal to install React Native CLI globally if you have not installed it previously.

npm install -g react-native-cli

Create a new React Native project using the following command.

react-native init swiper

Go into the project folder.

cd swiper

Install the react-native-swiper library using the following command.

npm i react-native-swiper --save

# or

yarn add react-native-swiper

Step 2: Modify the App.js file and add the swiper component.

Replace the App.js code with the following code.

// App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import Swiper from 'react-native-swiper';

export default class App extends Component {
  render(){
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BB',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})

Explanation

Here, we have included the Swiper component as a wrapper component. We have passed the one property called showButtons, and its value is true. So that makes control buttons visible.

Also, we have given the styles to all the parent and child components, making each component different.

Properties

Some of the props are the following.

We used the showButtons prop. Autoplay = { true} means components are sliding automatically.

// App.js 

<Swiper style={styles.wrapper} 
     showsButtons = { true }
     autoplay = { true }>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
</Swiper>

Same you can check and apply different properties based on your requirements.

Now to check the output, type the following command. We are first testing on an iOS simulator.

Here, the three slides are played automatically because we have set autoplay to true.

Now, let us open on Android Emulator.

react-native run-android

It will open the android emulator, and you can see the swipe components.

That’s it for this tutorial.