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.