The best Swiper component for React Native.

react-native-swiper

Roadmap

see: ROADMAP.md

Changelogs

• [1.6.0-nightly]
• Dependency
  • Remove ViewPagerAndroid, use ScrollView #1009
• TypeScript
  • correct the wrong types #1000
  • Add missing scrollBy TypeScript definition #931
• New Feature
  • add scrollTo #831
  • Added prop to disable the PrevButton #749
  • Optionally render page #1004

• Bug Fix

  • ES6 and CommonJS compatibility #717
  • Solves the issue of state messing up when parent component calls setState #939
  • replay when autoplay is setted to true #1002

• [1.5.6]

• Fix #16, #36, #371, #410, #411, #422, #468 Fix landscape orientation auto resize! (thanks @ahmed3mar, @timmywil)

• Add containerStyle prop to customize the view container.

• [1.5.5]

• Update: using PropTypes from prop-types and Change View.propTypes to ViewPropTypes

• [1.5.4]

• Added easily accessible pagination point manipulation: use dotColor / activeDotColor and dotStyle / activeDotStyle (thanks @denizs)

• Added scrollEnabled prop to documentation (thanks @ibandominguez)

• [1.5.3]

• Add loadMinimalLoader prop to customize <ActivityIndicator /> (thanks @Exilz)

• Disable autoplay timer when prop changes to false (thanks @dizlexik)

• Special thanks to @hypatiah for fixed some grammatical errors in README

• [1.5.2]

• Add yarn lock
• Fix jitter when quickly swiping back and forth between pages (iOS) (thanks @nemophrost)
• The first webview always reloaded when injecting the rest of the children (thanks @eosterberg)

see more: CHANGELOG.md

Show Cases

Try these cases by yourself very easy, Just open examples/ios/swiper.xcodeproj in Xcode, then press Cmd + R; you may edit examples/index.ios.js for switch cases.

examples/components/Basic

examples/components/Swiper

examples/components/SwiperNumber

examples/components/Phone

examples/components/LoadMinimal

Getting Started

• Installation
• Basic Usage
• Properties
• Basic
• Custom basic style & content
• Pagination
• Autoplay
• Control buttons
• Props of Children
• Basic props of <ScrollView />
• Supported ScrollResponder
• Examples
• Development

Installation

v1.5.14

$ npm i react-native-swiper --save

v1.6.0-nightly

npm i --save react-native-swiper@nightly

Basic Usage

• Install react-native first

$ npm i react-native-cli -g

• Initialization of a react-native project

$ react-native init myproject

• Then, edit myproject/index.ios.js, like this:

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: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  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}>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>
    )
  }
}

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

Properties

Basic

Custom basic style & content

Pagination

Autoplay