React Native Swiper with example and easy implementation

This is called as the best Swiper component in react native so far and It is easy to use and have direct implementation.

Preview of React Native Swiper

Installation of React Native Swiper

using npm

$ npm i react-native-swiper --save

using yarn

$ yarn add react-native-swiper --save

React Native Swiper Usage

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

import Swiper from 'react-native-swiper'

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

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Test Slide 1</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Test Slide 2</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>Test Slide 3</Text>
        </View>
      </Swiper>
    )
  }
}

AppRegistry.registerComponent('myproject', () => SwiperComponent)

Important useful Properties (props)

There are many types of props for React Native Swiper. Gonna tell you in detail on which are important or hard to understand. If you have any problem comment down below. here are some.

Basic Props

Horizontal – If true, scroll view’s children are arranged horizontally in a row.
loop – If false continuous loop is disabled.
index – Set initial slide, just give the slide index to which you want first.
showsButtons – If true make controls buttons visible.
autoplay – if true it enable autoplay mode.
onIndexChanged – it is a type of function it calls when user swiped. We get new index after that function is called.

Basic style & content props

Width
Height
style
containerStyle – default container style.
loadMinimal – only load current index slide, after that you need to set loadMinimalSize.
loadMinimalSize – Here we can specify slides before and after .
loadMinimalLoader – Custom loader to display when slides aren’t loaded.

Pagination Props

If you want custom dot or want to change the pagination then use these props.

showsPagination – If you want pagination to be visible make it true.
paginationStyle – Custom styles which will merge with default styles.
renderPagination – This is functional prop. Here we can control how to render pagination. It have parameters like index, total, context ref to this.state.index/ this.state.total / this.
dot – it allows custom dot element. For example just give <View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> this in this prop.
activeDot – For the slide which is open we can style the dot which is active by this. Same as dot it also takes an element.
dotStyle
dotColor
activeDotColor
activeDotStyle

Autoplay Props

autoplay – Set to true for enable autoplay.
autoplayTimeout – Seconds between the auto transections of slides
autoplayDirection

Control Buttons

showsButtons
buttonWrapperStyle
nextButton – It require element of custom button code.
prevButton

All the props of ScrollView are apply here. If you want other props you can tell me according to your requirement.

React Native Swiper