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 first 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, and its 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 App.js file and add 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.

Prop	Default	Type	Description
horizontal	true	bool	If true, the scroll view’s children are arranged horizontally in a row instead of vertically in a column.
loop	true	bool	Set to false to disable continuous loop mode.
index	0	number	The index number of the initial slide.
showsButtons	false	bool	Set to true make control buttons visible.
autoplay	false	bool	Set to true enable autoplay mode.
onIndexChanged	(index) => null	func	Called with the new index when the user swiped

 

We have 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 there and 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.