react-native-swiper-haobtc v1.3.1

react-native-swiper

The best Swiper component for React Native.

Feature & TODO

• More switch effects

• Unit tests

• Check typo

• Infinite loop

• Direction control

• Complete custom style

• Allow title display & custom

• Multiple instances

• Custom container size

• Control buttons

• Autoplay

• Custom pagination style

• State inject

Changelogs

• v1.3.0

  • 8d6d75c inject state in ScrollResponders (@thanks @smothers).

• v1.2.2

  • 890c0ce ensure onMomentumScrollEnd synchronous update index.

• v1.2.0

  • 838b24c Re-design a loop model for avoid img flickering.
  • 9cb91c5 fixes #7 onMomentumScrollEnd lost event param. (thanks @smothers)

• v1.1.1

  • 21f0b00 fixes #6 a define-propType error. (thanks @benjamingeorge)

• v1.1.0

  • 44ec630 fixes #4 onMoementumScrollEnd gets overridden. (thanks @subpublicanders)
  • 5de06a7 New prop: renderPagination. (thanks @aksonov)

• v1.0.4

  • 21cb373 fixes #2 Solve the problem of installation. (thanks @jamwaffles)

• v1.0.3

  • 0f796f3 fixes #1 Two 'horizontal' in propTypes. (thanks @MacyzZ)

Show Cases

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

examples/basic.js


examples/swiper.js


examples/swiper_number.js


examples/phone.js


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

$ npm i react-native-swiper --save

Basic Usage

• Install react-native first

$ npm i react-native -g

• Initialization of a react-native project

$ react-native init myproject

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

var Swiper = require('react-native-swiper')
// es6
// import Swiper from 'react-native-swiper'

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var 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',
  }
})

var swiper = React.createClass({
  render: function() {
    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('swiper', () => swiper)

Properties

Basic

Custom basic style & content

Pagination

Autoplay

Control buttons

Props of Children

Basic props of <ScrollView />

@see: http://facebook.github.io/react-native/docs/scrollview.html

Supported ScrollResponder

Note: each ScrollResponder be injected with two params: state and context, you can get state and context(ref to swiper's this) from params, for example:

var swiper = React.createClass({
  _onMomentumScrollEnd: function (e, state, context) {
    console.log(state, context.state)
  },
  render: function() {
    return (
      <Swiper style={styles.wrapper}
      onMomentumScrollEnd ={this._onMomentumScrollEnd}
     ...
      </Swiper>
    )
  }
})

More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js

Examples

@TODO, see code in examples first.

Development

$ npm start

Contribution

• @leecade The main author.

Questions

Feel free to contact me or create an issue

Inspired by nolimits4web/Swiper & Design material from Dribbble & made with ♥.