@eimagine/react-native-swiper v2.0.18

react-native-swiper

The best Swiper component for React Native.

Roadmap

V2

• Improve performance

• Landscape mode

Please track in milestones:v2

Contribute code to branch:Android and branch:V2

Provide creative in issues

V1

• Support for Android

• More switch effects

• Unit tests

• Check typo

• Fix bugs

• 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

• 1.4.9

  • Adds extra check for title

• 1.4.8

  • Fixes loop and autoplay bugs in android

• 1.4.7

  • Don't attempt to mutate this.props
  • Fixes examples links
  • Adds drag end handling to always reset state.isScrolling
  • Fixes float calculation error

• 1.4.6

  • refactors examples
  • prevents mutation of this.props
  • fixes android index loop issue

• 1.4.5

  • renames scrollTo() to scrollBy()
  • image index is now always an integer
  • prevents parent state updates from reseting index counter
  • fixes issue with scrolling not working sometimes

• 1.4.4

  • Support for React Native latest(^0.26.0)
  • Updates examples to work with react-native-swiper 1.4.4
  • Examples now run on Android (some are still buggy, needs more work)
  • Removes old examples folder

• 1.4.3

  • Fixed auto play issue when only a child view

• v1.4.0

  • Support for React Native latest(^0.17.0) & Upgrade examples base on Xcode 7.2 / React Native 0.17.0

  • Upgrade build tool to babel6

  • Add missing deps react-timer-mixin

  • 1f8643a Move Dimensions import to deconstructed React import for react-native (@thanks @jedrekk).

  • e28af9b Support index property in combination with loop property (@thanks @almost).

  • 6c832d fix warnings about keys for dots (@thanks @sunnylqm).

  • 8de1afc Changes to make the example work in xcode 7 (@thanks @allomov).

• 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/ios/swiper.xcodeproj in Xcode, then press Cmd + R; you may edit examples/index.ios.js for switch cases.

examples/samples/basic.js


examples/samples/swiper.js


examples/samples/swiper_number.js


examples/samples/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

Methods

scrollBy(index)

Scroll by relative index.

Parameters:

Examples

@TODO, see code in examples first.

Development

$ npm start

Contribution

• @leecade The main author.
• @rajkissu The secondary contributor.

Questions

Feel free to contact me or create an issue

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