AppDividend
Latest Code Tutorials

React Native Swipe Components Example Tutorial

1,174

Get real time updates directly on you device, subscribe now.

React Native Swipe Components Example Tutorial is today’s leading topic.  We use react-native-swiper – A dominant React Native swipe component. It is the best Swiper component for React Native. Let us first install React Native on mac and start working on our demo example.

React Native Swipe Components Example Tutorial

We will test this demo example in both Android and iOS simulators.

#1: Install React Native.

Type the following command in your terminal to install React Native CLI globally, if you have not installed 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

#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, and that makes different each component.

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 Index number of initial slide.
showsButtons false bool Set to true make control buttons visible.
autoplay false bool Set to true enable auto play 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.

 

React Native Swipe Components Example Tutorial

Here you can see 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.

Finally, our React Native Swipe Components Example is over.

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.