updating CHANGELOG with last changes

Calculated width & height on layout, used later on re-rendering. Possibility to change ScrollView styles

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,23 @@
+### Which OS ?
+
+### Version
+Which versions are you using:
+
+- react-native-swiper v?
+- react-native v0.?.?
+
+### Expected behaviour
+
+
+
+### Actual behaviour
+
+
+### How to reproduce it>
+To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.
+-
+
+### Steps to reproduce
+1.
+2.
+3.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,11 @@
+### Is it a bugfix ?
+- Yes or No ?
+- If yes, which issue (fix #number) ?
+
+### Is it a new feature ?
+- Yes or no ?
+- Include documentation, demo GIF if applicable
+
+### Describe what you've done:
+
+### How to test it ?

.gitignore

@@ -38,3 +38,4 @@ examples/swiper.xcodeproj/xcuserdata
 
 # Vim
 *.sw*
+dist/

CHANGELOG.md

@@ -0,0 +1,103 @@
+- [1.5.13]
+  + Workaround for react-native 0.4.8 contentOffset regression #572 (thanks @nixoz)
+  + Fix wrong calculation of width and height after device rotation #581 (thanks @kostyaVyrodov)
+  + Calculated width & height on layout, used later on re-rendering. Possibility to change ScrollView styles #548 (thanks @germanst)
+- [1.5.12]
+  + Update core packages
+  + Optionally disable the 'next' control button (thanks [@SSTPIERRE2](https://github.com/SSTPIERRE2))
+  + Fix `Uncaught TypeError: _this.refs.scrollView.scrollTo is not a function` (thanks [@flyskywhy](https://github.com/flyskywhy))
+  + Allow dotStyle and activeDotStyle PropTypes to accept Stylesheet (thanks [@knopt](https://github.com/knopt))
+  + Calculate the offset in the initial state instead of `onLayout` (thanks [@kjkta](https://github.com/kjkta))
+
+- [1.5.11]
+  + Typescript Definition
+
+- [1.5.1]
+  + Allow scroll without animate, ref: [scrollBy(index, animated)](#scrollbyindex-animated)
+  + Remove [#254](https://github.com/leecade/react-native-swiper/pull/254) which break the scroll direction in loop mode
+
+- [1.5.0]
+  + Improve develop [workflow](#development) for support watch & use real pkg name in examples
+  + Update examples for support `React-native 0.33` + `Xcode8` + `ios10` + `iphone7`
+  + Switch to [standard](https://github.com/feross/standard) code style
+  + Rewrite source code with ES6 syntex
+  + Cancel transform the source code when publish
+  + Add a [demo](examples/components/LoadMinimal) for `loadMinimal` + `lazyload`
+  + Add a [demo](examples/components/PhotoView) for multi-images viewer
+  + [#254](https://github.com/leecade/react-native-swiper/pull/254) Fix jitter when quickly swiping back and forth between pages (iOS) (@thanks [@nemophrost](https://github.com/nemophrost)).
+
+- [1.4.11]
+  + Adds loadMinimalSize property
+
+- [1.4.10]
+  + Adds loadMinimal to api (lazyloading-esque)
+
+- [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](https://github.com/leecade/react-native-swiper/commit/1f8643a67e2768d165132a19629a991a86672036) Move Dimensions import to deconstructed React import for react-native (@thanks [@jedrekk](https://github.com/jedrekk)).
+
+  + [e28af9b](https://github.com/leecade/react-native-swiper/commit/e28af9b205f17447cb3149b45fc220beec037bce) Support index property in combination with loop property (@thanks [@almost](https://github.com/almost)).
+
+  + [6c832d](https://github.com/leecade/react-native-swiper/commit/6c832d6a23da3737a2e8a2667273dc6093bcc9ee) fix warnings about keys for dots (@thanks [@sunnylqm](https://github.com/sunnylqm)).
+
+  + [8de1afc](https://github.com/leecade/react-native-swiper/commit/8de1afcb75a003424231bb089802db53bbbf84e4) Changes to make the example work in xcode 7 (@thanks [@allomov](https://github.com/allomov)).
+
+- [v1.3.0]
+  + [8d6d75c](https://github.com/leecade/react-native-swiper/commit/8d6d75c00edf87b603c218aad0018932277814b5) inject `state` in ScrollResponders (@thanks [@smothers](https://github.com/smothers)).
+
+- [v1.2.2]
+  + [890c0ce](https://github.com/leecade/react-native-swiper/commit/890c0ce64e2192c2ca7830e6699f67b88171e74b) ensure `onMomentumScrollEnd` synchronous update `index`.
+
+- [v1.2.0]
+  + [838b24c](https://github.com/leecade/react-native-swiper/commit/838b24cbeaf49b9ca1dabb4eed8305e314503fb1) Re-design a loop model for avoid img flickering.
+  + [9cb91c5](https://github.com/leecade/react-native-swiper/commit/9cb91c58c84034b0b8b874dbfc2a44da982686a8) fixes [#7](https://github.com/leecade/react-native-swiper/issues/6) `onMomentumScrollEnd` lost `event` param. (thanks [@smothers](https://github.com/smothers))
+
+- [v1.1.1]
+  + [21f0b00](https://github.com/leecade/react-native-swiper/commit/21f0b00138b6936cd3dfac2eb107a14c99c7392b) fixes [#6](https://github.com/leecade/react-native-swiper/issues/6) a define-propType error. (thanks [@benjamingeorge](https://github.com/benjamingeorge))
+
+- [v1.1.0]
+  + [44ec630](https://github.com/leecade/react-native-swiper/commit/44ec630b62844dbeaccee73adaa0996e319ebffb) fixes [#4](https://github.com/leecade/react-native-swiper/issues/4) `onMoementumScrollEnd` gets overridden. (thanks [@subpublicanders](https://github.com/subpublicanders))
+  + [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov))
+
+- [v1.0.4]
+  + [21cb373](https://github.com/leecade/react-native-swiper/commit/21cb3732578588f9d47ee7ddda541577ad691970) fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles))
+
+- [v1.0.3]
+  + [0f796f3](https://github.com/leecade/react-native-swiper/commit/0f796f3557b5aeb1772573cd7ecae2e835bccc0b) fixes [#1](https://github.com/leecade/react-native-swiper/issues/1) Two 'horizontal' in propTypes. (thanks [@MacyzZ](https://github.com/MacyzZ))

README.md

@@ -1,148 +1,75 @@
+<p align="center">
+  <img alt="react-native-swiper" src="http://i.imgur.com/P4cRUgD.png" width="208">
+</p>
+
+<p align="center">
+  The best Swiper component for React Native.
+</p>
+
+<p align="center">
+  <a href="http://standardjs.com/"><img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square"></a>
+  <a href="https://npmjs.org/package/react-native-swiper"><img alt="npm version" src="http://img.shields.io/npm/v/react-native-swiper.svg?style=flat-square"></a>
+  <a href="https://npmjs.org/package/react-native-swiper"><img alt="npm version" src="http://img.shields.io/npm/dm/react-native-swiper.svg?style=flat-square"></a>
+  <a href="https://github.com/leecade/react-native-swiper/pulls?q=is%3Apr+is%3Aclosed"><img alt="PR Stats" src="https://img.shields.io/issuestats/i/github/leecade/react-native-swiper.svg?style=flat-square"></a>
+  <a href="https://github.com/leecade/react-native-swiper/issues?q=is%3Aissue+is%3Aclosed"><img alt="Issue Stats" src="https://img.shields.io/issuestats/p/github/leecade/react-native-swiper.svg?style=flat-square"></a>
+  <a href="https://gitter.im/leecade/react-native-swiper?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img alt="Join the chat" src="https://badges.gitter.im/leecade/react-native-swiper.svg"></a>
+</p>
+
 # react-native-swiper
 
-[![npm version](http://img.shields.io/npm/v/react-native-swiper.svg?style=flat-square)](https://npmjs.org/package/react-native-swiper "View this project on npm")
-[![npm version](http://img.shields.io/npm/dm/react-native-swiper.svg?style=flat-square)](https://npmjs.org/package/react-native-swiper "View this project on npm")
-[![Issue Stats](http://issuestats.com/github/leecade/react-native-swiper/badge/pr?style=flat-square)](https://github.com/leecade/react-native-swiper/pulls?q=is%3Apr+is%3Aclosed)
-[![Issue Stats](http://issuestats.com/github/leecade/react-native-swiper/badge/issue?style=flat-square)](https://github.com/leecade/react-native-swiper/issues?q=is%3Aissue+is%3Aclosed)
-[![Join the chat at https://gitter.im/leecade/react-native-swiper](https://badges.gitter.im/leecade/react-native-swiper.svg)](https://gitter.im/leecade/react-native-swiper?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-![logo](http://i.imgur.com/P4cRUgD.png)
-
-The best Swiper component for React Native.
-
 ## Roadmap
 
-### V2
-
-- [ ] Improve performance
-
-- [ ] Landscape mode
-
-> Please track in [milestones:v2](https://github.com/leecade/react-native-swiper/milestones/v2)
-
-> Contribute code to [branch:Android](https://github.com/leecade/react-native-swiper/tree/android) and [branch:V2](https://github.com/leecade/react-native-swiper/tree/v2)
-
-> Provide creative in [issues](https://github.com/leecade/react-native-swiper/issues)
-
------
-
-### V1
-
-- [x] **Support for Android**
-
-- [ ] More switch effects
-
-- [ ] Unit tests
-
-- [ ] Check typo
-
-- [ ] Fix bugs
-
-- [x] Infinite loop
-
-- [x] Direction control
-
-- [x] Complete custom style
-
-- [x] Allow title display & custom
-
-- [x] Multiple instances
-
-- [x] Custom container size
-
-- [x] Control buttons
-
-- [x] Autoplay
-
-- [x] Custom pagination style
-
-- [x] State inject
+> see: [ROADMAP.md](ROADMAP.md)
 
 ## Changelogs
+- **[1.5.6]**
+  + Fix [#16](https://github.com/leecade/react-native-swiper/issues/16), [#36](https://github.com/leecade/react-native-swiper/issues/36), [#371](https://github.com/leecade/react-native-swiper/issues/371), [#410](https://github.com/leecade/react-native-swiper/issues/410), [#411](https://github.com/leecade/react-native-swiper/issues/411), [#422](https://github.com/leecade/react-native-swiper/issues/422), [#468](https://github.com/leecade/react-native-swiper/issues/468) Fix landscape orientation auto resize! (thanks [@ahmed3mar](https://github.com/ahmed3mar), [@timmywil](https://github.com/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.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.5.4]
+  + Added easily accessible pagination point manipulation: use `dotColor` / `activeDotColor` and `dotStyle` / `activeDotStyle` (thanks [@denizs](https://github.com/denizs))
+  + Added scrollEnabled prop to documentation (thanks [@ibandominguez](https://github.com/ibandominguez))
 
-- **[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.5.3]
+  + Add loadMinimalLoader prop to customize `<ActivityIndicator />` (thanks [@Exilz](https://github.com/Exilz))
+  + Disable autoplay timer when prop changes to false (thanks [@dizlexik](https://github.com/dizlexik))
+  + Special thanks to [@hypatiah](https://github.com/dizlexik) for fixed some grammatical errors in README
 
-- **[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.5.2]
+  + Add yarn lock
+  + Fix jitter when quickly swiping back and forth between pages (iOS) (thanks [@nemophrost](https://github.com/nemophrost))
+  + The first webview always reloaded when injecting the rest of the children (thanks [@eosterberg](https://github.com/eosterberg))
 
-- **[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](https://github.com/leecade/react-native-swiper/commit/1f8643a67e2768d165132a19629a991a86672036) Move Dimensions import to deconstructed React import for react-native (@thanks [@jedrekk](https://github.com/jedrekk)).
-
-  + [e28af9b](https://github.com/leecade/react-native-swiper/commit/e28af9b205f17447cb3149b45fc220beec037bce) Support index property in combination with loop property (@thanks [@almost](https://github.com/almost)).
-
-  + [6c832d](https://github.com/leecade/react-native-swiper/commit/6c832d6a23da3737a2e8a2667273dc6093bcc9ee) fix warnings about keys for dots (@thanks [@sunnylqm](https://github.com/sunnylqm)).
-
-  + [8de1afc](https://github.com/leecade/react-native-swiper/commit/8de1afcb75a003424231bb089802db53bbbf84e4) Changes to make the example work in xcode 7 (@thanks [@allomov](https://github.com/allomov)).
-
-- [v1.3.0]
-  + [8d6d75c](https://github.com/leecade/react-native-swiper/commit/8d6d75c00edf87b603c218aad0018932277814b5) inject `state` in ScrollResponders (@thanks [@smothers](https://github.com/smothers)).
-
-- [v1.2.2]
-  + [890c0ce](https://github.com/leecade/react-native-swiper/commit/890c0ce64e2192c2ca7830e6699f67b88171e74b) ensure `onMomentumScrollEnd` synchronous update `index`.
-
-- [v1.2.0]
-  + [838b24c](https://github.com/leecade/react-native-swiper/commit/838b24cbeaf49b9ca1dabb4eed8305e314503fb1) Re-design a loop model for avoid img flickering.
-  + [9cb91c5](https://github.com/leecade/react-native-swiper/commit/9cb91c58c84034b0b8b874dbfc2a44da982686a8) fixes [#7](https://github.com/leecade/react-native-swiper/issues/6) `onMomentumScrollEnd` lost `event` param. (thanks [@smothers](https://github.com/smothers))
-
-- [v1.1.1]
-  + [21f0b00](https://github.com/leecade/react-native-swiper/commit/21f0b00138b6936cd3dfac2eb107a14c99c7392b) fixes [#6](https://github.com/leecade/react-native-swiper/issues/6) a define-propType error. (thanks [@benjamingeorge](https://github.com/benjamingeorge))
-
-- [v1.1.0]
-  + [44ec630](https://github.com/leecade/react-native-swiper/commit/44ec630b62844dbeaccee73adaa0996e319ebffb) fixes [#4](https://github.com/leecade/react-native-swiper/issues/4) `onMoementumScrollEnd` gets overridden. (thanks [@subpublicanders](https://github.com/subpublicanders))
-  + [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov))
-
-- [v1.0.4]
-  + [21cb373](https://github.com/leecade/react-native-swiper/commit/21cb3732578588f9d47ee7ddda541577ad691970) fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles))
-
-- [v1.0.3]
-  + [0f796f3](https://github.com/leecade/react-native-swiper/commit/0f796f3557b5aeb1772573cd7ecae2e835bccc0b) fixes [#1](https://github.com/leecade/react-native-swiper/issues/1) Two 'horizontal' in propTypes. (thanks [@MacyzZ](https://github.com/MacyzZ))
+> see more: [CHANGELOG.md](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/samples/basic.js](https://github.com/leecade/react-native-swiper/blob/master/examples/samples/basic.js)
+### [examples/components/Basic](https://github.com/leecade/react-native-swiper/blob/master/examples/components/Basic)
 
-![](http://i.imgur.com/zrsazAG.gif =300x)
+![](http://i.imgur.com/zrsazAG.gif=300x)
 
-### [examples/samples/swiper.js](https://github.com/leecade/react-native-swiper/blob/master/examples/samples/swiper.js)
+### [examples/components/Swiper](https://github.com/leecade/react-native-swiper/blob/master/examples/components/Swiper)
 
-![](http://i.imgur.com/hP3f3oO.gif =300x)
+![](http://i.imgur.com/hP3f3oO.gif=300x)
 
-### [examples/samples/swiper_number.js](https://github.com/leecade/react-native-swiper/blob/master/examples/samples/swiper_number.js)
+### [examples/components/SwiperNumber](https://github.com/leecade/react-native-swiper/blob/master/examples/components/SwiperNumber)
 
-![](http://i.imgur.com/0rqESVb.gif =300x)
+![](http://i.imgur.com/0rqESVb.gif=300x)
 
-### [examples/samples/phone.js](https://github.com/leecade/react-native-swiper/blob/master/examples/samples/phone.js)
+### [examples/components/Phone](https://github.com/leecade/react-native-swiper/blob/master/examples/components/Phone)
+
+![](http://i.imgur.com/c1BhjZm.gif=300x)
+
+### [examples/components/LoadMinimal](https://github.com/leecade/react-native-swiper/blob/master/examples/components/LoadMinimal)
+
+![](http://i.imgur.com/LAOHbJA.gif=300x)
 
-![](http://i.imgur.com/c1BhjZm.gif =300x)
 
 ## Getting Started
 
@@ -171,7 +98,7 @@ $ npm i react-native-swiper --save
 - Install `react-native` first
 
 ```bash
-$ npm i react-native -g
+$ npm i react-native-cli -g
 ```
 
 - Initialization of a react-native project
@@ -183,17 +110,15 @@ $ react-native init myproject
 - Then, edit `myproject/index.ios.js`, like this:
 
 ```jsx
-var Swiper = require('react-native-swiper')
-// es6
-// import Swiper from 'react-native-swiper'
-
-var React = require('react-native');
-var {
+import React, { Component } from 'react';
+import {
   AppRegistry,
   StyleSheet,
   Text,
-  View,
-} = React;
+  View
+} from 'react-native';
+
+import Swiper from 'react-native-swiper';
 
 var styles = StyleSheet.create({
   wrapper: {
@@ -241,7 +166,7 @@ var swiper = React.createClass({
   }
 })
 
-AppRegistry.registerComponent('swiper', () => swiper)
+AppRegistry.registerComponent('myproject', () => swiper);
 ```
 
 ### Properties
@@ -255,6 +180,7 @@ AppRegistry.registerComponent('swiper', () => swiper)
 | 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 |
 
 #### Custom basic style & content
 
@@ -263,6 +189,9 @@ AppRegistry.registerComponent('swiper', () => swiper)
 | width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |
 | height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |
 | style | {...} | `style` | See default style in source. |
+| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. |
+| loadMinimalSize | 1 | `number` | see `loadMinimal`   |
+| loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded
 
 #### Pagination
 
@@ -273,6 +202,10 @@ AppRegistry.registerComponent('swiper', () => swiper)
 | renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. |
 | dot | `<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the dot element. |
 | activeDot | `<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the active-dot element. |
+| dotStyle | - | `object` | Allow custom the active-dot element. |
+| dotColor | - | `string` | Allow custom the active-dot element. |
+| activeDotColor | - | `string` | Allow custom the active-dot element. |
+| activeDotStyle | - | `object` | Allow custom the active-dot element. |
 
 #### Autoplay
 
@@ -310,6 +243,7 @@ AppRegistry.registerComponent('swiper', () => swiper)
 | scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped.  |
 | removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists.  |
 | automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. |
+| scrollEnabled | true | `bool` | Enables/Disables swiping |
 
 > @see: http://facebook.github.io/react-native/docs/scrollview.html
 
@@ -346,26 +280,40 @@ var swiper = React.createClass({
 
 ### Methods
 
-#### scrollBy(index)
+#### scrollBy(index, animated)
 
 Scroll by relative index.
 
 Parameters:
 
-| Name  | Type     | Description |
-| :---- | :------: | :--- |
-| index | number   | offset index |
+| Name  | Type     | default | Description |
+| :---- | :------: | :------: | :--- |
+| index | `number`   | `undefined` | offset index |
+| animated | `bool`   | `true` | offset index |
 
 ### Examples
 
-@TODO, see code in [examples](https://github.com/leecade/react-native-swiper/tree/master/examples/) first.
+```bash
+$ cd examples
+$ npm i
+$ react-native run-ios
+```
+
+> Quick start with [examples](https://github.com/leecade/react-native-swiper/tree/master/examples/).
 
 ### Development
 
 ```bash
-$ npm start
+$ cd examples
+$ npm i
+$ npm run dev
+$ react-native run-ios
 ```
 
+Then launch simulator to preview. Note that you just need to edit the source file `src/index.js`, the change will auto sync to examples.
+
+And now that this project follows the [standard](https://github.com/feross/standard) code style, you'd better prepare it for IDE.
+
 ## Contribution
 
 - [@leecade](mailto:leecade@163.com) The main author.

ROADMAP.md

@@ -0,0 +1,47 @@
+### V2
+
+- [ ] Improve performance
+
+- [ ] Landscape mode
+
+> Please track in [milestones:v2](https://github.com/leecade/react-native-swiper/milestones/v2)
+
+> Contribute code to [branch:Android](https://github.com/leecade/react-native-swiper/tree/android) and [branch:V2](https://github.com/leecade/react-native-swiper/tree/v2)
+
+> Provide creative in [issues](https://github.com/leecade/react-native-swiper/issues)
+
+-----
+
+### V1
+
+- [x] **Support for Android**
+
+- [ ] More switch effects
+
+- [ ] Unit tests
+
+- [ ] Check typo
+
+- [ ] Fix bugs
+
+- [x] Improve performance
+
+- [x] Infinite loop
+
+- [x] Direction control
+
+- [x] Complete custom style
+
+- [x] Allow title display & custom
+
+- [x] Multiple instances
+
+- [x] Custom container size
+
+- [x] Control buttons
+
+- [x] Autoplay
+
+- [x] Custom pagination style
+
+- [x] State inject

dist/index.js

@@ -1,616 +0,0 @@
-'use strict';
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
-                                                                                                                                                                                                                                                                   * react-native-swiper
-                                                                                                                                                                                                                                                                   * @author leecade<leecade@163.com>
-                                                                                                                                                                                                                                                                   */
-
-
-// Using bare setTimeout, setInterval, setImmediate
-// and requestAnimationFrame calls is very dangerous
-// because if you forget to cancel the request before
-// the component is unmounted, you risk the callback
-// throwing an exception.
-
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactNative = require('react-native');
-
-var _reactNative2 = _interopRequireDefault(_reactNative);
-
-var _reactTimerMixin = require('react-timer-mixin');
-
-var _reactTimerMixin2 = _interopRequireDefault(_reactTimerMixin);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _Dimensions$get = _reactNative.Dimensions.get('window');
-
-var width = _Dimensions$get.width;
-var height = _Dimensions$get.height;
-
-/**
- * Default styles
- * @type {StyleSheetPropType}
- */
-
-var styles = _reactNative.StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    position: 'relative'
-  },
-
-  wrapper: {
-    backgroundColor: 'transparent'
-  },
-
-  slide: {
-    backgroundColor: 'transparent'
-  },
-
-  pagination_x: {
-    position: 'absolute',
-    bottom: 25,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent'
-  },
-
-  pagination_y: {
-    position: 'absolute',
-    right: 15,
-    top: 0,
-    bottom: 0,
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent'
-  },
-
-  title: {
-    height: 30,
-    justifyContent: 'center',
-    position: 'absolute',
-    paddingLeft: 10,
-    bottom: -30,
-    left: 0,
-    flexWrap: 'nowrap',
-    width: 250,
-    backgroundColor: 'transparent'
-  },
-
-  buttonWrapper: {
-    backgroundColor: 'transparent',
-    flexDirection: 'row',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    flex: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-
-  buttonText: {
-    fontSize: 50,
-    color: '#007aff',
-    fontFamily: 'Arial'
-  }
-});
-
-// missing `module.exports = exports['default'];` with babel6
-// export default React.createClass({
-module.exports = _react2.default.createClass({
-  displayName: 'exports',
-
-
-  /**
-   * Props Validation
-   * @type {Object}
-   */
-  propTypes: {
-    horizontal: _react2.default.PropTypes.bool,
-    children: _react2.default.PropTypes.node.isRequired,
-    style: _reactNative.View.propTypes.style,
-    pagingEnabled: _react2.default.PropTypes.bool,
-    showsHorizontalScrollIndicator: _react2.default.PropTypes.bool,
-    showsVerticalScrollIndicator: _react2.default.PropTypes.bool,
-    bounces: _react2.default.PropTypes.bool,
-    scrollsToTop: _react2.default.PropTypes.bool,
-    removeClippedSubviews: _react2.default.PropTypes.bool,
-    automaticallyAdjustContentInsets: _react2.default.PropTypes.bool,
-    showsPagination: _react2.default.PropTypes.bool,
-    showsButtons: _react2.default.PropTypes.bool,
-    loop: _react2.default.PropTypes.bool,
-    autoplay: _react2.default.PropTypes.bool,
-    autoplayTimeout: _react2.default.PropTypes.number,
-    autoplayDirection: _react2.default.PropTypes.bool,
-    index: _react2.default.PropTypes.number,
-    renderPagination: _react2.default.PropTypes.func
-  },
-
-  mixins: [_reactTimerMixin2.default],
-
-  /**
-   * Default props
-   * @return {object} props
-   * @see http://facebook.github.io/react-native/docs/scrollview.html
-   */
-  getDefaultProps: function getDefaultProps() {
-    return {
-      horizontal: true,
-      pagingEnabled: true,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-      bounces: false,
-      scrollsToTop: false,
-      removeClippedSubviews: false,
-      automaticallyAdjustContentInsets: false,
-      showsPagination: true,
-      showsButtons: false,
-      loop: true,
-      autoplay: false,
-      autoplayTimeout: 2.5,
-      autoplayDirection: true,
-      index: 0
-    };
-  },
-
-
-  /**
-   * Init states
-   * @return {object} states
-   */
-  getInitialState: function getInitialState() {
-    return this.initState(this.props);
-  },
-
-
-  /**
-   * autoplay timer
-   * @type {null}
-   */
-  autoplayTimer: null,
-
-  componentWillReceiveProps: function componentWillReceiveProps(props) {
-    this.setState(this.initState(props));
-  },
-  componentDidMount: function componentDidMount() {
-    this.autoplay();
-  },
-  initState: function initState(props) {
-    // set the current state
-    var state = this.state || {};
-
-    var initState = {
-      isScrolling: false,
-      autoplayEnd: false,
-      loopJump: false
-    };
-
-    initState.total = props.children ? props.children.length || 1 : 0;
-
-    if (state.total === initState.total) {
-      // retain the index
-      initState.index = state.index;
-    } else {
-      // reset the index
-      initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0;
-    }
-
-    // Default: horizontal
-    initState.dir = props.horizontal === false ? 'y' : 'x';
-    initState.width = props.width || width;
-    initState.height = props.height || height;
-    initState.offset = {};
-
-    if (initState.total > 1) {
-      var setup = initState.index;
-      if (props.loop) {
-        setup++;
-      }
-      initState.offset[initState.dir] = initState.dir === 'y' ? initState.height * setup : initState.width * setup;
-    }
-    return initState;
-  },
-
-
-  loopJump: function loopJump() {
-    var _this = this;
-
-    if (this.state.loopJump) {
-      var i = this.state.index + (this.props.loop ? 1 : 0);
-      setTimeout(function () {
-        return _this.refs.scrollView.setPageWithoutAnimation && _this.refs.scrollView.setPageWithoutAnimation(i);
-      }, 50);
-    }
-  },
-
-  /**
-   * Automatic rolling
-   */
-  autoplay: function autoplay() {
-    var _this2 = this;
-
-    if (!Array.isArray(this.props.children) || !this.props.autoplay || this.state.isScrolling || this.state.autoplayEnd) {
-      return;
-    }
-
-    clearTimeout(this.autoplayTimer);
-
-    this.autoplayTimer = this.setTimeout(function () {
-      if (!_this2.props.loop && (_this2.props.autoplayDirection ? _this2.state.index === _this2.state.total - 1 : _this2.state.index === 0)) {
-        return _this2.setState({ autoplayEnd: true });
-      }
-
-      _this2.scrollBy(_this2.props.autoplayDirection ? 1 : -1);
-    }, this.props.autoplayTimeout * 1000);
-  },
-
-
-  /**
-   * Scroll begin handle
-   * @param  {object} e native event
-   */
-  onScrollBegin: function onScrollBegin(e) {
-    var _this3 = this;
-
-    // update scroll state
-    this.setState({ isScrolling: true });
-
-    this.setTimeout(function () {
-      _this3.props.onScrollBeginDrag && _this3.props.onScrollBeginDrag(e, _this3.state, _this3);
-    });
-  },
-
-
-  /**
-   * Scroll end handle
-   * @param  {object} e native event
-   */
-  onScrollEnd: function onScrollEnd(e) {
-    var _this4 = this;
-
-    // update scroll state
-    this.setState({
-      isScrolling: false
-    });
-
-    // making our events coming from android compatible to updateIndex logic
-    if (!e.nativeEvent.contentOffset) {
-      if (this.state.dir === 'x') {
-        e.nativeEvent.contentOffset = { x: e.nativeEvent.position * this.state.width };
-      } else {
-        e.nativeEvent.contentOffset = { y: e.nativeEvent.position * this.state.height };
-      }
-    }
-
-    this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);
-
-    // Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
-    // in setTimeout to ensure synchronous update `index`
-    this.setTimeout(function () {
-      _this4.autoplay();
-      _this4.loopJump();
-
-      // if `onMomentumScrollEnd` registered will be called here
-      _this4.props.onMomentumScrollEnd && _this4.props.onMomentumScrollEnd(e, _this4.state, _this4);
-    });
-  },
-
-
-  /*
-   * Drag end handle
-   * @param {object} e native event
-   */
-  onScrollEndDrag: function onScrollEndDrag(e) {
-    var contentOffset = e.nativeEvent.contentOffset;
-    var _props = this.props;
-    var horizontal = _props.horizontal;
-    var children = _props.children;
-    var _state = this.state;
-    var offset = _state.offset;
-    var index = _state.index;
-
-    var previousOffset = horizontal ? offset.x : offset.y;
-    var newOffset = horizontal ? contentOffset.x : contentOffset.y;
-
-    if (previousOffset === newOffset && (index === 0 || index === children.length - 1)) {
-      this.setState({
-        isScrolling: false
-      });
-    }
-  },
-
-
-  /**
-   * Update index after scroll
-   * @param  {object} offset content offset
-   * @param  {string} dir    'x' || 'y'
-   */
-  updateIndex: function updateIndex(offset, dir) {
-
-    var state = this.state;
-    var index = state.index;
-    var diff = offset[dir] - state.offset[dir];
-    var step = dir === 'x' ? state.width : state.height;
-    var loopJump = false;
-
-    // Do nothing if offset no change.
-    if (!diff) return;
-
-    // Note: if touch very very quickly and continuous,
-    // the variation of `index` more than 1.
-    // parseInt() ensures it's always an integer
-    index = parseInt(index + Math.round(diff / step));
-
-    if (this.props.loop) {
-      if (index <= -1) {
-        index = state.total - 1;
-        offset[dir] = step * state.total;
-        loopJump = true;
-      } else if (index >= state.total) {
-        index = 0;
-        offset[dir] = step;
-        loopJump = true;
-      }
-    }
-
-    this.setState({
-      index: index,
-      offset: offset,
-      loopJump: loopJump
-    });
-  },
-
-
-  /**
-   * Scroll by index
-   * @param  {number} index offset index
-   */
-  scrollBy: function scrollBy(index) {
-    var _this5 = this;
-
-    if (this.state.isScrolling || this.state.total < 2) return;
-    var state = this.state;
-    var diff = (this.props.loop ? 1 : 0) + index + this.state.index;
-    var x = 0;
-    var y = 0;
-    if (state.dir === 'x') x = diff * state.width;
-    if (state.dir === 'y') y = diff * state.height;
-
-    this.refs.scrollView && this.refs.scrollView.scrollTo({ x: x, y: y });
-
-    // update scroll state
-    this.setState({
-      isScrolling: true,
-      autoplayEnd: false
-    });
-
-    // trigger onScrollEnd manually in android
-    if (_reactNative.Platform.OS === 'android') {
-      this.setTimeout(function () {
-        _this5.onScrollEnd({
-          nativeEvent: {
-            position: diff
-          }
-        });
-      }, 0);
-    }
-  },
-  scrollViewPropOverrides: function scrollViewPropOverrides() {
-    var _this6 = this;
-
-    var props = this.props;
-    var overrides = {};
-
-    /*
-    const scrollResponders = [
-      'onMomentumScrollBegin',
-      'onTouchStartCapture',
-      'onTouchStart',
-      'onTouchEnd',
-      'onResponderRelease',
-    ]
-    */
-
-    for (var prop in props) {
-      // if(~scrollResponders.indexOf(prop)
-      if (typeof props[prop] === 'function' && prop !== 'onMomentumScrollEnd' && prop !== 'renderPagination' && prop !== 'onScrollBeginDrag') {
-        (function () {
-          var originResponder = props[prop];
-          overrides[prop] = function (e) {
-            return originResponder(e, _this6.state, _this6);
-          };
-        })();
-      }
-    }
-
-    return overrides;
-  },
-
-
-  /**
-   * Render pagination
-   * @return {object} react-dom
-   */
-  renderPagination: function renderPagination() {
-
-    // By default, dots only show when `total` > 2
-    if (this.state.total <= 1) return null;
-
-    var dots = [];
-    var ActiveDot = this.props.activeDot || _react2.default.createElement(_reactNative.View, { style: {
-        backgroundColor: '#007aff',
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginLeft: 3,
-        marginRight: 3,
-        marginTop: 3,
-        marginBottom: 3
-      } });
-    var Dot = this.props.dot || _react2.default.createElement(_reactNative.View, { style: {
-        backgroundColor: 'rgba(0,0,0,.2)',
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginLeft: 3,
-        marginRight: 3,
-        marginTop: 3,
-        marginBottom: 3
-      } });
-    for (var i = 0; i < this.state.total; i++) {
-      dots.push(i === this.state.index ? _react2.default.cloneElement(ActiveDot, { key: i }) : _react2.default.cloneElement(Dot, { key: i }));
-    }
-
-    return _react2.default.createElement(
-      _reactNative.View,
-      { pointerEvents: 'none', style: [styles['pagination_' + this.state.dir], this.props.paginationStyle] },
-      dots
-    );
-  },
-  renderTitle: function renderTitle() {
-    var child = this.props.children[this.state.index];
-    var title = child && child.props.title;
-    return title ? _react2.default.createElement(
-      _reactNative.View,
-      { style: styles.title },
-      this.props.children[this.state.index].props.title
-    ) : null;
-  },
-  renderNextButton: function renderNextButton() {
-    var _this7 = this;
-
-    var button = void 0;
-
-    if (this.props.loop || this.state.index != this.state.total - 1) {
-      button = this.props.nextButton || _react2.default.createElement(
-        _reactNative.Text,
-        { style: styles.buttonText },
-        '›'
-      );
-    }
-
-    return _react2.default.createElement(
-      _reactNative.TouchableOpacity,
-      { onPress: function onPress() {
-          return button !== null && _this7.scrollBy.call(_this7, 1);
-        } },
-      _react2.default.createElement(
-        _reactNative.View,
-        null,
-        button
-      )
-    );
-  },
-  renderPrevButton: function renderPrevButton() {
-    var _this8 = this;
-
-    var button = null;
-
-    if (this.props.loop || this.state.index != 0) {
-      button = this.props.prevButton || _react2.default.createElement(
-        _reactNative.Text,
-        { style: styles.buttonText },
-        '‹'
-      );
-    }
-
-    return _react2.default.createElement(
-      _reactNative.TouchableOpacity,
-      { onPress: function onPress() {
-          return button !== null && _this8.scrollBy.call(_this8, -1);
-        } },
-      _react2.default.createElement(
-        _reactNative.View,
-        null,
-        button
-      )
-    );
-  },
-  renderButtons: function renderButtons() {
-    return _react2.default.createElement(
-      _reactNative.View,
-      { pointerEvents: 'box-none', style: [styles.buttonWrapper, { width: this.state.width, height: this.state.height }, this.props.buttonWrapperStyle] },
-      this.renderPrevButton(),
-      this.renderNextButton()
-    );
-  },
-  renderScrollView: function renderScrollView(pages) {
-    return _react2.default.createElement(
-      _reactNative.ScrollView,
-      _extends({ ref: 'scrollView'
-      }, this.props, this.scrollViewPropOverrides(), {
-        contentContainerStyle: [styles.wrapper, this.props.style],
-        contentOffset: this.state.offset,
-        onScrollBeginDrag: this.onScrollBegin,
-        onMomentumScrollEnd: this.onScrollEnd,
-        onScrollEndDrag: this.onScrollEndDrag }),
-      pages
-    );
-  },
-
-
-  /**
-   * Default render
-   * @return {object} react-dom
-   */
-  render: function render() {
-    var state = this.state;
-    var props = this.props;
-    var children = props.children;
-    var index = state.index;
-    var total = state.total;
-    var loop = props.loop;
-    var dir = state.dir;
-    var key = 0;
-
-    var pages = [];
-    var pageStyle = [{ width: state.width, height: state.height }, styles.slide];
-
-    // For make infinite at least total > 1
-    if (total > 1) {
-
-      // Re-design a loop model for avoid img flickering
-      pages = Object.keys(children);
-      if (loop) {
-        pages.unshift(total - 1 + '');
-        pages.push('0');
-      }
-
-      pages = pages.map(function (page, i) {
-        return _react2.default.createElement(
-          _reactNative.View,
-          { style: pageStyle, key: i },
-          children[page]
-        );
-      });
-    } else pages = _react2.default.createElement(
-      _reactNative.View,
-      { style: pageStyle },
-      children
-    );
-
-    return _react2.default.createElement(
-      _reactNative.View,
-      { style: [styles.container, {
-          width: state.width,
-          height: state.height
-        }] },
-      this.renderScrollView(pages),
-      props.showsPagination && (props.renderPagination ? this.props.renderPagination(state.index, state.total, this) : this.renderPagination()),
-      this.renderTitle(),
-      this.props.showsButtons && this.renderButtons()
-    );
-  }
-});

examples/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/.flowconfig

@@ -1,68 +1,18 @@
 [ignore]
+; We fork some components by platform
+.*/*[.]android.js
 
-# We fork some components by platform.
-.*/*.web.js
-.*/*.android.js
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
 
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
-
-# Ugh
-.*/node_modules/babel.*
-.*/node_modules/babylon.*
-.*/node_modules/invariant.*
-
-# Ignore react and fbjs where there are overlaps, but don't ignore
-# anything that react-native relies on
-.*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/ErrorUtils.js
-
-# Flow has a built-in definition for the 'react' module which we prefer to use
-# over the currently-untyped source
-.*/node_modules/react/react.js
-.*/node_modules/react/lib/React.js
-.*/node_modules/react/lib/ReactDOM.js
-
-.*/__mocks__/.*
-.*/__tests__/.*
-
-.*/commoner/test/source/widget/share.js
-
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
-
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
-
-# Ignore jest
-.*/node_modules/jest-cli/.*
-
-# Ignore Website
-.*/website/.*
-
-# Ignore generators
-.*/local-cli/generator.*
-
-# Ignore BUCK generated folders
-.*\.buckd/
-
-.*/node_modules/is-my-json-valid/test/.*\.json
-.*/node_modules/iconv-lite/encodings/tables/.*\.json
-.*/node_modules/y18n/test/.*\.json
-.*/node_modules/spdx-license-ids/spdx-license-ids.json
-.*/node_modules/spdx-exceptions/index.json
-.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
-.*/node_modules/resolve/lib/core.json
-.*/node_modules/jsonparse/samplejson/.*\.json
-.*/node_modules/json5/test/.*\.json
-.*/node_modules/ua-parser-js/test/.*\.json
-.*/node_modules/builtin-modules/builtin-modules.json
-.*/node_modules/binary-extensions/binary-extensions.json
-.*/node_modules/url-regex/tlds.json
-.*/node_modules/joi/.*\.json
-.*/node_modules/isemail/.*\.json
-.*/node_modules/tr46/.*\.json
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
 
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
 
 [include]
 
@@ -72,23 +22,24 @@ node_modules/react-native/flow
 flow/
 
 [options]
-module.system=haste
+emoji=true
 
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
+module.system=haste
 
 munge_underscores=true
 
-module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
 
 [version]
-0.24.0
+^0.49.1

examples/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/.gitignore

@@ -22,19 +22,32 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Android/IJ
+# Android/IntelliJ
 #
+build/
 .idea
 .gradle
 local.properties
+*.iml
 
 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
 \.buckd/
-android/app/libs
-android/keystores/debug.keystore
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

examples/App.js

@@ -0,0 +1,9 @@
+import { AppRegistry } from 'react-native'
+import Basic from './components/Basic/'
+// import Dynamic from './components/Dynamic/'
+// import LoadMinimal from './components/LoadMinimal/'
+// import Phone from './components/Phone/'
+// import PhotoView from './components/PhotoView/' // not working
+// import Swiper from './components/Swiper/'  // working but no title displayed
+// import SwiperNumber from './components/SwiperNumber/' // working but no title displayed
+AppRegistry.registerComponent('examples', () => Basic);

examples/__tests__/index.android.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

examples/__tests__/index.ios.js

@@ -0,0 +1,12 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(
+    <Index />
+  );
+});

examples/android/app/BUCK

@@ -1,18 +1,17 @@
-import re
-
 # To learn about Buck see [Docs](https://buckbuild.com/).
 # To run your application with Buck:
 # - install Buck
 # - `npm start` - to start the packager
 # - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
 # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
 # - `buck install -r android/app` - compile, install and run application
 #
 
 lib_deps = []
+
 for jarfile in glob(['libs/*.jar']):
-  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
   lib_deps.append(':' + name)
   prebuilt_jar(
     name = name,
@@ -20,7 +19,7 @@ for jarfile in glob(['libs/*.jar']):
   )
 
 for aarfile in glob(['libs/*.aar']):
-  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
   lib_deps.append(':' + name)
   android_prebuilt_aar(
     name = name,
@@ -28,39 +27,39 @@ for aarfile in glob(['libs/*.aar']):
   )
 
 android_library(
-  name = 'all-libs',
-  exported_deps = lib_deps
+    name = "all-libs",
+    exported_deps = lib_deps,
 )
 
 android_library(
-  name = 'app-code',
-  srcs = glob([
-    'src/main/java/**/*.java',
-  ]),
-  deps = [
-    ':all-libs',
-    ':build_config',
-    ':res',
-  ],
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
 )
 
 android_build_config(
-  name = 'build_config',
-  package = 'com.swiper',
+    name = "build_config",
+    package = "com.examples",
 )
 
 android_resource(
-  name = 'res',
-  res = 'src/main/res',
-  package = 'com.swiper',
+    name = "res",
+    package = "com.examples",
+    res = "src/main/res",
 )
 
 android_binary(
-  name = 'app',
-  package_type = 'debug',
-  manifest = 'src/main/AndroidManifest.xml',
-  keystore = '//android/keystores:debug',
-  deps = [
-    ':app-code',
-  ],
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
 )

examples/android/app/build.gradle

@@ -33,6 +33,13 @@ import com.android.build.OutputFile
  *   // bundleInPaidRelease: true,
  *   // bundleInBeta: true,
  *
+ *   // whether to disable dev mode in custom build variants (by default only disabled in release)
+ *   // for example: to disable dev mode in the staging build type (if configured)
+ *   devDisabledInStaging: true,
+ *   // The configuration property can be in the following formats
+ *   //         'devDisabledIn${productFlavor}${buildType}'
+ *   //         'devDisabledIn${buildType}'
+ *
  *   // the root of your project, i.e. where "package.json" lives
  *   root: "../../",
  *
@@ -55,7 +62,13 @@ import com.android.build.OutputFile
  *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
  *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
  *   // for example, you might want to remove it from here.
- *   inputExcludes: ["android/**", "ios/**"]
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"],
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
  * ]
  */
 
@@ -81,7 +94,7 @@ android {
     buildToolsVersion "23.0.1"
 
     defaultConfig {
-        applicationId "com.swiper"
+        applicationId "com.examples"
         minSdkVersion 16
         targetSdkVersion 22
         versionCode 1
@@ -128,6 +141,6 @@ dependencies {
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-  from configurations.compile
-  into 'libs'
+    from configurations.compile
+    into 'libs'
 }

examples/android/app/proguard-rules.pro

@@ -26,11 +26,14 @@
 # See http://sourceforge.net/p/proguard/bugs/466/
 -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
 -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
+-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
 
 # Do not strip any method/class that is annotated with @DoNotStrip
 -keep @com.facebook.proguard.annotations.DoNotStrip class *
+-keep @com.facebook.common.internal.DoNotStrip class *
 -keepclassmembers class * {
     @com.facebook.proguard.annotations.DoNotStrip *;
+    @com.facebook.common.internal.DoNotStrip *;
 }
 
 -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
@@ -47,13 +50,17 @@
 
 -dontwarn com.facebook.react.**
 
+# TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
+# See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
+-dontwarn android.text.StaticLayout
+
 # okhttp
 
 -keepattributes Signature
 -keepattributes *Annotation*
--keep class com.squareup.okhttp.** { *; }
--keep interface com.squareup.okhttp.** { *; }
--dontwarn com.squareup.okhttp.**
+-keep class okhttp3.** { *; }
+-keep interface okhttp3.** { *; }
+-dontwarn okhttp3.**
 
 # okio
 

examples/android/app/react.gradle

@@ -1,87 +0,0 @@
-import org.apache.tools.ant.taskdefs.condition.Os
-
-def config = project.hasProperty("react") ? project.react : [];
-
-def bundleAssetName = config.bundleAssetName ?: "index.android.bundle"
-def entryFile = config.entryFile ?: "index.android.js"
-
-// because elvis operator
-def elvisFile(thing) {
-    return thing ? file(thing) : null;
-}
-
-def reactRoot = elvisFile(config.root) ?: file("../../")
-def jsBundleDirDebug = elvisFile(config.jsBundleDirDebug) ?:
-        file("$buildDir/intermediates/assets/debug")
-def jsBundleDirRelease = elvisFile(config.jsBundleDirRelease) ?:
-        file("$buildDir/intermediates/assets/release")
-def resourcesDirDebug = elvisFile(config.resourcesDirDebug) ?:
-        file("$buildDir/intermediates/res/merged/debug")
-def resourcesDirRelease = elvisFile(config.resourcesDirRelease) ?:
-        file("$buildDir/intermediates/res/merged/release")
-def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]
-
-def jsBundleFileDebug = file("$jsBundleDirDebug/$bundleAssetName")
-def jsBundleFileRelease = file("$jsBundleDirRelease/$bundleAssetName")
-
-task bundleDebugJsAndAssets(type: Exec) {
-    // create dirs if they are not there (e.g. the "clean" task just ran)
-    doFirst {
-        jsBundleDirDebug.mkdirs()
-        resourcesDirDebug.mkdirs()
-    }
-
-    // set up inputs and outputs so gradle can cache the result
-    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
-    outputs.dir jsBundleDirDebug
-    outputs.dir resourcesDirDebug
-
-    // set up the call to the react-native cli
-    workingDir reactRoot
-    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-        commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
-            entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
-    } else {
-        commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
-            entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
-    }
-
-    enabled config.bundleInDebug ?: false
-}
-
-task bundleReleaseJsAndAssets(type: Exec) {
-    // create dirs if they are not there (e.g. the "clean" task just ran)
-    doFirst {
-        jsBundleDirRelease.mkdirs()
-        resourcesDirRelease.mkdirs()
-    }
-
-    // set up inputs and outputs so gradle can cache the result
-    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
-    outputs.dir jsBundleDirRelease
-    outputs.dir resourcesDirRelease
-
-    // set up the call to the react-native cli
-    workingDir reactRoot
-    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
-        commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
-            entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
-    } else {
-        commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
-            entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
-    }
-
-    enabled config.bundleInRelease ?: true
-}
-
-gradle.projectsEvaluated {
-    // hook bundleDebugJsAndAssets into the android build process
-    bundleDebugJsAndAssets.dependsOn mergeDebugResources
-    bundleDebugJsAndAssets.dependsOn mergeDebugAssets
-    processDebugResources.dependsOn bundleDebugJsAndAssets
-
-    // hook bundleReleaseJsAndAssets into the android build process
-    bundleReleaseJsAndAssets.dependsOn mergeReleaseResources
-    bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets
-    processReleaseResources.dependsOn bundleReleaseJsAndAssets
-}

examples/android/app/src/main/AndroidManifest.xml

@@ -1,9 +1,17 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.swiper">
+    package="com.examples"
+    android:versionCode="1"
+    android:versionName="1.0">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <uses-sdk
+        android:minSdkVersion="16"
+        android:targetSdkVersion="22" />
 
     <application
+      android:name=".MainApplication"
       android:allowBackup="true"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
@@ -11,7 +19,8 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />

examples/android/app/src/main/java/com/examples/MainActivity.java

@@ -0,0 +1,15 @@
+package com.examples;
+
+import com.facebook.react.ReactActivity;
+
+public class MainActivity extends ReactActivity {
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "examples";
+    }
+}

examples/android/app/src/main/java/com/examples/MainApplication.java

@@ -0,0 +1,40 @@
+package com.examples;
+
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public boolean getUseDeveloperSupport() {
+      return BuildConfig.DEBUG;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+          new MainReactPackage()
+      );
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false);
+  }
+}

examples/android/app/src/main/java/com/swiper/MainActivity.java

@@ -1,40 +0,0 @@
-package com.swiper;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MainActivity extends ReactActivity {
-
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "swiper";
-    }
-
-    /**
-     * Returns whether dev mode should be enabled.
-     * This enables e.g. the dev menu.
-     */
-    @Override
-    protected boolean getUseDeveloperSupport() {
-        return BuildConfig.DEBUG;
-    }
-
-    /**
-     * A list of packages used by the app. If the app uses additional views
-     * or modules besides the default ones, add more packages here.
-     */
-    @Override
-    protected List<ReactPackage> getPackages() {
-        return Arrays.<ReactPackage>asList(
-            new MainReactPackage()
-        );
-    }
-}

examples/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">swiper</string>
+    <string name="app_name">examples</string>
 </resources>

examples/android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:1.3.1'
+        classpath 'com.android.tools.build:gradle:2.2.3'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -18,7 +18,7 @@ allprojects {
         jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url "$projectDir/../../node_modules/react-native/android"
+            url "$rootDir/../node_modules/react-native/android"
         }
     }
 }

examples/android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

examples/android/keystores/BUCK

@@ -0,0 +1,8 @@
+keystore(
+    name = "debug",
+    properties = "debug.keystore.properties",
+    store = "debug.keystore",
+    visibility = [
+        "PUBLIC",
+    ],
+)

examples/android/keystores/debug.keystore.properties

@@ -0,0 +1,4 @@
+key.store=debug.keystore
+key.alias=androiddebugkey
+key.store.password=android
+key.alias.password=android

examples/android/settings.gradle

@@ -1,3 +1,3 @@
-rootProject.name = 'swiper'
+rootProject.name = 'examples'
 
 include ':app'

examples/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "examples",
+  "displayName": "examples"
+}

examples/components/Basic/index.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {
+  Text,
+  View
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+
+var styles = {
+  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 () => <Swiper style={styles.wrapper} showsButtons>
+  <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>

examples/components/Dynamic/index.js

@@ -1,11 +1,11 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import Swiper from '../swiper.dist'
-
-const styles = StyleSheet.create({
-  wrapper: {
-  },
+import React, { Component } from 'react'
+import {
+  Text,
+  View
+} from 'react-native'
+import Swiper from 'react-native-swiper'
 
+const styles = {
   slide1: {
     flex: 1,
     justifyContent: 'center',
@@ -32,18 +32,16 @@ const styles = StyleSheet.create({
     fontSize: 30,
     fontWeight: 'bold'
   }
-})
+}
 
-export default class DynamicSample extends React.Component {
-  constructor(props) {
+export default class extends Component {
+  constructor (props) {
     super(props)
-
     this.state = {
       items: []
     }
   }
-
-  componentDidMount() {
+  componentDidMount () {
     this.setState({
       items: [
         { title: 'Hello Swiper', css: styles.slide1 },
@@ -52,10 +50,9 @@ export default class DynamicSample extends React.Component {
       ]
     })
   }
-
-  render() {
+  render () {
     return (
-      <Swiper showsButtons={true}>
+      <Swiper showsButtons>
         {this.state.items.map((item, key) => {
           return (
             <View key={key} style={item.css}>

examples/components/LoadMinimal/index.js

@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+import {
+  Text,
+  View,
+  Image,
+  Dimensions
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+const { width } = Dimensions.get('window')
+const loading = require('./img/loading.gif')
+
+const styles = {
+  wrapper: {
+  },
+
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'transparent'
+  },
+  image: {
+    width,
+    flex: 1,
+    backgroundColor: 'transparent'
+  },
+
+  loadingView: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,.5)'
+  },
+
+  loadingImage: {
+    width: 60,
+    height: 60
+  }
+}
+
+const Slide = props => {
+  return (<View style={styles.slide}>
+    <Image onLoad={props.loadHandle.bind(null, props.i)} style={styles.image} source={{uri: props.uri}} />
+    {
+      !props.loaded && <View style={styles.loadingView}>
+        <Image style={styles.loadingImage} source={loading} />
+      </View>
+    }
+  </View>)
+}
+
+export default class extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      imgList: [
+        'https://gitlab.pro/yuji/demo/uploads/d6133098b53fe1a5f3c5c00cf3c2d670/DVrj5Hz.jpg_1',
+        'https://gitlab.pro/yuji/demo/uploads/2d5122a2504e5cbdf01f4fcf85f2594b/Mwb8VWH.jpg',
+        'https://gitlab.pro/yuji/demo/uploads/4421f77012d43a0b4e7cfbe1144aac7c/XFVzKhq.jpg',
+        'https://gitlab.pro/yuji/demo/uploads/576ef91941b0bda5761dde6914dae9f0/kD3eeHe.jpg'
+      ],
+      loadQueue: [0, 0, 0, 0]
+    }
+    this.loadHandle = this.loadHandle.bind(this)
+  }
+  loadHandle (i) {
+    let loadQueue = this.state.loadQueue
+    loadQueue[i] = 1
+    this.setState({
+      loadQueue
+    })
+  }
+  render () {
+    return (
+      <View style={{flex: 1}}>
+        <Swiper loadMinimal loadMinimalSize={1} style={styles.wrapper} loop={false}>
+          {
+            this.state.imgList.map((item, i) => <Slide
+              loadHandle={this.loadHandle}
+              loaded={!!this.state.loadQueue[i]}
+              uri={item}
+              i={i}
+              key={i} />)
+          }
+        </Swiper>
+        <View>
+          <Text>Current Loaded Images: {this.state.loadQueue}</Text>
+        </View>
+      </View>
+    )
+  }
+}

examples/components/Phone/index.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Image,
+  StatusBar,
+  Dimensions
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+const { width, height } = Dimensions.get('window')
+
+const styles = {
+  wrapper: {
+    // backgroundColor: '#f00'
+  },
+
+  slide: {
+    flex: 1,
+    backgroundColor: 'transparent'
+  },
+  container: {
+    flex: 1,
+  },
+
+  imgBackground: {
+    width,
+    height,
+    backgroundColor: 'transparent',
+    position: 'absolute'
+  },
+
+  image: {
+    width,
+    height,
+  }
+}
+
+export default class extends Component {
+  render () {
+    return (
+      <View style={styles.container}>
+        <StatusBar barStyle='light-content' />
+        <Image
+          source={require('./img/bg.jpg')}
+          style={styles.imgBackground}
+        />
+        <Swiper style={styles.wrapper}
+          dot={<View style={{backgroundColor: 'rgba(255,255,255,.3)', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}
+          activeDot={<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}
+          paginationStyle={{
+            bottom: 70
+          }}
+          loop={false}>
+          <View style={styles.slide}>
+            <Image
+              style={styles.image}
+              source={require('./img/1.jpg')}
+              resizeMode='cover'
+            />
+          </View>
+          <View style={styles.slide}>
+            <Image
+              style={styles.image}
+              source={require('./img/2.jpg')}
+              resizeMode='cover'
+            />
+          </View>
+          <View style={styles.slide}>
+            <Image style={styles.image} source={require('./img/3.jpg')} />
+          </View>
+        </Swiper>
+      </View>
+    )
+  }
+}

examples/components/PhotoView/index.js

@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import {
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Dimensions
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+import PhotoView from 'react-native-photo-view'
+const { width, height } = Dimensions.get('window')
+
+var styles = {
+  wrapper: {
+    backgroundColor: '#000',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  photo: {
+    width,
+    height,
+    flex: 1
+  },
+  text: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: 'bold'
+  },
+  thumbWrap: {
+    marginTop: 100,
+    borderWidth: 5,
+    borderColor: '#000',
+    flexDirection: 'row'
+  },
+  thumb: {
+    width: 50,
+    height: 50
+  }
+}
+
+const renderPagination = (index, total, context) => {
+  return (
+    <View style={{
+      position: 'absolute',
+      justifyContent: 'center',
+      alignItems: 'center',
+      top: 25,
+      left: 0,
+      right: 0
+    }}>
+      <View style={{
+        borderRadius: 7,
+        backgroundColor: 'rgba(255,255,255,.15)',
+        padding: 3,
+        paddingHorizontal: 7
+      }}>
+        <Text style={{
+          color: '#fff',
+          fontSize: 14
+        }}>{index + 1} / {total}</Text>
+      </View>
+    </View>
+  )
+}
+
+const Viewer = props => <Swiper index={props.index} style={styles.wrapper} renderPagination={renderPagination}>
+  {
+    props.imgList.map((item, i) => <View key={i} style={styles.slide}>
+      <TouchableWithoutFeedback onPress={e => props.pressHandle()}>
+        <PhotoView
+          source={{uri: item}}
+          resizeMode='contain'
+          minimumZoomScale={0.5}
+          maximumZoomScale={3}
+          androidScaleType='center'
+          style={styles.photo} />
+      </TouchableWithoutFeedback>
+    </View>)
+  }
+</Swiper>
+
+export default class extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      imgList: [
+        'https://avatars3.githubusercontent.com/u/533360?v=3&s=466',
+        'https://assets-cdn.github.com/images/modules/site/business-hero.jpg',
+        'https://placeholdit.imgix.net/~text?txtsize=29&txt=350%C3%971150&w=350&h=1150'
+      ],
+      showViewer: true,
+      showIndex: 0
+    }
+    this.viewerPressHandle = this.viewerPressHandle.bind(this)
+    this.thumbPressHandle = this.thumbPressHandle.bind(this)
+  }
+  viewerPressHandle () {
+    this.setState({
+      showViewer: false
+    })
+  }
+  thumbPressHandle (i) {
+    this.setState({
+      showIndex: i,
+      showViewer: true
+    })
+  }
+  render () {
+    return (<View style={{position: 'relative'}}>
+      {this.state.showViewer && <Viewer
+        index={this.state.showIndex}
+        pressHandle={this.viewerPressHandle}
+        imgList={this.state.imgList} />}
+      <View style={styles.thumbWrap}>
+        {
+          this.state.imgList.map((item, i) => <TouchableOpacity key={i} onPress={e => this.thumbPressHandle(i)}>
+            <Image style={styles.thumb} source={{uri: item}} />
+          </TouchableOpacity>)
+        }
+      </View>
+    </View>)
+  }
+}

examples/components/Swiper/index.js

@@ -1,8 +1,18 @@
-import React from 'react'
-import { StyleSheet, Text, View, Image } from 'react-native'
-import Swiper from '../swiper.dist'
+import React, { Component } from 'react'
+import {
+  Text,
+  View,
+  Image,
+  Dimensions
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+const { width } = Dimensions.get('window')
+
+const styles = {
+  container: {
+    flex: 1
+  },
 
-const styles = StyleSheet.create({
   wrapper: {
   },
 
@@ -40,15 +50,16 @@ const styles = StyleSheet.create({
   },
 
   image: {
-    flex: 1,
+    width,
+    flex: 1
   }
-})
+}
 
-export default class SwiperSample extends React.Component {
-  render() {
+export default class extends Component {
+  render () {
     return (
-      <View>
-        <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay={true}>
+      <View style={styles.container}>
+        <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay>
           <View style={styles.slide1}>
             <Text style={styles.text}>Hello Swiper</Text>
           </View>
@@ -61,23 +72,23 @@ export default class SwiperSample extends React.Component {
         </Swiper>
 
         <Swiper style={styles.wrapper} height={240}
-          onMomentumScrollEnd={function(e, state, context){console.log('index:', state.index)}}
-          dot={<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 5, height: 5,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
-          activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
+          onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
+          dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
+          activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
           paginationStyle={{
-            bottom: -23, left: null, right: 10,
-          }} loop={true}>
+            bottom: -23, left: null, right: 10
+          }} loop>
           <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
-            <Image style={styles.image} source={{uri: 'http://c.hiphotos.baidu.com/image/w%3D310/sign=0dff10a81c30e924cfa49a307c096e66/7acb0a46f21fbe096194ceb468600c338644ad43.jpg'}} />
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/1.jpg')} />
           </View>
           <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
-            <Image style={styles.image} source={{uri: 'http://a.hiphotos.baidu.com/image/w%3D310/sign=4459912736a85edffa8cf822795509d8/bba1cd11728b4710417a05bbc1cec3fdfc032374.jpg'}} />
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/2.jpg')} />
           </View>
           <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
-            <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=9a8b4d497ed98d1076d40a30113eb807/0823dd54564e9258655f5d5b9e82d158ccbf4e18.jpg'}} />
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/3.jpg')} />
           </View>
           <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
-            <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=2da0245f79ec54e741ec1c1f89399bfd/9d82d158ccbf6c818c958589be3eb13533fa4034.jpg'}} />
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/4.jpg')} />
           </View>
         </Swiper>
       </View>

examples/components/SwiperNumber/index.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import {
+  Text,
+  View,
+  Image,
+  Dimensions
+} from 'react-native'
+import Swiper from 'react-native-swiper'
+const { width } = Dimensions.get('window')
+
+const styles = {
+  wrapper: {
+  },
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'transparent'
+  },
+  text: {
+    color: '#fff',
+    fontSize: 30,
+    fontWeight: 'bold'
+  },
+  image: {
+    width,
+    flex: 1
+  },
+  paginationStyle: {
+    position: 'absolute',
+    bottom: 10,
+    right: 10
+  },
+  paginationText: {
+    color: 'white',
+    fontSize: 20
+  }
+}
+
+const renderPagination = (index, total, context) => {
+  return (
+    <View style={styles.paginationStyle}>
+      <Text style={{ color: 'grey' }}>
+        <Text style={styles.paginationText}>{index + 1}</Text>/{total}
+      </Text>
+    </View>
+  )
+}
+
+export default class extends Component {
+  render () {
+    return (
+        <Swiper
+          style={styles.wrapper}
+          renderPagination={renderPagination}
+          loop={false}
+        >
+          <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
+            <Image style={styles.image} source={require('./img/1.jpg')} />
+          </View>
+          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
+            <Image style={styles.image} source={require('./img/2.jpg')} />
+          </View>
+          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
+            <Image style={styles.image} source={require('./img/3.jpg')} />
+          </View>
+          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
+            <Image style={styles.image} source={require('./img/4.jpg')} />
+          </View>
+        </Swiper>
+    )
+  }
+}

examples/index.android.js

@@ -1 +1 @@
-import './index.js'
+import './App'

examples/index.ios.js

@@ -1 +1 @@
-import './index.js'
+import './App'

examples/index.js

@@ -1,11 +0,0 @@
-'use strict'
-
-import ReactNative, { AppRegistry } from 'react-native'
-
-import Swiper from './samples/basic'
-// import Swiper from './samples/swiper'
-// import Swiper from './samples/swiper_number'
-// import Swiper from './samples/phone'
-// import Swiper from './samples/dynamic'
-
-AppRegistry.registerComponent('swiper', () => Swiper)

examples/ios/examples-tvOS/Info.plist

@@ -38,11 +38,17 @@
 	<false/>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
-  <key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
+	<key>NSAppTransportSecurity</key>
+	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
 </dict>
 </plist>

examples/ios/examples.xcodeproj/xcshareddata/xcschemes/examples-tvOS.xcscheme

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0820"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "NO"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D2A28121D9B038B00D4039D"
+               BuildableName = "libReact.a"
+               BlueprintName = "React-tvOS"
+               ReferencedContainer = "container:../node_modules/react-native/React/React.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+               BuildableName = "examples-tvOS.app"
+               BlueprintName = "examples-tvOS"
+               ReferencedContainer = "container:examples.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "NO"
+            buildForArchiving = "NO"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
+               BuildableName = "examples-tvOSTests.xctest"
+               BlueprintName = "examples-tvOSTests"
+               ReferencedContainer = "container:examples.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
+               BuildableName = "examples-tvOSTests.xctest"
+               BlueprintName = "examples-tvOSTests"
+               ReferencedContainer = "container:examples.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+            BuildableName = "examples-tvOS.app"
+            BlueprintName = "examples-tvOS"
+            ReferencedContainer = "container:examples.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+            BuildableName = "examples-tvOS.app"
+            BlueprintName = "examples-tvOS"
+            ReferencedContainer = "container:examples.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+            BuildableName = "examples-tvOS.app"
+            BlueprintName = "examples-tvOS"
+            ReferencedContainer = "container:examples.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

examples/ios/examples.xcodeproj/xcshareddata/xcschemes/examples.xcscheme

@@ -3,9 +3,23 @@
    LastUpgradeVersion = "0620"
    version = "1.3">
    <BuildAction
-      parallelizeBuildables = "YES"
+      parallelizeBuildables = "NO"
       buildImplicitDependencies = "YES">
       <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
+               BuildableName = "libReact.a"
+               BlueprintName = "React"
+               ReferencedContainer = "container:../node_modules/react-native/React/React.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
          <BuildActionEntry
             buildForTesting = "YES"
             buildForRunning = "YES"
@@ -15,9 +29,9 @@
             <BuildableReference
                BuildableIdentifier = "primary"
                BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-               BuildableName = "swiper.app"
-               BlueprintName = "swiper"
-               ReferencedContainer = "container:swiper.xcodeproj">
+               BuildableName = "examples.app"
+               BlueprintName = "examples"
+               ReferencedContainer = "container:examples.xcodeproj">
             </BuildableReference>
          </BuildActionEntry>
          <BuildActionEntry
@@ -29,27 +43,27 @@
             <BuildableReference
                BuildableIdentifier = "primary"
                BlueprintIdentifier = "00E356ED1AD99517003FC87E"
-               BuildableName = "swiperTests.xctest"
-               BlueprintName = "swiperTests"
-               ReferencedContainer = "container:swiper.xcodeproj">
+               BuildableName = "examplesTests.xctest"
+               BlueprintName = "examplesTests"
+               ReferencedContainer = "container:examples.xcodeproj">
             </BuildableReference>
          </BuildActionEntry>
       </BuildActionEntries>
    </BuildAction>
    <TestAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">
             <BuildableReference
                BuildableIdentifier = "primary"
                BlueprintIdentifier = "00E356ED1AD99517003FC87E"
-               BuildableName = "swiperTests.xctest"
-               BlueprintName = "swiperTests"
-               ReferencedContainer = "container:swiper.xcodeproj">
+               BuildableName = "examplesTests.xctest"
+               BlueprintName = "examplesTests"
+               ReferencedContainer = "container:examples.xcodeproj">
             </BuildableReference>
          </TestableReference>
       </Testables>
@@ -57,48 +71,51 @@
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "swiper.app"
-            BlueprintName = "swiper"
-            ReferencedContainer = "container:swiper.xcodeproj">
+            BuildableName = "examples.app"
+            BlueprintName = "examples"
+            ReferencedContainer = "container:examples.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
    </TestAction>
    <LaunchAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "swiper.app"
-            BlueprintName = "swiper"
-            ReferencedContainer = "container:swiper.xcodeproj">
+            BuildableName = "examples.app"
+            BlueprintName = "examples"
+            ReferencedContainer = "container:examples.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
       <AdditionalOptions>
       </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
+      buildConfiguration = "Release"
       shouldUseLaunchSchemeArgsEnv = "YES"
       savedToolIdentifier = ""
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "swiper.app"
-            BlueprintName = "swiper"
-            ReferencedContainer = "container:swiper.xcodeproj">
+            BuildableName = "examples.app"
+            BlueprintName = "examples"
+            ReferencedContainer = "container:examples.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
    </ProfileAction>

examples/ios/examples/AppDelegate.m

@@ -9,7 +9,8 @@
 
 #import "AppDelegate.h"
 
-#import "RCTRootView.h"
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTRootView.h>
 
 @implementation AppDelegate
 
@@ -17,36 +18,13 @@
 {
   NSURL *jsCodeLocation;
 
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
-  jsCodeLocation = [NSURL URLWithString:@"http://0.0.0.0:8081/index.ios.bundle?platform=ios&dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. The static bundle is automatically
-   * generated by the "Bundle React Native code and images" build step when
-   * running the project on an actual device or running the project on the
-   * simulator in the "Release" build configuration.
-   */
-
-//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"swiper"
+                                                      moduleName:@"examples"
                                                initialProperties:nil
                                                    launchOptions:launchOptions];
+  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
   UIViewController *rootViewController = [UIViewController new];

examples/ios/examples/Base.lproj/LaunchScreen.xib

@@ -18,7 +18,7 @@
                     <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                     <nil key="highlightedColor"/>
                 </label>
-                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="swiper" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="examples" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                     <rect key="frame" x="20" y="140" width="441" height="43"/>
                     <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
                     <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>

examples/ios/examples/Info.plist

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>examples</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>NSAppTransportSecurity</key>
+	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+</dict>
+</plist>

examples/ios/examplesTests/Info.plist

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

examples/ios/examplesTests/examplesTests.m

@@ -10,17 +10,17 @@
 #import <UIKit/UIKit.h>
 #import <XCTest/XCTest.h>
 
-#import "RCTLog.h"
-#import "RCTRootView.h"
+#import <React/RCTLog.h>
+#import <React/RCTRootView.h>
 
 #define TIMEOUT_SECONDS 600
 #define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
 
-@interface swiperTests : XCTestCase
+@interface examplesTests : XCTestCase
 
 @end
 
-@implementation swiperTests
+@implementation examplesTests
 
 - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
 {
@@ -37,7 +37,7 @@
 
 - (void)testRendersWelcomeScreen
 {
-  UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
+  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
   NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
   BOOL foundElement = NO;
 

examples/ios/swiper.xcodeproj/project.pbxproj

@@ -1,761 +0,0 @@
-// !$*UTF8*$!
-{
-	archiveVersion = 1;
-	classes = {
-	};
-	objectVersion = 46;
-	objects = {
-
-/* Begin PBXBuildFile section */
-		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
-		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
-		00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };
-		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
-		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
-		00E356F31AD99517003FC87E /* swiperTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* swiperTests.m */; };
-		133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };
-		139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; };
-		139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
-		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
-		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
-		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
-		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
-/* End PBXBuildFile section */
-
-/* Begin PBXContainerItemProxy section */
-		00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTActionSheet;
-		};
-		00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTGeolocation;
-		};
-		00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
-			remoteInfo = RCTImage;
-		};
-		00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
-		00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 832C81801AAF6DEF007FA2F7;
-			remoteInfo = RCTVibration;
-		};
-		00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
-			remoteInfo = swiper;
-		};
-		139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTSettings;
-		};
-		139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
-			remoteInfo = RCTWebSocket;
-		};
-		146834031AC3E56700842450 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
-			remoteInfo = React;
-		};
-		78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTLinking;
-		};
-		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
-			remoteInfo = RCTText;
-		};
-/* End PBXContainerItemProxy section */
-
-/* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = main.jsbundle; sourceTree = "<group>"; };
-		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
-		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
-		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
-		00E356EE1AD99517003FC87E /* swiperTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = swiperTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
-		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		00E356F21AD99517003FC87E /* swiperTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = swiperTests.m; sourceTree = "<group>"; };
-		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
-		13B07F961A680F5B00A75B9A /* swiper.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = swiper.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = swiper/AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = swiper/AppDelegate.m; sourceTree = "<group>"; };
-		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
-		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = swiper/Images.xcassets; sourceTree = "<group>"; };
-		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = swiper/Info.plist; sourceTree = "<group>"; };
-		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = swiper/main.m; sourceTree = "<group>"; };
-		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../node_modules/react-native/React/React.xcodeproj; sourceTree = "<group>"; };
-		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
-		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../node_modules/react-native/Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
-/* End PBXFileReference section */
-
-/* Begin PBXFrameworksBuildPhase section */
-		00E356EB1AD99517003FC87E /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				146834051AC3E58100842450 /* libReact.a in Frameworks */,
-				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
-				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
-				00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,
-				133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,
-				00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */,
-				139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */,
-				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
-				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
-				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXFrameworksBuildPhase section */
-
-/* Begin PBXGroup section */
-		00C302A81ABCB8CE00DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302B61ABCB90400DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302BC1ABCB91800DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302C01ABCB91800DB3ED1 /* libRCTImage.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302D41ABCB9D200DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00C302E01ABCB9EE00DB3ED1 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		00E356EF1AD99517003FC87E /* swiperTests */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F21AD99517003FC87E /* swiperTests.m */,
-				00E356F01AD99517003FC87E /* Supporting Files */,
-			);
-			path = swiperTests;
-			sourceTree = "<group>";
-		};
-		00E356F01AD99517003FC87E /* Supporting Files */ = {
-			isa = PBXGroup;
-			children = (
-				00E356F11AD99517003FC87E /* Info.plist */,
-			);
-			name = "Supporting Files";
-			sourceTree = "<group>";
-		};
-		139105B71AF99BAD00B5F7CC /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				139105C11AF99BAD00B5F7CC /* libRCTSettings.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		139FDEE71B06529A00C62182 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				139FDEF41B06529B00C62182 /* libRCTWebSocket.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		13B07FAE1A68108700A75B9A /* swiper */ = {
-			isa = PBXGroup;
-			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
-				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
-				13B07FB01A68108700A75B9A /* AppDelegate.m */,
-				13B07FB51A68108700A75B9A /* Images.xcassets */,
-				13B07FB61A68108700A75B9A /* Info.plist */,
-				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
-				13B07FB71A68108700A75B9A /* main.m */,
-			);
-			name = swiper;
-			sourceTree = "<group>";
-		};
-		146834001AC3E56700842450 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				146834041AC3E56700842450 /* libReact.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		78C398B11ACF4ADC00677621 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				78C398B91ACF4ADC00677621 /* libRCTLinking.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
-			isa = PBXGroup;
-			children = (
-				146833FF1AC3E56700842450 /* React.xcodeproj */,
-				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
-				00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
-				00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
-				78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
-				00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,
-				139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,
-				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
-				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
-				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
-			);
-			name = Libraries;
-			sourceTree = "<group>";
-		};
-		832341B11AAA6A8300B99B32 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				832341B51AAA6A8300B99B32 /* libRCTText.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		83CBB9F61A601CBA00E9B192 = {
-			isa = PBXGroup;
-			children = (
-				13B07FAE1A68108700A75B9A /* swiper */,
-				832341AE1AAA6A7D00B99B32 /* Libraries */,
-				00E356EF1AD99517003FC87E /* swiperTests */,
-				83CBBA001A601CBA00E9B192 /* Products */,
-			);
-			indentWidth = 2;
-			sourceTree = "<group>";
-			tabWidth = 2;
-		};
-		83CBBA001A601CBA00E9B192 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				13B07F961A680F5B00A75B9A /* swiper.app */,
-				00E356EE1AD99517003FC87E /* swiperTests.xctest */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-/* End PBXGroup section */
-
-/* Begin PBXNativeTarget section */
-		00E356ED1AD99517003FC87E /* swiperTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "swiperTests" */;
-			buildPhases = (
-				00E356EA1AD99517003FC87E /* Sources */,
-				00E356EB1AD99517003FC87E /* Frameworks */,
-				00E356EC1AD99517003FC87E /* Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				00E356F51AD99517003FC87E /* PBXTargetDependency */,
-			);
-			name = swiperTests;
-			productName = swiperTests;
-			productReference = 00E356EE1AD99517003FC87E /* swiperTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
-		13B07F861A680F5B00A75B9A /* swiper */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "swiper" */;
-			buildPhases = (
-				13B07F871A680F5B00A75B9A /* Sources */,
-				13B07F8C1A680F5B00A75B9A /* Frameworks */,
-				13B07F8E1A680F5B00A75B9A /* Resources */,
-				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = swiper;
-			productName = "Hello World";
-			productReference = 13B07F961A680F5B00A75B9A /* swiper.app */;
-			productType = "com.apple.product-type.application";
-		};
-/* End PBXNativeTarget section */
-
-/* Begin PBXProject section */
-		83CBB9F71A601CBA00E9B192 /* Project object */ = {
-			isa = PBXProject;
-			attributes = {
-				LastUpgradeCheck = 0610;
-				ORGANIZATIONNAME = Facebook;
-				TargetAttributes = {
-					00E356ED1AD99517003FC87E = {
-						CreatedOnToolsVersion = 6.2;
-						TestTargetID = 13B07F861A680F5B00A75B9A;
-					};
-				};
-			};
-			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "swiper" */;
-			compatibilityVersion = "Xcode 3.2";
-			developmentRegion = English;
-			hasScannedForEncodings = 0;
-			knownRegions = (
-				en,
-				Base,
-			);
-			mainGroup = 83CBB9F61A601CBA00E9B192;
-			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
-			projectDirPath = "";
-			projectReferences = (
-				{
-					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
-					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
-					ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */;
-					ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
-				},
-				{
-					ProductGroup = 78C398B11ACF4ADC00677621 /* Products */;
-					ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;
-					ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
-				},
-				{
-					ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */;
-					ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
-				},
-				{
-					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
-					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
-				},
-				{
-					ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */;
-					ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
-				},
-				{
-					ProductGroup = 139FDEE71B06529A00C62182 /* Products */;
-					ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
-				},
-				{
-					ProductGroup = 146834001AC3E56700842450 /* Products */;
-					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
-				},
-			);
-			projectRoot = "";
-			targets = (
-				13B07F861A680F5B00A75B9A /* swiper */,
-				00E356ED1AD99517003FC87E /* swiperTests */,
-			);
-		};
-/* End PBXProject section */
-
-/* Begin PBXReferenceProxy section */
-		00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTActionSheet.a;
-			remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTGeolocation.a;
-			remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTImage.a;
-			remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTVibration.a;
-			remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTSettings.a;
-			remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTWebSocket.a;
-			remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		146834041AC3E56700842450 /* libReact.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libReact.a;
-			remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTLinking.a;
-			remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTText.a;
-			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-/* End PBXReferenceProxy section */
-
-/* Begin PBXResourcesBuildPhase section */
-		00E356EC1AD99517003FC87E /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F8E1A680F5B00A75B9A /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
-				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXResourcesBuildPhase section */
-
-/* Begin PBXShellScriptBuildPhase section */
-		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Bundle React Native code and images";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
-			showEnvVarsInLog = 1;
-		};
-/* End PBXShellScriptBuildPhase section */
-
-/* Begin PBXSourcesBuildPhase section */
-		00E356EA1AD99517003FC87E /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				00E356F31AD99517003FC87E /* swiperTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		13B07F871A680F5B00A75B9A /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
-				13B07FC11A68108700A75B9A /* main.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXSourcesBuildPhase section */
-
-/* Begin PBXTargetDependency section */
-		00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 13B07F861A680F5B00A75B9A /* swiper */;
-			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
-		};
-/* End PBXTargetDependency section */
-
-/* Begin PBXVariantGroup section */
-		13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
-			isa = PBXVariantGroup;
-			children = (
-				13B07FB21A68108700A75B9A /* Base */,
-			);
-			name = LaunchScreen.xib;
-			path = swiper;
-			sourceTree = "<group>";
-		};
-/* End PBXVariantGroup section */
-
-/* Begin XCBuildConfiguration section */
-		00E356F61AD99517003FC87E /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				INFOPLIST_FILE = swiperTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/swiper.app/swiper";
-			};
-			name = Debug;
-		};
-		00E356F71AD99517003FC87E /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				COPY_PHASE_STRIP = NO;
-				INFOPLIST_FILE = swiperTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/swiper.app/swiper";
-			};
-			name = Release;
-		};
-		13B07F941A680F5B00A75B9A /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				DEAD_CODE_STRIPPING = NO;
-				HEADER_SEARCH_PATHS = (
-					"$(inherited)",
-					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../node_modules/react-native/React/**",
-				);
-				INFOPLIST_FILE = "swiper/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-        OTHER_LDFLAGS = (
-          "-ObjC",
-          "-lc++",
-        );
-				PRODUCT_NAME = swiper;
-			};
-			name = Debug;
-		};
-		13B07F951A680F5B00A75B9A /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				HEADER_SEARCH_PATHS = (
-					"$(inherited)",
-					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../node_modules/react-native/React/**",
-				);
-				INFOPLIST_FILE = "swiper/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-        OTHER_LDFLAGS = (
-          "-ObjC",
-          "-lc++",
-        );
-				PRODUCT_NAME = swiper;
-			};
-			name = Release;
-		};
-		83CBBA201A601CBA00E9B192 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				COPY_PHASE_STRIP = NO;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu99;
-				GCC_DYNAMIC_NO_PIC = NO;
-				GCC_OPTIMIZATION_LEVEL = 0;
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				HEADER_SEARCH_PATHS = (
-					"$(inherited)",
-					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../node_modules/react-native/React/**",
-				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
-				MTL_ENABLE_DEBUG_INFO = YES;
-				ONLY_ACTIVE_ARCH = YES;
-				SDKROOT = iphoneos;
-			};
-			name = Debug;
-		};
-		83CBBA211A601CBA00E9B192 /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
-				COPY_PHASE_STRIP = YES;
-				ENABLE_NS_ASSERTIONS = NO;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu99;
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				HEADER_SEARCH_PATHS = (
-					"$(inherited)",
-					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../node_modules/react-native/React/**",
-				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
-				MTL_ENABLE_DEBUG_INFO = NO;
-				SDKROOT = iphoneos;
-				VALIDATE_PRODUCT = YES;
-			};
-			name = Release;
-		};
-/* End XCBuildConfiguration section */
-
-/* Begin XCConfigurationList section */
-		00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "swiperTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				00E356F61AD99517003FC87E /* Debug */,
-				00E356F71AD99517003FC87E /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "swiper" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				13B07F941A680F5B00A75B9A /* Debug */,
-				13B07F951A680F5B00A75B9A /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "swiper" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				83CBBA201A601CBA00E9B192 /* Debug */,
-				83CBBA211A601CBA00E9B192 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-/* End XCConfigurationList section */
-	};
-	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
-}

examples/package.json

@@ -1,16 +1,31 @@
 {
-  "name": "swiper",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "react-native start"
-  },
-  "dependencies": {
-    "react": "^15.0.2",
-    "react-native": "^0.26.0",
-    "react-timer-mixin": "^0.13.3"
-  },
-  "devDependencies": {
-    "rnpm-plugin-upgrade": "^0.26.0"
-  }
+	"name": "examples",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"start": "node node_modules/react-native/local-cli/cli.js start",
+		"watch": "node ./scripts/watch-and-copy-src.js",
+		"packager": "sh ./node_modules/react-native/packager/packager.sh --root ./node_modules/react-native-swiper",
+		"dev": "concurrently 'npm run watch' 'npm run packager'",
+		"test": "jest"
+	},
+	"dependencies": {
+		"react": "16.0.0-alpha.12",
+		"react-native": "0.48.4",
+		"react-native-swiper": "../"
+	},
+	"devDependencies": {
+		"babel-jest": "20.0.3",
+		"babel-preset-react-native": "2.1.0",
+		"concurrently": "^2.2.0",
+		"fs-extra": "^0.30.0",
+		"jest": "20.0.4",
+		"minimatch": "^3.0.2",
+		"node-watch": "^0.4.0",
+		"react-test-renderer": "16.0.0-alpha.12",
+		"rimraf": "^2.5.4"
+	},
+	"jest": {
+		"preset": "react-native"
+	}
 }

examples/samples/basic.js

@@ -1,60 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import Swiper from '../swiper.dist'
-
-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 BasicSample extends React.Component {
-  _onMomentumScrollEnd(e, state, context) {
-    // you can get `state` and `this`(ref to swiper's context) from params
-    console.log(state, context.state)
-  }
-
-  render() {
-    return (
-      <Swiper style={styles.wrapper}
-      onMomentumScrollEnd={this._onMomentumScrollEnd}
-      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>
-    )
-  }
-}

examples/samples/phone.js

@@ -1,46 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View, Image } from 'react-native'
-import Swiper from '../swiper.dist'
-
-const styles = StyleSheet.create({
-  wrapper: {
-    // backgroundColor: '#f00'
-  },
-
-  slide: {
-    flex: 1,
-    backgroundColor: 'transparent'
-  },
-
-  image: {
-    flex: 1
-  }
-})
-
-export default class PhoneSample extends React.Component {
-  render() {
-    return (
-      <View>
-        <Image source={{uri: 'http://i.imgur.com/rVekwfn.jpg'}}>
-          <Swiper style={styles.wrapper}
-            dot={<View style={{backgroundColor:'rgba(255,255,255,.3)', width: 13, height: 13,borderRadius: 7, marginLeft: 7, marginRight: 7,}} />}
-            activeDot={<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}
-            paginationStyle={{
-              bottom: 70,
-            }}
-            loop={false}>
-            <View style={styles.slide}>
-              <Image style={styles.image} source={{uri: 'http://i.imgur.com/u3kXqo7.png'}} />
-            </View>
-            <View style={styles.slide}>
-              <Image style={styles.image} source={{uri: 'http://i.imgur.com/3Z4nQyb.png'}} />
-            </View>
-            <View style={styles.slide}>
-              <Image style={styles.image} source={{uri: 'http://i.imgur.com/5Wa3Iyb.png'}} />
-            </View>
-          </Swiper>
-        </Image>
-      </View>
-    )
-  }
-}

examples/samples/swiper_number.js

@@ -1,68 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View, Image } from 'react-native'
-import Swiper from '../swiper.dist'
-
-const styles = StyleSheet.create({
-  wrapper: {
-  },
-
-  slide: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'transparent'
-  },
-
-  text: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: 'bold'
-  },
-
-  image: {
-    flex: 1
-  }
-})
-
-const renderPagination = (index, total, context) => {
-  return (
-    <View style={{
-      position: 'absolute',
-      bottom: -25,
-      right: 10
-    }}>
-      <Text>
-        <Text style={{
-          color: '#007aff',
-          fontSize: 20
-        }}>{index + 1}</Text>/{total}
-      </Text>
-    </View>
-  )
-}
-
-export default class NumberSample extends React.Component {
-  render() {
-    return (
-      <View>
-        <Swiper style={styles.wrapper} height={240}
-          renderPagination={renderPagination}
-          paginationStyle={{
-            bottom: -23, left: null, right: 10,
-          }} loop={false}>
-          <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
-            <Image style={styles.image} source={{uri: 'http://c.hiphotos.baidu.com/image/w%3D310/sign=0dff10a81c30e924cfa49a307c096e66/7acb0a46f21fbe096194ceb468600c338644ad43.jpg'}} />
-          </View>
-          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
-            <Image style={styles.image} source={{uri: 'http://a.hiphotos.baidu.com/image/w%3D310/sign=4459912736a85edffa8cf822795509d8/bba1cd11728b4710417a05bbc1cec3fdfc032374.jpg'}} />
-          </View>
-          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
-            <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=9a8b4d497ed98d1076d40a30113eb807/0823dd54564e9258655f5d5b9e82d158ccbf4e18.jpg'}} />
-          </View>
-          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
-            <Image style={styles.image} source={{uri: 'http://e.hiphotos.baidu.com/image/w%3D310/sign=2da0245f79ec54e741ec1c1f89399bfd/9d82d158ccbf6c818c958589be3eb13533fa4034.jpg'}} />
-          </View>
-        </Swiper>
-      </View>
-    )
-  }
-}

examples/scripts/watch-and-copy-src.js

@@ -0,0 +1,37 @@
+const path = require('path')
+const fs = require('fs-extra')
+const watch = require('node-watch')
+const rimraf = require('rimraf')
+const minimatch = require('minimatch')
+
+function copyAndWatch (source, destination, fileGlob) {
+  console.log(`Cleaning "${destination}"`)
+  rimraf(destination, () => {
+    console.log(`Copying "${source}" to "${destination}"`)
+    fs.copy(source, destination, (err) => {
+      if (err) console.error(err)
+    })
+
+    console.log(`Watching "${source}"`)
+    watch(source, (filename) => {
+      const localPath = filename.split(source).pop()
+      if (matchesFile(localPath, fileGlob)) {
+        const destinationPath = `${destination}${localPath}`
+        console.log(`Copying "${filename}" to "${destinationPath}"`)
+        fs.copy(filename, destinationPath, (err) => {
+          if (err) console.error(err)
+        })
+      }
+    })
+  })
+}
+
+function matchesFile (filename, fileGlob) {
+  if (fileGlob == null) return true
+  return minimatch(path.basename(filename), fileGlob)
+}
+
+copyAndWatch(
+  '../src',
+  'node_modules/react-native-swiper/src'
+)

examples/swiper.dist.js

@@ -1,613 +0,0 @@
-'use strict';
-
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
-                                                                                                                                                                                                                                                                   * react-native-swiper
-                                                                                                                                                                                                                                                                   * @author leecade<leecade@163.com>
-                                                                                                                                                                                                                                                                   */
-
-
-// Using bare setTimeout, setInterval, setImmediate
-// and requestAnimationFrame calls is very dangerous
-// because if you forget to cancel the request before
-// the component is unmounted, you risk the callback
-// throwing an exception.
-
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactNative = require('react-native');
-
-var _reactNative2 = _interopRequireDefault(_reactNative);
-
-var _reactTimerMixin = require('react-timer-mixin');
-
-var _reactTimerMixin2 = _interopRequireDefault(_reactTimerMixin);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _Dimensions$get = _reactNative.Dimensions.get('window');
-
-var width = _Dimensions$get.width;
-var height = _Dimensions$get.height;
-
-/**
- * Default styles
- * @type {StyleSheetPropType}
- */
-
-var styles = _reactNative.StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    position: 'relative'
-  },
-
-  wrapper: {
-    backgroundColor: 'transparent'
-  },
-
-  slide: {
-    backgroundColor: 'transparent'
-  },
-
-  pagination_x: {
-    position: 'absolute',
-    bottom: 25,
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent'
-  },
-
-  pagination_y: {
-    position: 'absolute',
-    right: 15,
-    top: 0,
-    bottom: 0,
-    flexDirection: 'column',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'transparent'
-  },
-
-  title: {
-    height: 30,
-    justifyContent: 'center',
-    position: 'absolute',
-    paddingLeft: 10,
-    bottom: -30,
-    left: 0,
-    flexWrap: 'nowrap',
-    width: 250,
-    backgroundColor: 'transparent'
-  },
-
-  buttonWrapper: {
-    backgroundColor: 'transparent',
-    flexDirection: 'row',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    flex: 1,
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-
-  buttonText: {
-    fontSize: 50,
-    color: '#007aff',
-    fontFamily: 'Arial'
-  }
-});
-
-// missing `module.exports = exports['default'];` with babel6
-// export default React.createClass({
-module.exports = _react2.default.createClass({
-  displayName: 'exports',
-
-
-  /**
-   * Props Validation
-   * @type {Object}
-   */
-  propTypes: {
-    horizontal: _react2.default.PropTypes.bool,
-    children: _react2.default.PropTypes.node.isRequired,
-    style: _reactNative.View.propTypes.style,
-    pagingEnabled: _react2.default.PropTypes.bool,
-    showsHorizontalScrollIndicator: _react2.default.PropTypes.bool,
-    showsVerticalScrollIndicator: _react2.default.PropTypes.bool,
-    bounces: _react2.default.PropTypes.bool,
-    scrollsToTop: _react2.default.PropTypes.bool,
-    removeClippedSubviews: _react2.default.PropTypes.bool,
-    automaticallyAdjustContentInsets: _react2.default.PropTypes.bool,
-    showsPagination: _react2.default.PropTypes.bool,
-    showsButtons: _react2.default.PropTypes.bool,
-    loop: _react2.default.PropTypes.bool,
-    autoplay: _react2.default.PropTypes.bool,
-    autoplayTimeout: _react2.default.PropTypes.number,
-    autoplayDirection: _react2.default.PropTypes.bool,
-    index: _react2.default.PropTypes.number,
-    renderPagination: _react2.default.PropTypes.func
-  },
-
-  mixins: [_reactTimerMixin2.default],
-
-  /**
-   * Default props
-   * @return {object} props
-   * @see http://facebook.github.io/react-native/docs/scrollview.html
-   */
-  getDefaultProps: function getDefaultProps() {
-    return {
-      horizontal: true,
-      pagingEnabled: true,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-      bounces: false,
-      scrollsToTop: false,
-      removeClippedSubviews: true,
-      automaticallyAdjustContentInsets: false,
-      showsPagination: true,
-      showsButtons: false,
-      loop: true,
-      autoplay: false,
-      autoplayTimeout: 2.5,
-      autoplayDirection: true,
-      index: 0
-    };
-  },
-
-
-  /**
-   * Init states
-   * @return {object} states
-   */
-  getInitialState: function getInitialState() {
-    return this.initState(this.props);
-  },
-
-
-  /**
-   * autoplay timer
-   * @type {null}
-   */
-  autoplayTimer: null,
-
-  componentWillReceiveProps: function componentWillReceiveProps(props) {
-    this.setState(this.initState(props));
-  },
-  componentDidMount: function componentDidMount() {
-    this.autoplay();
-  },
-  initState: function initState(props) {
-    // set the current state
-    var state = this.state || {};
-
-    var initState = {
-      isScrolling: false,
-      autoplayEnd: false
-    };
-
-    initState.total = props.children ? props.children.length || 1 : 0;
-
-    if (state.total === initState.total) {
-      // retain the index
-      initState.index = state.index;
-    } else {
-      // reset the index
-      initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0;
-    }
-
-    // Default: horizontal
-    initState.dir = props.horizontal === false ? 'y' : 'x';
-    initState.width = props.width || width;
-    initState.height = props.height || height;
-    initState.offset = {};
-
-    if (initState.total > 1) {
-      var setup = initState.index;
-      if (props.loop) {
-        setup++;
-      }
-      initState.offset[initState.dir] = initState.dir === 'y' ? initState.height * setup : initState.width * setup;
-    }
-    return initState;
-  },
-
-
-  /**
-   * Automatic rolling
-   */
-  autoplay: function autoplay() {
-    var _this = this;
-
-    if (!Array.isArray(this.props.children) || !this.props.autoplay || this.state.isScrolling || this.state.autoplayEnd) {
-      return;
-    }
-
-    clearTimeout(this.autoplayTimer);
-
-    this.autoplayTimer = this.setTimeout(function () {
-      if (!_this.props.loop && (_this.props.autoplayDirection ? _this.state.index === _this.state.total - 1 : _this.state.index === 0)) {
-        return _this.setState({ autoplayEnd: true });
-      }
-
-      _this.scrollBy(_this.props.autoplayDirection ? 1 : -1);
-    }, this.props.autoplayTimeout * 1000);
-  },
-
-
-  /**
-   * Scroll begin handle
-   * @param  {object} e native event
-   */
-  onScrollBegin: function onScrollBegin(e) {
-    var _this2 = this;
-
-    // update scroll state
-    this.setState({ isScrolling: true });
-
-    this.setTimeout(function () {
-      _this2.props.onScrollBeginDrag && _this2.props.onScrollBeginDrag(e, _this2.state, _this2);
-    });
-  },
-
-
-  /**
-   * Scroll end handle
-   * @param  {object} e native event
-   */
-  onScrollEnd: function onScrollEnd(e) {
-    var _this3 = this;
-
-    // update scroll state
-    this.setState({
-      isScrolling: false
-    });
-
-    // making our events coming from android compatible to updateIndex logic
-    if (!e.nativeEvent.contentOffset) {
-      if (this.state.dir === 'x') {
-        e.nativeEvent.contentOffset = { x: e.nativeEvent.position * this.state.width };
-      } else {
-        e.nativeEvent.contentOffset = { y: e.nativeEvent.position * this.state.height };
-      }
-    }
-
-    this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);
-
-    // Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
-    // in setTimeout to ensure synchronous update `index`
-    this.setTimeout(function () {
-      _this3.autoplay();
-
-      // if `onMomentumScrollEnd` registered will be called here
-      _this3.props.onMomentumScrollEnd && _this3.props.onMomentumScrollEnd(e, _this3.state, _this3);
-    });
-  },
-
-
-  /*
-   * Drag end handle
-   * @param {object} e native event
-   */
-  onScrollEndDrag: function onScrollEndDrag(e) {
-    var contentOffset = e.nativeEvent.contentOffset;
-    var _props = this.props;
-    var horizontal = _props.horizontal;
-    var children = _props.children;
-    var _state = this.state;
-    var offset = _state.offset;
-    var index = _state.index;
-
-    var previousOffset = horizontal ? offset.x : offset.y;
-    var newOffset = horizontal ? contentOffset.x : contentOffset.y;
-
-    if (previousOffset === newOffset && (index === 0 || index === children.length - 1)) {
-      this.setState({
-        isScrolling: false
-      });
-    }
-  },
-
-
-  /**
-   * Update index after scroll
-   * @param  {object} offset content offset
-   * @param  {string} dir    'x' || 'y'
-   */
-  updateIndex: function updateIndex(offset, dir) {
-
-    var state = this.state;
-    var index = state.index;
-    var diff = offset[dir] - state.offset[dir];
-    var step = dir === 'x' ? state.width : state.height;
-
-    // Do nothing if offset no change.
-    if (!diff) return;
-
-    // Note: if touch very very quickly and continuous,
-    // the variation of `index` more than 1.
-    // parseInt() ensures it's always an integer
-    index = parseInt(index + Math.round(diff / step));
-
-    if (this.props.loop) {
-      if (index <= -1) {
-        index = state.total - 1;
-        offset[dir] = step * state.total;
-      } else if (index >= state.total) {
-        index = 0;
-        offset[dir] = step;
-      }
-    }
-
-    this.setState({
-      index: index,
-      offset: offset
-    });
-  },
-
-
-  /**
-   * Scroll by index
-   * @param  {number} index offset index
-   */
-  scrollBy: function scrollBy(index) {
-    var _this4 = this;
-
-    if (this.state.isScrolling || this.state.total < 2) return;
-    var state = this.state;
-    var diff = (this.props.loop ? 1 : 0) + index + this.state.index;
-    var x = 0;
-    var y = 0;
-    if (state.dir === 'x') x = diff * state.width;
-    if (state.dir === 'y') y = diff * state.height;
-
-    if (_reactNative.Platform.OS === 'android') {
-      this.refs.scrollView && this.refs.scrollView.setPage(diff);
-    } else {
-      this.refs.scrollView && this.refs.scrollView.scrollTo({ x: x, y: y });
-    }
-
-    // update scroll state
-    this.setState({
-      isScrolling: true,
-      autoplayEnd: false
-    });
-
-    // trigger onScrollEnd manually in android
-    if (_reactNative.Platform.OS === 'android') {
-      this.setTimeout(function () {
-        _this4.onScrollEnd({
-          nativeEvent: {
-            position: diff
-          }
-        });
-      }, 50);
-    }
-  },
-  scrollViewPropOverrides: function scrollViewPropOverrides() {
-    var _this5 = this;
-
-    var props = this.props;
-    var overrides = {};
-
-    /*
-    const scrollResponders = [
-      'onMomentumScrollBegin',
-      'onTouchStartCapture',
-      'onTouchStart',
-      'onTouchEnd',
-      'onResponderRelease',
-    ]
-    */
-
-    for (var prop in props) {
-      // if(~scrollResponders.indexOf(prop)
-      if (typeof props[prop] === 'function' && prop !== 'onMomentumScrollEnd' && prop !== 'renderPagination' && prop !== 'onScrollBeginDrag') {
-        (function () {
-          var originResponder = props[prop];
-          overrides[prop] = function (e) {
-            return originResponder(e, _this5.state, _this5);
-          };
-        })();
-      }
-    }
-
-    return overrides;
-  },
-
-
-  /**
-   * Render pagination
-   * @return {object} react-dom
-   */
-  renderPagination: function renderPagination() {
-
-    // By default, dots only show when `total` > 2
-    if (this.state.total <= 1) return null;
-
-    var dots = [];
-    var ActiveDot = this.props.activeDot || _react2.default.createElement(_reactNative.View, { style: {
-        backgroundColor: '#007aff',
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginLeft: 3,
-        marginRight: 3,
-        marginTop: 3,
-        marginBottom: 3
-      } });
-    var Dot = this.props.dot || _react2.default.createElement(_reactNative.View, { style: {
-        backgroundColor: 'rgba(0,0,0,.2)',
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        marginLeft: 3,
-        marginRight: 3,
-        marginTop: 3,
-        marginBottom: 3
-      } });
-    for (var i = 0; i < this.state.total; i++) {
-      dots.push(i === this.state.index ? _react2.default.cloneElement(ActiveDot, { key: i }) : _react2.default.cloneElement(Dot, { key: i }));
-    }
-
-    return _react2.default.createElement(
-      _reactNative.View,
-      { pointerEvents: 'none', style: [styles['pagination_' + this.state.dir], this.props.paginationStyle] },
-      dots
-    );
-  },
-  renderTitle: function renderTitle() {
-    var child = this.props.children[this.state.index];
-    var title = child && child.props.title;
-    return title ? _react2.default.createElement(
-      _reactNative.View,
-      { style: styles.title },
-      this.props.children[this.state.index].props.title
-    ) : null;
-  },
-  renderNextButton: function renderNextButton() {
-    var _this6 = this;
-
-    var button = void 0;
-
-    if (this.props.loop || this.state.index != this.state.total - 1) {
-      button = this.props.nextButton || _react2.default.createElement(
-        _reactNative.Text,
-        { style: styles.buttonText },
-        '›'
-      );
-    }
-
-    return _react2.default.createElement(
-      _reactNative.TouchableOpacity,
-      { onPress: function onPress() {
-          return button !== null && _this6.scrollBy.call(_this6, 1);
-        } },
-      _react2.default.createElement(
-        _reactNative.View,
-        null,
-        button
-      )
-    );
-  },
-  renderPrevButton: function renderPrevButton() {
-    var _this7 = this;
-
-    var button = null;
-
-    if (this.props.loop || this.state.index != 0) {
-      button = this.props.prevButton || _react2.default.createElement(
-        _reactNative.Text,
-        { style: styles.buttonText },
-        '‹'
-      );
-    }
-
-    return _react2.default.createElement(
-      _reactNative.TouchableOpacity,
-      { onPress: function onPress() {
-          return button !== null && _this7.scrollBy.call(_this7, -1);
-        } },
-      _react2.default.createElement(
-        _reactNative.View,
-        null,
-        button
-      )
-    );
-  },
-  renderButtons: function renderButtons() {
-    return _react2.default.createElement(
-      _reactNative.View,
-      { pointerEvents: 'box-none', style: [styles.buttonWrapper, { width: this.state.width, height: this.state.height }, this.props.buttonWrapperStyle] },
-      this.renderPrevButton(),
-      this.renderNextButton()
-    );
-  },
-  renderScrollView: function renderScrollView(pages) {
-    if (_reactNative.Platform.OS === 'ios') return _react2.default.createElement(
-      _reactNative.ScrollView,
-      _extends({ ref: 'scrollView'
-      }, this.props, this.scrollViewPropOverrides(), {
-        contentContainerStyle: [styles.wrapper, this.props.style],
-        contentOffset: this.state.offset,
-        onScrollBeginDrag: this.onScrollBegin,
-        onMomentumScrollEnd: this.onScrollEnd,
-        onScrollEndDrag: this.onScrollEndDrag }),
-      pages
-    );
-    return _react2.default.createElement(
-      _reactNative.ViewPagerAndroid,
-      _extends({ ref: 'scrollView'
-      }, this.props, {
-        initialPage: this.props.loop ? this.state.index + 1 : this.state.index,
-        onPageSelected: this.onScrollEnd,
-        style: { flex: 1 } }),
-      pages
-    );
-  },
-
-
-  /**
-   * Default render
-   * @return {object} react-dom
-   */
-  render: function render() {
-    var state = this.state;
-    var props = this.props;
-    var children = props.children;
-    var index = state.index;
-    var total = state.total;
-    var loop = props.loop;
-    var dir = state.dir;
-    var key = 0;
-
-    var pages = [];
-    var pageStyle = [{ width: state.width, height: state.height }, styles.slide];
-
-    // For make infinite at least total > 1
-    if (total > 1) {
-
-      // Re-design a loop model for avoid img flickering
-      pages = Object.keys(children);
-      if (loop) {
-        pages.unshift(total - 1);
-        pages.push(0);
-      }
-
-      pages = pages.map(function (page, i) {
-        return _react2.default.createElement(
-          _reactNative.View,
-          { style: pageStyle, key: i },
-          children[page]
-        );
-      });
-    } else pages = _react2.default.createElement(
-      _reactNative.View,
-      { style: pageStyle },
-      children
-    );
-
-    return _react2.default.createElement(
-      _reactNative.View,
-      { style: [styles.container, {
-          width: state.width,
-          height: state.height
-        }] },
-      this.renderScrollView(pages),
-      props.showsPagination && (props.renderPagination ? this.props.renderPagination(state.index, state.total, this) : this.renderPagination()),
-      this.renderTitle(),
-      this.props.showsButtons && this.renderButtons()
-    );
-  }
-});

index.d.ts

@@ -0,0 +1,106 @@
+declare module 'react-native-swiper' {
+    import { ViewStyle } from 'react-native'
+    import { Component } from 'react'
+
+    interface SwiperProps {
+        // Basic
+        // If true, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
+        horizontal?: boolean
+        // If no specify default enable fullscreen mode by flex: 1.
+        loop?: boolean
+        // Index number of initial slide.
+        index?: number
+        // Set to true make control buttons visible.
+        showsButtons?: boolean
+        // Set to false to disable continuous loop mode.
+        autoplay?: boolean
+        // Called with the new index when the user swiped
+        onIndexChanged?: any
+
+        // Custom basic style & content
+        // Set to true enable auto play mode.
+        width?: number
+        // If no specify default fullscreen mode by flex: 1.
+        height?: number
+        // See default style in source.
+        style?: ViewStyle
+        // Only load current index slide , loadMinimalSize slides before and after.
+        loadMinimal?: boolean
+        // see loadMinimal
+        loadMinimalSize?: boolean
+        // Custom loader to display when slides aren't loaded
+        loadMinimalLoader?: boolean
+
+        // Pagination
+        // Set to true make pagination visible.
+        showsPagination?: boolean
+        // Custom styles will merge with the default styles.
+        paginationStyle?: ViewStyle
+        // Complete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots.
+        renderPagination?: (index: number, total: number, swiper: Swiper) => JSX.Element
+        // Allow custom the dot element.
+        dot?: any
+        // Allow custom the active-dot element.
+        activeDot?: any
+        // Allow custom the active-dot element.
+        dotStyle?: ViewStyle
+        // Allow custom the active-dot element.
+        dotColor?: string
+        // Allow custom the active-dot element.
+        activeDotColor?: string
+        // Allow custom the active-dot element.
+        activeDotStyle?: ViewStyle
+
+        // Autoplay
+        // Delay between auto play transitions (in second).
+        autoplayTimeout?: boolean
+        // Cycle direction control.
+        autoplayDirection?: boolean
+
+        // Control buttons
+        // Set to true make control buttons visible.
+        buttonWrapperStyle?: any
+        // Allow custom the next button.
+        nextButton?: JSX.Element
+        // Allow custom the prev button.
+        prevButton?: JSX.Element
+
+        // Supported ScrollResponder
+        // When animation begins after letting up
+        onScrollBeginDrag?: any
+        // Makes no sense why this occurs first during bounce
+        onMomentumScrollEnd?: any
+        // Immediately after onMomentumScrollEnd
+        onTouchStartCapture?: any
+        // Same, but bubble phase
+        onTouchStart?: any
+        // You could hold the touch start for a long time
+        onTouchEnd?: any
+        // When lifting up - you could pause forever before * lifting
+        onResponderRelease?: any
+
+        // If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for
+        // horizontal pagination.
+        pagingEnabled?: boolean
+        // Set to true if you want to show horizontal scroll bar.
+        showsHorizontalScrollIndicator?: boolean
+        // Set to true if you want to show vertical scroll bar.
+        showsVerticalScrollIndicator?: boolean
+        // If true, the scroll view bounces when it reaches the end of the content if the content is larger then the
+        // scroll view along the axis of the scroll direction. If false, it disables all bouncing even if the
+        // alwaysBounce* props are true.
+        bounces?: boolean
+        // If true, the scroll view scrolls to top when the status bar is tapped.
+        scrollsToTop?: boolean
+        // If true, offscreen child views (whose overflow value is hidden) are removed from their native backing
+        // superview when offscreen. This canimprove scrolling performance on long lists.
+        removeClippedSubviews?: boolean
+        // Set to true if you need adjust content insets automation.
+        automaticallyAdjustContentInsets?: boolean
+        // Enables/Disables swiping
+        scrollEnabled?: boolean
+    }
+
+    export default class Swiper extends Component<SwiperProps, any> {
+    }
+}

index.js

@@ -0,0 +1,2 @@
+import Swiper from './src/'
+module.exports = Swiper

package.json

@@ -5,12 +5,41 @@
     "react-native",
     "ios"
   ],
-  "version": "1.4.7",
+  "version": "1.5.13",
   "description": "Swiper component for React Native.",
-  "main": "dist/index.js",
+  "main": "index.js",
   "scripts": {
-    "start": "babel src --out-dir dist --presets es2015,react",
-    "watch": "babel src --out-dir dist --watch --presets es2015,react"
+    "start": "react-native start",
+    "lint": "standard | snazzy",
+    "update": "updtr",
+    "precommit": "git diff --name-only --cached --relative | grep '\\.jsx\\?$' | xargs standard | snazzy; if [ $? -ne 0 ]; then exit 1; fi",
+    "test": "npm run lint"
+  },
+  "pre-commit": {
+    "run": [
+      "precommit"
+    ],
+    "silent": true
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "global": [
+      "__DEV__",
+      "FormData",
+      "requestAnimationFrame",
+      "alert",
+      "setImmediate",
+      "fetch"
+    ],
+    "ignore": [
+      "dist/",
+      "mock/",
+      "node_modules/"
+    ]
+  },
+  "ava": {
+    "babel": "inherit",
+    "require": []
   },
   "repository": {
     "type": "git",
@@ -23,11 +52,13 @@
   },
   "homepage": "https://github.com/leecade/react-native-swiper#readme",
   "devDependencies": {
-    "babel-cli": "^6.11.4",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.1"
+    "babel-eslint": "^8.0.1",
+    "rimraf": "^2.5.4",
+    "snazzy": "^6.0.0",
+    "standard": "^10.0.3",
+    "updtr": "^2.0.0"
   },
   "dependencies": {
-    "react-timer-mixin": "^0.13.3"
+    "prop-types": "^15.5.10"
   }
 }

src/index.js

@@ -2,41 +2,40 @@
  * react-native-swiper
  * @author leecade<leecade@163.com>
  */
-import React from 'react'
-import ReactNative, {
-  StyleSheet,
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {
   Text,
   View,
+  ViewPropTypes,
   ScrollView,
   Dimensions,
   TouchableOpacity,
   ViewPagerAndroid,
-  Platform
+  Platform,
+  ActivityIndicator
 } from 'react-native'
 
-// Using bare setTimeout, setInterval, setImmediate
-// and requestAnimationFrame calls is very dangerous
-// because if you forget to cancel the request before
-// the component is unmounted, you risk the callback
-// throwing an exception.
-import TimerMixin from 'react-timer-mixin'
-
-let { width, height } = Dimensions.get('window')
-
 /**
  * Default styles
  * @type {StyleSheetPropType}
  */
-let styles = StyleSheet.create({
+const styles = {
   container: {
     backgroundColor: 'transparent',
     position: 'relative',
+    flex: 1
   },
 
-  wrapper: {
+  wrapperIOS: {
     backgroundColor: 'transparent',
   },
 
+  wrapperAndroid: {
+    backgroundColor: 'transparent',
+    flex: 1
+  },
+
   slide: {
     backgroundColor: 'transparent',
   },
@@ -50,7 +49,7 @@ let styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor:'transparent',
+    backgroundColor: 'transparent'
   },
 
   pagination_y: {
@@ -62,7 +61,7 @@ let styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor:'transparent',
+    backgroundColor: 'transparent'
   },
 
   title: {
@@ -74,7 +73,7 @@ let styles = StyleSheet.create({
     left: 0,
     flexWrap: 'nowrap',
     width: 250,
-    backgroundColor: 'transparent',
+    backgroundColor: 'transparent'
   },
 
   buttonWrapper: {
@@ -93,185 +92,264 @@ let styles = StyleSheet.create({
   buttonText: {
     fontSize: 50,
     color: '#007aff',
-    fontFamily: 'Arial',
-  },
-})
+    fontFamily: 'Arial'
+  }
+}
 
 // missing `module.exports = exports['default'];` with babel6
 // export default React.createClass({
-module.exports = React.createClass({
-
+export default class extends Component {
   /**
    * Props Validation
    * @type {Object}
    */
-  propTypes: {
-    horizontal                       : React.PropTypes.bool,
-    children                         : React.PropTypes.node.isRequired,
-    style                            : View.propTypes.style,
-    pagingEnabled                    : React.PropTypes.bool,
-    showsHorizontalScrollIndicator   : React.PropTypes.bool,
-    showsVerticalScrollIndicator     : React.PropTypes.bool,
-    bounces                          : React.PropTypes.bool,
-    scrollsToTop                     : React.PropTypes.bool,
-    removeClippedSubviews            : React.PropTypes.bool,
-    automaticallyAdjustContentInsets : React.PropTypes.bool,
-    showsPagination                  : React.PropTypes.bool,
-    showsButtons                     : React.PropTypes.bool,
-    loop                             : React.PropTypes.bool,
-    autoplay                         : React.PropTypes.bool,
-    autoplayTimeout                  : React.PropTypes.number,
-    autoplayDirection                : React.PropTypes.bool,
-    index                            : React.PropTypes.number,
-    renderPagination                 : React.PropTypes.func,
-  },
-
-  mixins: [TimerMixin],
+  static propTypes = {
+    horizontal: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+    containerStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.number,
+    ]),
+    style: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.number,
+    ]),
+    scrollViewStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.number,
+    ]),
+    pagingEnabled: PropTypes.bool,
+    showsHorizontalScrollIndicator: PropTypes.bool,
+    showsVerticalScrollIndicator: PropTypes.bool,
+    bounces: PropTypes.bool,
+    scrollsToTop: PropTypes.bool,
+    removeClippedSubviews: PropTypes.bool,
+    automaticallyAdjustContentInsets: PropTypes.bool,
+    showsPagination: PropTypes.bool,
+    showsButtons: PropTypes.bool,
+    disableNextButton: PropTypes.bool,
+    loadMinimal: PropTypes.bool,
+    loadMinimalSize: PropTypes.number,
+    loadMinimalLoader: PropTypes.element,
+    loop: PropTypes.bool,
+    autoplay: PropTypes.bool,
+    autoplayTimeout: PropTypes.number,
+    autoplayDirection: PropTypes.bool,
+    index: PropTypes.number,
+    renderPagination: PropTypes.func,
+    dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    activeDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    dotColor: PropTypes.string,
+    activeDotColor: PropTypes.string,
+    /**
+     * Called when the index has changed because the user swiped.
+     */
+    onIndexChanged: PropTypes.func
+  }
 
   /**
    * Default props
    * @return {object} props
    * @see http://facebook.github.io/react-native/docs/scrollview.html
    */
-  getDefaultProps() {
-    return {
-      horizontal                       : true,
-      pagingEnabled                    : true,
-      showsHorizontalScrollIndicator   : false,
-      showsVerticalScrollIndicator     : false,
-      bounces                          : false,
-      scrollsToTop                     : false,
-      removeClippedSubviews            : false,
-      automaticallyAdjustContentInsets : false,
-      showsPagination                  : true,
-      showsButtons                     : false,
-      loop                             : true,
-      autoplay                         : false,
-      autoplayTimeout                  : 2.5,
-      autoplayDirection                : true,
-      index                            : 0,
-    }
-  },
+  static defaultProps = {
+    horizontal: true,
+    pagingEnabled: true,
+    showsHorizontalScrollIndicator: false,
+    showsVerticalScrollIndicator: false,
+    bounces: false,
+    scrollsToTop: false,
+    removeClippedSubviews: true,
+    automaticallyAdjustContentInsets: false,
+    showsPagination: true,
+    showsButtons: false,
+    disableNextButton: false,
+    loop: true,
+    loadMinimal: false,
+    loadMinimalSize: 1,
+    autoplay: false,
+    autoplayTimeout: 2.5,
+    autoplayDirection: true,
+    index: 0,
+    onIndexChanged: () => null
+  }
 
   /**
    * Init states
    * @return {object} states
    */
-  getInitialState() {
-    return this.initState(this.props)
-  },
+  state = this.initState(this.props)
+
+  /**
+   * Initial render flag
+   * @type {bool}
+   */
+  initialRender = true
 
   /**
    * autoplay timer
    * @type {null}
    */
-  autoplayTimer: null,
+  autoplayTimer = null
+  loopJumpTimer = null
 
-  componentWillReceiveProps(props) {
-    this.setState(this.initState(props))
-  },
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
+    this.setState(this.initState(nextProps, this.props.index !== nextProps.index))
+  }
 
-  componentDidMount() {
+  componentDidMount () {
     this.autoplay()
-  },
+  }
 
-  initState(props) {
+  componentWillUnmount () {
+    this.autoplayTimer && clearTimeout(this.autoplayTimer)
+    this.loopJumpTimer && clearTimeout(this.loopJumpTimer)
+  }
+
+  componentWillUpdate (nextProps, nextState) {
+    // If the index has changed, we notify the parent via the onIndexChanged callback
+    if (this.state.index !== nextState.index) this.props.onIndexChanged(nextState.index)
+  }
+
+  initState (props, updateIndex = false) {
     // set the current state
-    const state = this.state || {}
+    const state = this.state || { width: 0, height: 0, offset: { x: 0, y: 0 } }
 
-    let initState = {
-      isScrolling: false,
+    const initState = {
       autoplayEnd: false,
       loopJump: false,
+      offset: {}
     }
 
     initState.total = props.children ? props.children.length || 1 : 0
 
-    if (state.total === initState.total) {
+    if (state.total === initState.total && !updateIndex) {
       // retain the index
       initState.index = state.index
     } else {
-      // reset the index
       initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
     }
 
     // Default: horizontal
-    initState.dir = props.horizontal === false ? 'y' : 'x'
-    initState.width = props.width || width
-    initState.height = props.height || height
-    initState.offset = {}
+    const { width, height } = Dimensions.get('window')
 
-    if (initState.total > 1) {
-      var setup = initState.index
-      if ( props.loop ) {
+    initState.dir = props.horizontal === false ? 'y' : 'x'
+
+    if (props.width) {
+      initState.width = props.width
+    } else if (this.state && this.state.width){
+      initState.width = this.state.width
+    } else {
+      initState.width = width;
+    }
+
+    if (props.height) {
+      initState.height = props.height
+    } else if (this.state && this.state.height){
+      initState.height = this.state.height
+    } else {
+      initState.height = height;
+    }
+
+    initState.offset[initState.dir] = initState.dir === 'y'
+      ? height * props.index
+      : width * props.index
+
+
+    this.internals = {
+      ...this.internals,
+      isScrolling: false
+    };
+    return initState
+  }
+
+  // include internals with state
+  fullState () {
+    return Object.assign({}, this.state, this.internals)
+  }
+
+  onLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout
+    const offset = this.internals.offset = {}
+    const state = { width, height }
+
+    if (this.state.total > 1) {
+      let setup = this.state.index
+      if (this.props.loop) {
         setup++
       }
-      initState.offset[initState.dir] = initState.dir === 'y'
-        ? initState.height * setup
-        : initState.width * setup
+      offset[this.state.dir] = this.state.dir === 'y'
+        ? height * setup
+        : width * setup
     }
-    return initState
-  },
 
-	loopJump: function loopJump(){
-    if(this.state.loopJump){
-      var i = this.state.index + (this.props.loop ? 1 : 0);
-      setTimeout(() => this.refs.scrollView.setPageWithoutAnimation && this.refs.scrollView.setPageWithoutAnimation(i), 50);
+    // only update the offset in state if needed, updating offset while swiping
+    // causes some bad jumping / stuttering
+    if (!this.state.offset || width !== this.state.width || height !== this.state.height) {
+      state.offset = offset
     }
-  },
+
+    // related to https://github.com/leecade/react-native-swiper/issues/570
+    // contentOffset is not working in react 0.48.x so we need to use scrollTo
+    // to emulate offset.
+    if (Platform.OS === 'ios') {
+      if (this.initialRender && this.state.total > 1) {
+        this.scrollView.scrollTo({...offset, animated: false})
+        this.initialRender = false;
+      }
+    }
+
+    this.setState(state)
+  }
+
+  loopJump = () => {
+    if (!this.state.loopJump) return
+    const i = this.state.index + (this.props.loop ? 1 : 0)
+    const scrollView = this.scrollView
+    this.loopJumpTimer = setTimeout(() => scrollView.setPageWithoutAnimation &&
+      scrollView.setPageWithoutAnimation(i), 50)
+  }
 
   /**
    * Automatic rolling
    */
-  autoplay() {
-    if(
-      !Array.isArray(this.props.children)
-      || !this.props.autoplay
-      || this.state.isScrolling
-      || this.state.autoplayEnd
-    ) {
-      return
-    }
+  autoplay = () => {
+    if (!Array.isArray(this.props.children) ||
+      !this.props.autoplay ||
+      this.internals.isScrolling ||
+      this.state.autoplayEnd) return
 
-    clearTimeout(this.autoplayTimer)
-
-    this.autoplayTimer = this.setTimeout(() => {
-      if(
-        !this.props.loop && (
+    this.autoplayTimer && clearTimeout(this.autoplayTimer)
+    this.autoplayTimer = setTimeout(() => {
+      if (!this.props.loop && (
           this.props.autoplayDirection
             ? this.state.index === this.state.total - 1
             : this.state.index === 0
         )
-      ) {
-        return this.setState({ autoplayEnd: true })
-      }
+      ) return this.setState({ autoplayEnd: true })
 
       this.scrollBy(this.props.autoplayDirection ? 1 : -1)
     }, this.props.autoplayTimeout * 1000)
-  },
+  }
 
   /**
    * Scroll begin handle
    * @param  {object} e native event
    */
-  onScrollBegin(e) {
+  onScrollBegin = e => {
     // update scroll state
-    this.setState({ isScrolling: true })
-
-    this.setTimeout(() => {
-      this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e, this.state, this)
-    })
-  },
+    this.internals.isScrolling = true
+    this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e, this.fullState(), this)
+  }
 
   /**
    * Scroll end handle
    * @param  {object} e native event
    */
-  onScrollEnd(e) {
+  onScrollEnd = e => {
     // update scroll state
-    this.setState({
-      isScrolling: false
-    })
+    this.internals.isScrolling = false
 
     // making our events coming from android compatible to updateIndex logic
     if (!e.nativeEvent.contentOffset) {
@@ -282,115 +360,135 @@ module.exports = React.createClass({
       }
     }
 
-    this.updateIndex(e.nativeEvent.contentOffset, this.state.dir)
-
-    // Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
-    // in setTimeout to ensure synchronous update `index`
-    this.setTimeout(() => {
+    this.updateIndex(e.nativeEvent.contentOffset, this.state.dir, () => {
       this.autoplay()
-      this.loopJump();
+      this.loopJump()
 
       // if `onMomentumScrollEnd` registered will be called here
-      this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.state, this)
+      this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.fullState(), this)
     })
-  },
+  }
 
   /*
    * Drag end handle
    * @param {object} e native event
    */
-  onScrollEndDrag(e) {
-    let { contentOffset } = e.nativeEvent
-    let { horizontal, children } = this.props
-    let { offset, index } = this.state
-    let previousOffset = horizontal ? offset.x : offset.y
-    let newOffset = horizontal ? contentOffset.x : contentOffset.y
+  onScrollEndDrag = e => {
+    const { contentOffset } = e.nativeEvent
+    const { horizontal, children } = this.props
+    const { index } = this.state
+    const { offset } = this.internals
+    const previousOffset = horizontal ? offset.x : offset.y
+    const newOffset = horizontal ? contentOffset.x : contentOffset.y
 
-    if (previousOffset === newOffset && (index === 0 || index === children.length - 1)) {
-      this.setState({
-        isScrolling: false
-      })
+    if (previousOffset === newOffset &&
+      (index === 0 || index === children.length - 1)) {
+      this.internals.isScrolling = false
     }
-  },
+  }
 
   /**
    * Update index after scroll
    * @param  {object} offset content offset
    * @param  {string} dir    'x' || 'y'
    */
-  updateIndex(offset, dir) {
-
-    let state = this.state
+  updateIndex = (offset, dir, cb) => {
+    const state = this.state
     let index = state.index
-    let diff = offset[dir] - state.offset[dir]
-    let step = dir === 'x' ? state.width : state.height
-    let loopJump = false;
+    const diff = offset[dir] - this.internals.offset[dir]
+    const step = dir === 'x' ? state.width : state.height
+    let loopJump = false
 
     // Do nothing if offset no change.
-    if(!diff) return
+    if (!diff) return
 
     // Note: if touch very very quickly and continuous,
     // the variation of `index` more than 1.
     // parseInt() ensures it's always an integer
     index = parseInt(index + Math.round(diff / step))
 
-    if(this.props.loop) {
-      if(index <= -1) {
+    if (this.props.loop) {
+      if (index <= -1) {
         index = state.total - 1
         offset[dir] = step * state.total
-        loopJump = true;
-      }
-      else if(index >= state.total) {
+        loopJump = true
+      } else if (index >= state.total) {
         index = 0
         offset[dir] = step
-        loopJump = true;
+        loopJump = true
       }
     }
 
-    this.setState({
-      index: index,
-      offset: offset,
-      loopJump: loopJump,
-    })
-  },
+    const newState = {}
+    newState.index = index
+    newState.loopJump = loopJump
+
+    this.internals.offset = offset
+
+    // only update offset in state if loopJump is true
+    if (loopJump) {
+      // when swiping to the beginning of a looping set for the third time,
+      // the new offset will be the same as the last one set in state.
+      // Setting the offset to the same thing will not do anything,
+      // so we increment it by 1 then immediately set it to what it should be,
+      // after render.
+      if (offset[dir] === this.internals.offset[dir]) {
+        newState.offset = { x: 0, y: 0 }
+        newState.offset[dir] = offset[dir] + 1
+        this.setState(newState, () => {
+          this.setState({ offset: offset }, cb)
+        })
+      } else {
+        newState.offset = offset
+        this.setState(newState, cb)
+      }
+    } else {
+      this.setState(newState, cb)
+    }
+  }
 
   /**
    * Scroll by index
    * @param  {number} index offset index
+   * @param  {bool} animated
    */
-  scrollBy(index) {
-    if (this.state.isScrolling || this.state.total < 2) return
-    let state = this.state
-    let diff = (this.props.loop ? 1 : 0) + index + this.state.index
+
+  scrollBy = (index, animated = true) => {
+    if (this.internals.isScrolling || this.state.total < 2) return
+    const state = this.state
+    const diff = (this.props.loop ? 1 : 0) + index + this.state.index
     let x = 0
     let y = 0
-    if(state.dir === 'x') x = diff * state.width
-    if(state.dir === 'y') y = diff * state.height
+    if (state.dir === 'x') x = diff * state.width
+    if (state.dir === 'y') y = diff * state.height
 
-    this.refs.scrollView && this.refs.scrollView.scrollTo({ x, y })
+    if (Platform.OS !== 'ios') {
+      this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
+    } else {
+      this.scrollView && this.scrollView.scrollTo({ x, y, animated })
+    }
 
     // update scroll state
+    this.internals.isScrolling = true
     this.setState({
-      isScrolling: true,
-      autoplayEnd: false,
+      autoplayEnd: false
     })
 
     // trigger onScrollEnd manually in android
-    if (Platform.OS === 'android') {
-      this.setTimeout(() => {
+    if (!animated || Platform.OS !== 'ios') {
+      setImmediate(() => {
         this.onScrollEnd({
           nativeEvent: {
-            position: diff,
+            position: diff
           }
-        });
-      }, 0);
+        })
+      })
     }
+  }
 
-  },
-
-  scrollViewPropOverrides() {
-    var props = this.props
-    var overrides = {}
+  scrollViewPropOverrides = () => {
+    const props = this.props
+    let overrides = {}
 
     /*
     const scrollResponders = [
@@ -402,57 +500,54 @@ module.exports = React.createClass({
     ]
     */
 
-    for(let prop in props) {
+    for (let prop in props) {
       // if(~scrollResponders.indexOf(prop)
-      if(typeof props[prop] === 'function'
-        && prop !== 'onMomentumScrollEnd'
-        && prop !== 'renderPagination'
-        && prop !== 'onScrollBeginDrag'
+      if (typeof props[prop] === 'function' &&
+        prop !== 'onMomentumScrollEnd' &&
+        prop !== 'renderPagination' &&
+        prop !== 'onScrollBeginDrag'
       ) {
         let originResponder = props[prop]
-        overrides[prop] = (e) => originResponder(e, this.state, this)
+        overrides[prop] = (e) => originResponder(e, this.fullState(), this)
       }
     }
 
     return overrides
-  },
+  }
 
   /**
    * Render pagination
    * @return {object} react-dom
    */
-  renderPagination() {
-
-    // By default, dots only show when `total` > 2
-    if(this.state.total <= 1) return null
+  renderPagination = () => {
+     // By default, dots only show when `total` >= 2
+    if (this.state.total <= 1) return null
 
     let dots = []
-    let ActiveDot = this.props.activeDot || <View style={{
-            backgroundColor: '#007aff',
-            width: 8,
-            height: 8,
-            borderRadius: 4,
-            marginLeft: 3,
-            marginRight: 3,
-            marginTop: 3,
-            marginBottom: 3,
-          }} />;
-    let Dot = this.props.dot || <View style={{
-            backgroundColor:'rgba(0,0,0,.2)',
-            width: 8,
-            height: 8,
-            borderRadius: 4,
-            marginLeft: 3,
-            marginRight: 3,
-            marginTop: 3,
-            marginBottom: 3,
-          }} />;
-    for(let i = 0; i < this.state.total; i++) {
+    const ActiveDot = this.props.activeDot || <View style={[{
+      backgroundColor: this.props.activeDotColor || '#007aff',
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      marginLeft: 3,
+      marginRight: 3,
+      marginTop: 3,
+      marginBottom: 3
+    }, this.props.activeDotStyle]} />
+    const Dot = this.props.dot || <View style={[{
+      backgroundColor: this.props.dotColor || 'rgba(0,0,0,.2)',
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      marginLeft: 3,
+      marginRight: 3,
+      marginTop: 3,
+      marginBottom: 3
+    }, this.props.dotStyle ]} />
+    for (let i = 0; i < this.state.total; i++) {
       dots.push(i === this.state.index
-        ?
-        React.cloneElement(ActiveDot, {key: i})
-        :
-        React.cloneElement(Dot, {key: i})
+        ? React.cloneElement(ActiveDot, {key: i})
+        : React.cloneElement(Dot, {key: i})
       )
     }
 
@@ -461,121 +556,174 @@ module.exports = React.createClass({
         {dots}
       </View>
     )
-  },
+  }
 
-  renderTitle() {
-    let child = this.props.children[this.state.index]
-    let title = child && child.props.title
+  renderTitle = () => {
+    const child = this.props.children[this.state.index]
+    const title = child && child.props && child.props.title
     return title
-      ? (
-        <View style={styles.title}>
-          {this.props.children[this.state.index].props.title}
-        </View>
-      )
+      ? (<View style={styles.title}>
+        {this.props.children[this.state.index].props.title}
+      </View>)
       : null
-  },
+  }
 
-  renderNextButton() {
-    let button;
+  renderNextButton = () => {
+    let button = null
 
-    if (this.props.loop || this.state.index != this.state.total - 1) {
+    if (this.props.loop ||
+      this.state.index !== this.state.total - 1) {
       button = this.props.nextButton || <Text style={styles.buttonText}>›</Text>
     }
 
     return (
-      <TouchableOpacity onPress={() => button !== null && this.scrollBy.call(this, 1)}>
+      <TouchableOpacity
+        onPress={() => button !== null && this.scrollBy(1)}
+        disabled={this.props.disableNextButton}
+      >
         <View>
           {button}
         </View>
       </TouchableOpacity>
     )
-  },
+  }
 
-  renderPrevButton() {
+  renderPrevButton = () => {
     let button = null
 
-    if (this.props.loop || this.state.index != 0) {
-       button = this.props.prevButton || <Text style={styles.buttonText}>‹</Text>
+    if (this.props.loop || this.state.index !== 0) {
+      button = this.props.prevButton || <Text style={styles.buttonText}>‹</Text>
     }
 
     return (
-      <TouchableOpacity onPress={() => button !== null && this.scrollBy.call(this, -1)}>
+      <TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
         <View>
           {button}
         </View>
       </TouchableOpacity>
     )
-  },
+  }
 
-  renderButtons() {
+  renderButtons = () => {
     return (
-      <View pointerEvents='box-none' style={[styles.buttonWrapper, {width: this.state.width, height: this.state.height}, this.props.buttonWrapperStyle]}>
+      <View pointerEvents='box-none' style={[styles.buttonWrapper, {
+        width: this.state.width,
+        height: this.state.height
+      }, this.props.buttonWrapperStyle]}>
         {this.renderPrevButton()}
         {this.renderNextButton()}
       </View>
     )
-  },
+  }
 
-  renderScrollView(pages) {
+  refScrollView = view => {
+    this.scrollView = view;
+  }
+
+  renderScrollView = pages => {
+    if (Platform.OS === 'ios') {
+      return (
+        <ScrollView ref={this.refScrollView}
+          {...this.props}
+          {...this.scrollViewPropOverrides()}
+          contentContainerStyle={[styles.wrapperIOS, this.props.style]}
+          contentOffset={this.state.offset}
+          onScrollBeginDrag={this.onScrollBegin}
+          onMomentumScrollEnd={this.onScrollEnd}
+          onScrollEndDrag={this.onScrollEndDrag}
+          style={this.props.scrollViewStyle}>
+          {pages}
+        </ScrollView>
+       )
+    }
     return (
-      <ScrollView ref="scrollView"
+      <ViewPagerAndroid ref={this.refScrollView}
         {...this.props}
-        {...this.scrollViewPropOverrides()}
-        contentContainerStyle={[styles.wrapper, this.props.style]}
-        contentOffset={this.state.offset}
-        onScrollBeginDrag={this.onScrollBegin}
-        onMomentumScrollEnd={this.onScrollEnd}
-        onScrollEndDrag={this.onScrollEndDrag}>
+        initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
+        onPageSelected={this.onScrollEnd}
+        key={pages.length}
+        style={[styles.wrapperAndroid, this.props.style]}>
         {pages}
-      </ScrollView>
-    );
-  },
+      </ViewPagerAndroid>
+    )
+  }
 
   /**
    * Default render
    * @return {object} react-dom
    */
-  render() {
-    let state = this.state
-    let props = this.props
-    let children = props.children
-    let index = state.index
-    let total = state.total
-    let loop = props.loop
-    let dir = state.dir
-    let key = 0
-
+  render () {
+    const state = this.state
+    const props = this.props
+    const {
+      index,
+      total,
+      width,
+      height
+    } = this.state;
+    const {
+      children,
+      containerStyle,
+      loop,
+      loadMinimal,
+      loadMinimalSize,
+      loadMinimalLoader,
+      renderPagination,
+      showsButtons,
+      showsPagination,
+    } = this.props;
+    // let dir = state.dir
+    // let key = 0
+    const loopVal = loop ? 1 : 0
     let pages = []
-    let pageStyle = [{width: state.width, height: state.height}, styles.slide]
+
+    const pageStyle = [{width: width, height: height}, styles.slide]
+    const pageStyleLoading = {
+      width,
+      height,
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
 
     // For make infinite at least total > 1
-    if(total > 1) {
-
+    if (total > 1) {
       // Re-design a loop model for avoid img flickering
       pages = Object.keys(children)
-      if(loop) {
+      if (loop) {
         pages.unshift(total - 1 + '')
         pages.push('0')
       }
 
-      pages = pages.map((page, i) =>
-        <View style={pageStyle} key={i}>{children[page]}</View>
-      )
+      pages = pages.map((page, i) => {
+        if (loadMinimal) {
+          if (i >= (index + loopVal - loadMinimalSize) &&
+            i <= (index + loopVal + loadMinimalSize)) {
+            return <View style={pageStyle} key={i}>{children[page]}</View>
+          } else {
+            return (
+              <View style={pageStyleLoading} key={i}>
+                {loadMinimalLoader ? loadMinimalLoader : <ActivityIndicator />}
+              </View>
+            )
+          }
+        } else {
+          return <View style={pageStyle} key={i}>{children[page]}</View>
+        }
+      })
+    } else {
+      pages = <View style={pageStyle} key={0}>{children}</View>
     }
-    else pages = <View style={pageStyle}>{children}</View>
 
     return (
-      <View style={[styles.container, {
-        width: state.width,
-        height: state.height
-      }]}>
+      <View style={[styles.container, containerStyle]} onLayout={this.onLayout}>
         {this.renderScrollView(pages)}
-        {props.showsPagination && (props.renderPagination
-          ? this.props.renderPagination(state.index, state.total, this)
+        {showsPagination && (renderPagination
+          ? renderPagination(index, total, this)
           : this.renderPagination())}
         {this.renderTitle()}
-        {this.props.showsButtons && this.renderButtons()}
+        {showsButtons && this.renderButtons()}
       </View>
     )
   }
-})
+}