.gitignore

@@ -39,6 +39,3 @@ examples/swiper.xcodeproj/xcuserdata
 # Vim
 *.sw*
 dist/
-
-# yarn
-yarn.lock

.prettierrc

@@ -1,10 +0,0 @@
-{
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false
-}

CHANGELOG.md

@@ -1,129 +1,103 @@
-- [1.6.0-dev]
-  - ViewPagerAndroid: react-native => @react-native-community/viewpager
-  - add TypeScript typing of containerStyle
-- [1.5.14]
-  - fixes #582 (Android not setting this onLayout first?) #789 (thanks [@fungilation](https://github.com/fungilation))
-  - Add onScrollBegin and onTouchEnd for Android #684 (thanks [@kostyaVyrodov](https://github.com/kostyaVyrodov))
 - [1.5.13]
-  - Workaround for react-native 0.4.8 contentOffset regression #572 (thanks [@nixoz](https://github.com/nixoz))
+  + 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](https://github.com/kostyaVyrodov))
+  + 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](https://github.com/germanst))
+  + Calculated width & height on layout, used later on re-rendering. Possibility to change ScrollView styles #548 (thanks @germanst)
 - [1.5.12]
-
+  + Update core packages
-  - Update core packages
+  + Optionally disable the 'next' control button (thanks [@SSTPIERRE2](https://github.com/SSTPIERRE2))
-  - 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))
-  - 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))
-  - 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))
-  - Calculate the offset in the initial state instead of `onLayout` (thanks [@kjkta](https://github.com/kjkta))
 
 - [1.5.11]
-
+  + Typescript Definition
-  - Typescript Definition
 
 - [1.5.1]
-
+  + Allow scroll without animate, ref: [scrollBy(index, animated)](#scrollbyindex-animated)
-  - 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
-  - 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
-  - Improve develop [workflow](#development) for support watch & use real pkg name in examples
+  + Update examples for support `React-native 0.33` + `Xcode8` + `ios10` + `iphone7`
-  - Update examples for support `React-native 0.33` + `Xcode8` + `ios10` + `iphone7`
+  + Switch to [standard](https://github.com/feross/standard) code style
-  - Switch to [standard](https://github.com/feross/standard) code style
+  + Rewrite source code with ES6 syntex
-  - Rewrite source code with ES6 syntex
+  + Cancel transform the source code when publish
-  - Cancel transform the source code when publish
+  + Add a [demo](examples/components/LoadMinimal) for `loadMinimal` + `lazyload`
-  - Add a [demo](examples/components/LoadMinimal) for `loadMinimal` + `lazyload`
+  + Add a [demo](examples/components/PhotoView) for multi-images viewer
-  - 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)).
-  - [#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
-  - Adds loadMinimalSize property
 
 - [1.4.10]
-
+  + Adds loadMinimal to api (lazyloading-esque)
-  - Adds loadMinimal to api (lazyloading-esque)
 
 - [1.4.9]
-
+  + Adds extra check for title
-  - Adds extra check for title
 
 - [1.4.8]
-
+  + Fixes loop and autoplay bugs in android
-  - Fixes loop and autoplay bugs in android
 
 - [1.4.7]
-
+  + Don't attempt to mutate this.props
-  - Don't attempt to mutate this.props
+  + Fixes examples links
-  - Fixes examples links
+  + Adds drag end handling to always reset state.isScrolling
-  - Adds drag end handling to always reset state.isScrolling
+  + Fixes float calculation error
-  - Fixes float calculation error
 
 - [1.4.6]
-
+  + refactors examples
-  - refactors examples
+  + prevents mutation of `this.props`
-  - prevents mutation of `this.props`
+  + fixes android index loop issue
-  - fixes android index loop issue
 
 - [1.4.5]
-
+  + renames `scrollTo()` to `scrollBy()`
-  - renames `scrollTo()` to `scrollBy()`
+  + image index is now always an integer
-  - image index is now always an integer
+  + prevents parent state updates from reseting index counter
-  - prevents parent state updates from reseting index counter
+  + fixes issue with scrolling not working sometimes
-  - fixes issue with scrolling not working sometimes
 
 - [1.4.4]
-
+  + Support for React Native latest(`^0.26.0`)
-  - Support for React Native latest(`^0.26.0`)
+  + Updates examples to work with react-native-swiper 1.4.4
-  - Updates examples to work with react-native-swiper 1.4.4
+  + Examples now run on Android (some are still buggy, needs more work)
-  - Examples now run on Android (some are still buggy, needs more work)
+  + Removes old examples folder
-  - Removes old examples folder
 
 - [1.4.3]
-
+  + Fixed auto play issue when only a child view
-  - 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`
 
-  - 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
 
-  - Upgrade build tool to babel6
+  + Add missing deps `react-timer-mixin`
 
-  - 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)).
 
-  - [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)).
 
-  - [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)).
 
-  - [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)).
-
-  - [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)).
-  - [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`.
-  - [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.
-  - [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))
-  - [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))
-  - [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))
-  - [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))
-  - [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))
-  - [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))
+  + [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

@@ -22,50 +22,27 @@
 > 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.6.0-rc]**
-  - Dependency
-    - Remove ViewPagerAndroid, use ScrollView #1009
-  - Test Integration
-    - Setup e2e test
-  - TypeScript
-    - correct the wrong types #1000
-    - Add missing scrollBy TypeScript definition #931
-  - New Feature
-    - add scrollTo #831
-    - Added prop to disable the PrevButton #749
-    - Optionally render page #1004
-  - Bug Fix
-    - ES6 and CommonJS compatibility #717
-    - Solves the issue of state messing up when parent component calls setState #939
-    - replay when autoplay is setted to true #1002
-    - fix broken examples and migrate to react-native 0.60.x
-    - fix bad jumping on ios when loadMinimal set true
-    - fix fliker when loop and loadMinimal are enabled #1062
-
-* [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.5.4]
-
+  + Added easily accessible pagination point manipulation: use `dotColor` / `activeDotColor` and `dotStyle` / `activeDotStyle` (thanks [@denizs](https://github.com/denizs))
-  - 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))
-  - Added scrollEnabled prop to documentation (thanks [@ibandominguez](https://github.com/ibandominguez))
 
 - [1.5.3]
-
+  + Add loadMinimalLoader prop to customize `<ActivityIndicator />` (thanks [@Exilz](https://github.com/Exilz))
-  - 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))
-  - 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
-  - Special thanks to [@hypatiah](https://github.com/dizlexik) for fixed some grammatical errors in README
 
 - [1.5.2]
-  - Add yarn lock
+  + Add yarn lock
-  - Fix jitter when quickly swiping back and forth between pages (iOS) (thanks [@nemophrost](https://github.com/nemophrost))
+  + 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))
+  + The first webview always reloaded when injecting the rest of the children (thanks [@eosterberg](https://github.com/eosterberg))
 
 > see more: [CHANGELOG.md](CHANGELOG.md)
 
@@ -93,36 +70,29 @@
 
 ![](http://i.imgur.com/LAOHbJA.gif=300x)
 
+
 ## Getting Started
 
 - [Installation](#installation)
 - [Basic Usage](#basic-usage)
 - [Properties](#properties)
-  - [Basic](#basic)
+  + [Basic](#basic)
-  - [Custom basic style & content](#custom-basic-style--content)
+  + [Custom basic style & content](#custom-basic-style--content)
-  - [Pagination](#pagination)
+  + [Pagination](#pagination)
-  - [Autoplay](#autoplay)
+  + [Autoplay](#autoplay)
-  - [Control buttons](#control-buttons)
+  + [Control buttons](#control-buttons)
-  - [Props of Children](#props-of-children)
+  + [Props of Children](#props-of-children)
-  - [Basic props of `<ScrollView />`](#basic-props-of-scrollview-)
+  + [Basic props of `<ScrollView />`](#basic-props-of-scrollview-)
-  - [Supported ScrollResponder](#supported-scrollresponder)
+  + [Supported ScrollResponder](#supported-scrollresponder)
 - [Examples](#examples)
 - [Development](#development)
 
 ### Installation
 
-> v1.5.14
-
 ```bash
 $ npm i react-native-swiper --save
 ```
 
-> v1.6.0-rc
-
-```
-npm i --save react-native-swiper@next
-```
-
 ### Basic Usage
 
 - Install `react-native` first
@@ -140,40 +110,46 @@ $ react-native init myproject
 - Then, edit `myproject/index.ios.js`, like this:
 
 ```jsx
-import React, { Component } from 'react'
+import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, View } from 'react-native'
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
 
-import Swiper from 'react-native-swiper'
+import Swiper from 'react-native-swiper';
 
-const styles = StyleSheet.create({
+var styles = StyleSheet.create({
-  wrapper: {},
+  wrapper: {
+  },
   slide1: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#9DD6EB'
+    backgroundColor: '#9DD6EB',
   },
   slide2: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#97CAE5'
+    backgroundColor: '#97CAE5',
   },
   slide3: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#92BBD9'
+    backgroundColor: '#92BBD9',
   },
   text: {
     color: '#fff',
     fontSize: 30,
-    fontWeight: 'bold'
+    fontWeight: 'bold',
   }
 })
 
-export default class SwiperComponent extends Component {
+var swiper = React.createClass({
-  render() {
+  render: function() {
     return (
       <Swiper style={styles.wrapper} showsButtons={true}>
         <View style={styles.slide1}>
@@ -188,100 +164,99 @@ export default class SwiperComponent extends Component {
       </Swiper>
     )
   }
-}
+})
 
-AppRegistry.registerComponent('myproject', () => SwiperComponent)
+AppRegistry.registerComponent('myproject', () => swiper);
 ```
 
 ### Properties
 
 #### Basic
 
-| Prop           |     Default     |   Type   | Description                                                                                                 |
+| Prop  | Default  | Type | Description |
-| :------------- | :-------------: | :------: | :---------------------------------------------------------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| horizontal     |      true       |  `bool`  | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |
+| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |
-| loop           |      true       |  `bool`  | Set to `false` to disable continuous loop mode.                                                             |
+| loop | true | `bool` | Set to `false` to disable continuous loop mode. |
-| index          |        0        | `number` | Index number of initial slide.                                                                              |
+| index | 0 | `number` | Index number of initial slide. |
-| showsButtons   |      false      |  `bool`  | Set to `true` make control buttons visible.                                                                 |
+| showsButtons | false | `bool` | Set to `true` make control buttons visible. |
-| autoplay       |      false      |  `bool`  | Set to `true` enable auto play mode.                                                                        |
+| autoplay | false | `bool` | Set to `true` enable auto play mode. |
-| onIndexChanged | (index) => null |  `func`  | Called with the new index when the user swiped                                                              |
+| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped |
 
 #### Custom basic style & content
 
-| Prop              |         Default         |   Type    | Description                                                                |
+| Prop  | Default  | Type | Description |
-| :---------------- | :---------------------: | :-------: | :------------------------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| width             |            -            | `number`  | If no specify default enable fullscreen mode by `flex: 1`.                 |
+| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |
-| height            |            -            | `number`  | If no specify default fullscreen mode by `flex: 1`.                        |
+| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |
-| style             |          {...}          |  `style`  | See default style in source.                                               |
+| style | {...} | `style` | See default style in source. |
-| containerStyle    |          {...}          |  `style`  | See default container style in source.                                     |
+| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. |
-| loadMinimal       |          false          |  `bool`   | Only load current index slide , `loadMinimalSize` slides before and after. |
+| loadMinimalSize | 1 | `number` | see `loadMinimal`   |
-| loadMinimalSize   |            1            | `number`  | see `loadMinimal`                                                          |
+| loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded
-| loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded                         |
 
 #### Pagination
 
-| Prop             |                                                                          Default                                                                          |    Type    | Description                                                                                                                                                                                   |
+| Prop  | Default  | Type | Description |
-| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| showsPagination  |                                                                           true                                                                            |   `bool`   | Set to `true` make pagination visible.                                                                                                                                                        |
+| showsPagination | true | `bool` | Set to `true` make pagination visible. |
-| paginationStyle  |                                                                           {...}                                                                           |  `style`   | Custom styles will merge with the default styles.                                                                                                                                             |
+| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. |
-| 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. |
+| 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.                                                                                                                                                                 |
+| 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.                                                                                                                                                          |
+| 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.                                                                                                                                                          |
+| dotStyle | - | `object` | Allow custom the active-dot element. |
-| dotColor         |                                                                             -                                                                             |  `string`  | Allow custom the active-dot element.                                                                                                                                                          |
+| dotColor | - | `string` | Allow custom the active-dot element. |
-| activeDotColor   |                                                                             -                                                                             |  `string`  | Allow custom the active-dot element.                                                                                                                                                          |
+| activeDotColor | - | `string` | Allow custom the active-dot element. |
-| activeDotStyle   |                                                                             -                                                                             |  `object`  | Allow custom the active-dot element.                                                                                                                                                          |
+| activeDotStyle | - | `object` | Allow custom the active-dot element. |
 
 #### Autoplay
 
-| Prop              | Default |   Type   | Description                                      |
+| Prop  | Default  | Type | Description |
-| :---------------- | :-----: | :------: | :----------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| autoplay          |  true   |  `bool`  | Set to `true` enable auto play mode.             |
+| autoplay | true | `bool` | Set to `true` enable auto play mode. |
-| autoplayTimeout   |   2.5   | `number` | Delay between auto play transitions (in second). |
+| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). |
-| autoplayDirection |  true   |  `bool`  | Cycle direction control.                         |
+| autoplayDirection | true | `bool` | Cycle direction control. |
 
 #### Control buttons
 
-| Prop               |                                                                                                   Default                                                                                                   |   Type    | Description                                 |
+| Prop  | Default  | Type | Description |
-| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------: | :------------------------------------------ |
+| :------------ |:---------------:| :---------------:| :-----|
-| showsButtons       |                                                                                                    true                                                                                                     |  `bool`   | Set to `true` make control buttons visible. |
+| showsButtons | true | `bool` | Set to `true` make control buttons visible. |
-| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` |  `style`  | Custom styles.                              |
+| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. |
-| nextButton         |                                                                                 `<Text style={styles.buttonText}>›</Text>`                                                                                  | `element` | Allow custom the next button.               |
+| nextButton | `<Text style={styles.buttonText}>›</Text>` | `element` | Allow custom the next button. |
-| prevButton         |                                                                                 `<Text style={styles.buttonText}>‹</Text>`                                                                                  | `element` | Allow custom the prev button.               |
+| prevButton | `<Text style={styles.buttonText}>‹</Text>` | `element` | Allow custom the prev button. |
 
 #### Props of Children
 
-| Prop  |               Default                |   Type    | Description                                                    |
+| Prop  | Default  | Type | Description |
-| :---- | :----------------------------------: | :-------: | :------------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| style |                {...}                 |  `style`  | Custom styles will merge with the default styles.              |
+| style | {...} | `style` | Custom styles will merge with the default styles. |
 | title | {<Text numberOfLines={1}>...</Text>} | `element` | If this parameter is not specified, will not render the title. |
 
 #### Basic props of `<ScrollView />`
 
-| Prop                             | Default |  Type  | Description                                                                                                                                                                                                                                     |
+| Prop  | Default  | Type | Description |
-| :------------------------------- | :-----: | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| horizontal                       |  true   | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column.                                                                                                                                     |
+| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |
-| pagingEnabled                    |  true   | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination.                                                                                                               |
+| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination.  |
-| showsHorizontalScrollIndicator   |  false  | `bool` | Set to `true` if you want to show horizontal scroll bar.                                                                                                                                                                                        |
+| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. |
-| showsVerticalScrollIndicator     |  false  | `bool` | Set to `true` if you want to show vertical scroll bar.                                                                                                                                                                                          |
+| showsVerticalScrollIndicator | false | `bool` |  Set to `true` if you want to show vertical scroll bar. |
-| bounces                          |  false  | `bool` | 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 | false | `bool` | 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.  |
-| scrollsToTop                     |  false  | `bool` | If true, the scroll view scrolls to top when the status bar is tapped.                                                                                                                                                                          |
+| 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.                                                            |
+| 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.                                                                                                                                                                                     |
+| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. |
-| scrollEnabled                    |  true   | `bool` | Enables/Disables swiping                                                                                                                                                                                                                        |
+| scrollEnabled | true | `bool` | Enables/Disables swiping |
 
 > @see: http://facebook.github.io/react-native/docs/scrollview.html
 
 #### Supported ScrollResponder
 
-| Prop                |          Params           |    Type    | Description                                                 |
+| Prop  | Params  | Type | Description |
-| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- |
+| :------------ |:---------------:| :---------------:| :-----|
-| onScrollBeginDrag   | `e` / `state` / `context` | `function` | When animation begins after letting up                      |
+| onScrollBeginDrag | `e` / `state` / `context` | `function` | When animation begins after letting up |
-| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce          |
+| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce |
-| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd`                     |
+| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` |
-| onTouchStart        | `e` / `state` / `context` | `function` | Same, but bubble phase                                      |
+| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase |
-| onTouchEnd          | `e` / `state` / `context` | `function` | You could hold the touch start for a long time              |
+| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time |
-| onResponderRelease  | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before \* lifting |
+| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before * lifting |
 
 > Note: each ScrollResponder be injected with two params: `state` and `context`, you can get `state` and `context`(ref to swiper's `this`) from params, for example:
 
@@ -311,10 +286,10 @@ Scroll by relative index.
 
 Parameters:
 
-| Name     |   Type   |   default   | Description  |
+| Name  | Type     | default | Description |
-| :------- | :------: | :---------: | :----------- |
+| :---- | :------: | :------: | :--- |
-| index    | `number` | `undefined` | offset index |
+| index | `number`   | `undefined` | offset index |
-| animated |  `bool`  |   `true`    | offset index |
+| animated | `bool`   | `true` | offset index |
 
 ### Examples
 
@@ -330,14 +305,14 @@ $ react-native run-ios
 
 ```bash
 $ cd examples
-$ yarn
+$ npm i
-$ yarn start
+$ 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.
 
-After development, you should add test for your modification and make all tests passed to prevent other contributors break the feature in the future accidentally. We use detox + jest for e2e test now, you can read [Detox](https://github.com/wix/Detox) for more detail.
+And now that this project follows the [standard](https://github.com/feross/standard) code style, you'd better prepare it for IDE.
 
 ## Contribution
 

examples/.babelrc

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

examples/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: '@react-native-community',
-};

examples/.flowconfig

@@ -11,54 +11,20 @@
 ; 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
-node_modules/react-native/Libraries/react-native/React.js
+.*/Libraries/react-native/React.js
-
+.*/Libraries/react-native/ReactNative.js
-; Ignore polyfills
-node_modules/react-native/Libraries/polyfills/.*
-
-; These should not be required directly
-; require from fbjs/lib instead: require('fbjs/lib/warning')
-node_modules/warning/.*
-
-; Flow doesn't support platforms
-.*/Libraries/Utilities/HMRLoadingView.js
-
-[untyped]
-.*/node_modules/@react-native-community/cli/.*/.*
 
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
-node_modules/react-native/flow/
+node_modules/react-native/flow
+flow/
 
 [options]
 emoji=true
 
-esproposal.optional_chaining=enable
-esproposal.nullish_coalescing=enable
-
-module.file_ext=.js
-module.file_ext=.json
-module.file_ext=.ios.js
-
 module.system=haste
-module.system.haste.use_name_reducers=true
-# get basename
-module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
-# strip .js or .js.flow suffix
-module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
-# strip .ios suffix
-module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
-module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
-module.system.haste.paths.blacklist=.*/__tests__/.*
-module.system.haste.paths.blacklist=.*/__mocks__/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
-module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/IntegrationTests/.*
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation.js
-module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
 
 munge_underscores=true
 
@@ -66,34 +32,14 @@ module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|we
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
-suppress_type=$FlowFixMeProps
+suppress_type=$FixMe
-suppress_type=$FlowFixMeState
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+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\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
+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
 
-[lints]
+unsafe.enable_getters_and_setters=true
-sketchy-null-number=warn
-sketchy-null-mixed=warn
-sketchy-number=warn
-untyped-type-import=warn
-nonstrict-import=warn
-deprecated-type=warn
-unsafe-getters-setters=warn
-inexact-spread=warn
-unnecessary-invariant=warn
-signature-verification-failure=warn
-deprecated-utility=error
-
-[strict]
-deprecated-type
-nonstrict-import
-sketchy-null
-unclear-type
-unsafe-getters-setters
-untyped-import
-untyped-type-import
 
 [version]
-^0.98.0
+^0.49.1

examples/.gitignore

@@ -46,17 +46,8 @@ buck-out/
 # 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://docs.fastlane.tools/best-practices/source-control/
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
 
-*/fastlane/report.xml
+fastlane/report.xml
-*/fastlane/Preview.html
+fastlane/Preview.html
-*/fastlane/screenshots
+fastlane/screenshots
-
-# Bundle artifact
-*.jsbundle
-
-# CocoaPods
-/ios/Pods/
-
-# TestCase from issue
-TestCase-*/

examples/.prettierrc

@@ -1,10 +0,0 @@
-{
-  "printWidth": 80,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false
-}

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

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

examples/android/.project

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>android</name>
-	<comment>Project android created by Buildship.</comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
-	</natures>
-</projectDescription>

examples/android/.settings/org.eclipse.buildship.core.prefs

@@ -1,2 +0,0 @@
-connection.project.dir=
-eclipse.preferences.version=1

examples/android/app/BUCK

@@ -8,13 +8,23 @@
 # - `buck install -r android/app` - compile, install and run application
 #
 
-load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
-
 lib_deps = []
 
-create_aar_targets(glob(["libs/*.aar"]))
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
 
-create_jar_targets(glob(["libs/*.jar"]))
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
 
 android_library(
     name = "all-libs",

examples/android/app/build.gradle

@@ -18,9 +18,6 @@ import com.android.build.OutputFile
  *   // the entry file for bundle generation
  *   entryFile: "index.android.js",
  *
- *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
- *   bundleCommand: "ram-bundle",
- *
  *   // whether to bundle JS and assets in debug mode
  *   bundleInDebug: false,
  *
@@ -75,11 +72,6 @@ import com.android.build.OutputFile
  * ]
  */
 
-project.ext.react = [
-    entryFile: "index.js",
-    enableHermes: false,  // clean and rebuild if changing
-]
-
 apply from: "../../node_modules/react-native/react.gradle"
 
 /**
@@ -97,67 +89,30 @@ def enableSeparateBuildPerCPUArchitecture = false
  */
 def enableProguardInReleaseBuilds = false
 
-/**
- * The preferred build flavor of JavaScriptCore.
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US.  Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'org.webkit:android-jsc:+'
-
-/**
- * Whether to enable the Hermes VM.
- *
- * This should be set on project.ext.react and mirrored here.  If it is not set
- * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
- * and the benefits of using Hermes will therefore be sharply reduced.
- */
-def enableHermes = project.ext.react.get("enableHermes", false);
-
 android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    compileSdkVersion 23
-
+    buildToolsVersion "23.0.1"
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
 
     defaultConfig {
         applicationId "com.examples"
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 16
-        targetSdkVersion rootProject.ext.targetSdkVersion
+        targetSdkVersion 22
         versionCode 1
         versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
     }
     splits {
         abi {
             reset()
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            include "armeabi-v7a", "x86"
-        }
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
         }
     }
     buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
         release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://facebook.github.io/react-native/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
@@ -166,49 +121,21 @@ android {
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def versionCodes = ["armeabi-v7a":1, "x86":2]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
                         versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
             }
-
         }
     }
-
-    packagingOptions {
-        pickFirst '**/armeabi-v7a/libc++_shared.so'
-        pickFirst '**/x86/libc++_shared.so'
-        pickFirst '**/arm64-v8a/libc++_shared.so'
-        pickFirst '**/x86_64/libc++_shared.so'
-        pickFirst '**/x86/libjsc.so'
-        pickFirst '**/armeabi-v7a/libjsc.so'
-    }
 }
 
 dependencies {
-    implementation fileTree(dir: "libs", include: ["*.jar"])
+    compile fileTree(dir: "libs", include: ["*.jar"])
-    implementation "com.facebook.react:react-native:+"  // From node_modules
+    compile "com.android.support:appcompat-v7:23.0.1"
-
+    compile "com.facebook.react:react-native:+"  // From node_modules
-    // react-native-screens
-    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
-    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
-
-    if (enableHermes) {
-      def hermesPath = "../../node_modules/hermesvm/android/";
-      debugImplementation files(hermesPath + "hermes-debug.aar")
-      releaseImplementation files(hermesPath + "hermes-release.aar")
-    } else {
-      implementation jscFlavor
-    }
-
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
-        exclude group:'com.facebook.yoga'
-        exclude group:'com.facebook.flipper', module: 'fbjni'
-        exclude group:'com.facebook.fbjni', module: 'fbjni'
-        exclude group:'com.facebook.litho', module: 'litho-annotations'
-    }
 }
 
 // Run this once to be able to run the application with BUCK
@@ -217,5 +144,3 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.compile
     into 'libs'
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

examples/android/app/build_defs.bzl

@@ -1,19 +0,0 @@
-"""Helper definitions to glob .aar and .jar targets"""
-
-def create_aar_targets(aarfiles):
-    for aarfile in aarfiles:
-        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
-        lib_deps.append(":" + name)
-        android_prebuilt_aar(
-            name = name,
-            aar = aarfile,
-        )
-
-def create_jar_targets(jarfiles):
-    for jarfile in jarfiles:
-        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
-        lib_deps.append(":" + name)
-        prebuilt_jar(
-            name = name,
-            binary_jar = jarfile,
-        )

examples/android/app/proguard-rules.pro

@@ -8,3 +8,63 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Disabling obfuscation is useful if you collect stack traces from production crashes
+# (unless you are using a system that supports de-obfuscate the stack traces).
+-dontobfuscate
+
+# React Native
+
+# Keep our interfaces so they can be used by other ProGuard rules.
+# 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 * {
+  void set*(***);
+  *** get*();
+}
+
+-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
+-keep class * extends com.facebook.react.bridge.NativeModule { *; }
+-keepclassmembers,includedescriptorclasses class * { native <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
+
+-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 okhttp3.** { *; }
+-keep interface okhttp3.** { *; }
+-dontwarn okhttp3.**
+
+# okio
+
+-keep class sun.misc.Unsafe { *; }
+-dontwarn java.nio.file.*
+-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
+-dontwarn okio.**

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

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
-</manifest>

examples/android/app/src/debug/java/com/examples/ReactNativeFlipper.java

@@ -1,67 +0,0 @@
-package com.example;
-
-import android.content.Context;
-
-import com.facebook.flipper.android.AndroidFlipperClient;
-import com.facebook.flipper.android.utils.FlipperUtils;
-import com.facebook.flipper.core.FlipperClient;
-import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
-import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
-import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
-import com.facebook.flipper.plugins.inspector.DescriptorMapping;
-import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
-import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
-import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
-import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
-import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.modules.network.NetworkingModule;
-import okhttp3.OkHttpClient;
-
-public class ReactNativeFlipper {
-  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    if (FlipperUtils.shouldEnableFlipper(context)) {
-      final FlipperClient client = AndroidFlipperClient.getInstance(context);
-
-      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
-      client.addPlugin(new ReactFlipperPlugin());
-      client.addPlugin(new DatabasesFlipperPlugin(context));
-      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
-      client.addPlugin(CrashReporterPlugin.getInstance());
-
-      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
-      NetworkingModule.setCustomClientBuilder(
-        new NetworkingModule.CustomClientBuilder() {
-          @Override
-          public void apply(OkHttpClient.Builder builder) {
-            builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
-          }
-        });
-      client.addPlugin(networkFlipperPlugin);
-      client.start();
-
-      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
-      // Hence we run if after all native modules have been initialized
-      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
-      if (reactContext == null) {
-        reactInstanceManager.addReactInstanceEventListener(
-          new ReactInstanceManager.ReactInstanceEventListener() {
-            @Override
-            public void onReactContextInitialized(ReactContext reactContext) {
-              reactInstanceManager.removeReactInstanceEventListener(this);
-              reactContext.runOnNativeModulesQueueThread(
-                new Runnable() {
-                  @Override
-                  public void run() {
-                    client.addPlugin(new FrescoFlipperPlugin());
-                  }
-                });
-            }
-          });
-      } else {
-        client.addPlugin(new FrescoFlipperPlugin());
-      }
-    }
-  }
-}

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

@@ -1,14 +1,20 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.examples">
+    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"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

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

@@ -1,19 +1,14 @@
 package com.examples;
 
 import android.app.Application;
-import android.content.Context;
-import android.util.Log;
 
-import com.facebook.react.PackageList;
-import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
-import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 
-import java.lang.reflect.InvocationTargetException;
+import java.util.Arrays;
 import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
@@ -26,16 +21,9 @@ public class MainApplication extends Application implements ReactApplication {
 
     @Override
     protected List<ReactPackage> getPackages() {
-      @SuppressWarnings("UnnecessaryLocalVariable")
+      return Arrays.<ReactPackage>asList(
-      List<ReactPackage> packages = new PackageList(this).getPackages();
+          new MainReactPackage()
-      // Packages that cannot be autolinked yet can be added manually here, for example:
+      );
-      // packages.add(new MyReactNativePackage());
-      return packages;
-    }
-
-    @Override
-    protected String getJSMainModuleName() {
-      return "index";
     }
   };
 
@@ -48,36 +36,5 @@ public class MainApplication extends Application implements ReactApplication {
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
-    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }
-
-  /**
-   * Loads Flipper in React Native templates. Call this in the onCreate method
-   * with something like initializeFlipper(this,
-   * getReactNativeHost().getReactInstanceManager());
-   *
-   * @param context
-   */
-  private static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
-    if (BuildConfig.DEBUG) {
-      try {
-        /*
-         * We use reflection here to pick up the class that initializes Flipper, since
-         * Flipper library is not available in release mode
-         */
-        Class<?> aClass = Class.forName("com.example.ReactNativeFlipper");
-        aClass.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class).invoke(null, context,
-            reactInstanceManager);
-      } catch (ClassNotFoundException e) {
-        e.printStackTrace();
-      } catch (NoSuchMethodException e) {
-        e.printStackTrace();
-      } catch (IllegalAccessException e) {
-        e.printStackTrace();
-      } catch (InvocationTargetException e) {
-        e.printStackTrace();
-      }
-    }
-  }
-
 }

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

@@ -3,7 +3,6 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
-        <item name="android:textColor">#000000</item>
     </style>
 
 </resources>

examples/android/build.gradle

@@ -1,19 +1,11 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext {
-        buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
-        compileSdkVersion = 28
-        targetSdkVersion = 28
-        supportLibVersion = "28.0.0"
-    }
     repositories {
-        google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.4.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
@@ -23,16 +15,10 @@ buildscript {
 allprojects {
     repositories {
         mavenLocal()
+        jcenter()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("$rootDir/../node_modules/react-native/android")
+            url "$rootDir/../node_modules/react-native/android"
         }
-        maven {
-            // Android JSC is installed from npm
-            url("$rootDir/../node_modules/jsc-android/dist")
-        }
-
-        google()
-        jcenter()
     }
 }

examples/android/gradle.properties

@@ -17,8 +17,4 @@
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
-android.useAndroidX=true
+android.useDeprecatedNdk=true
-android.enableJetifier=true
-
-# Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.23.4

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

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

examples/android/gradlew

@@ -1,20 +1,4 @@
-#!/usr/bin/env sh
+#!/usr/bin/env bash
-
-#
-# Copyright 2015 the original author or authors.
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#      http://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
 
 ##############################################################################
 ##
@@ -22,6 +6,47 @@
 ##
 ##############################################################################
 
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn ( ) {
+    echo "$*"
+}
+
+die ( ) {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+esac
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi
+
 # Attempt to set APP_HOME
 # Resolve links: $0 may be a link
 PRG="$0"
@@ -36,49 +61,9 @@ while [ -h "$PRG" ] ; do
     fi
 done
 SAVED="`pwd`"
-cd "`dirname \"$PRG\"`/" >/dev/null
+cd "`dirname \"$PRG\"`/" >&-
 APP_HOME="`pwd -P`"
-cd "$SAVED" >/dev/null
+cd "$SAVED" >&-
-
-APP_NAME="Gradle"
-APP_BASE_NAME=`basename "$0"`
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD="maximum"
-
-warn () {
-    echo "$*"
-}
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-}
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "`uname`" in
-  CYGWIN* )
-    cygwin=true
-    ;;
-  Darwin* )
-    darwin=true
-    ;;
-  MINGW* )
-    msys=true
-    ;;
-  NONSTOP* )
-    nonstop=true
-    ;;
-esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
@@ -105,7 +90,7 @@ location of your Java installation."
 fi
 
 # Increase the maximum file descriptors if we can.
-if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
     MAX_FD_LIMIT=`ulimit -H -n`
     if [ $? -eq 0 ] ; then
         if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
@@ -129,7 +114,6 @@ fi
 if $cygwin ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
-    JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath
     ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
@@ -170,19 +154,11 @@ if $cygwin ; then
     esac
 fi
 
-# Escape application args
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
-save () {
+function splitJvmOpts() {
-    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    JVM_OPTS=("$@")
-    echo " "
 }
-APP_ARGS=$(save "$@")
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
 
-# Collect all arguments for the java command, following the shell quoting and substitution rules
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
-eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
-
-# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-  cd "$(dirname "$0")"
-fi
-
-exec "$JAVACMD" "$@"

examples/android/gradlew.bat

@@ -1,19 +1,3 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
 @if "%DEBUG%" == "" @echo off
 @rem ##########################################################################
 @rem
@@ -24,14 +8,14 @@
 @rem Set local scope for the variables with windows NT shell
 if "%OS%"=="Windows_NT" setlocal
 
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
 set DIRNAME=%~dp0
 if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
 @rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 
@@ -62,9 +46,10 @@ echo location of your Java installation.
 goto fail
 
 :init
-@rem Get command-line arguments, handling Windows variants
+@rem Get command-line arguments, handling Windowz variants
 
 if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
 
 :win9xME_args
 @rem Slurp the command line arguments.
@@ -75,6 +60,11 @@ set _SKIP=2
 if "x%~1" == "x" goto execute
 
 set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
 
 :execute
 @rem Setup the command line

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 = 'examples'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
 include ':app'

examples/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-};

examples/components/AutoPlay/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { Text, View, StyleSheet } from 'react-native'
-import Swiper from 'react-native-swiper'
-
-const styles = StyleSheet.create({
-  wrapper: {},
-  slide1: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#9DD6EB'
-  },
-  slide2: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#97CAE5'
-  },
-  slide3: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#92BBD9'
-  },
-  text: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: 'bold'
-  }
-})
-
-export default () => (
-  <Swiper style={styles.wrapper} autoplay>
-    <View testID="Hello" style={styles.slide1}>
-      <Text style={styles.text}>Hello Swiper</Text>
-    </View>
-    <View testID="Beautiful" style={styles.slide2}>
-      <Text style={styles.text}>Beautiful</Text>
-    </View>
-    <View testID="Simple" style={styles.slide3}>
-      <Text style={styles.text}>And simple</Text>
-    </View>
-  </Swiper>
-)

examples/components/Basic/index.js

@@ -1,9 +1,13 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import {
+  Text,
+  View
+} from 'react-native'
 import Swiper from 'react-native-swiper'
 
 var styles = {
-  wrapper: {},
+  wrapper: {
+  },
   slide1: {
     flex: 1,
     justifyContent: 'center',
@@ -29,16 +33,14 @@ var styles = {
   }
 }
 
-export default () => (
+export default () => <Swiper style={styles.wrapper} showsButtons>
-  <Swiper style={styles.wrapper} showsButtons loop={false}>
+  <View style={styles.slide1}>
-    <View testID="Hello" style={styles.slide1}>
+    <Text style={styles.text}>Hello Swiper</Text>
-      <Text style={styles.text}>Hello Swiper</Text>
+  </View>
-    </View>
+  <View style={styles.slide2}>
-    <View testID="Beautiful" style={styles.slide2}>
+    <Text style={styles.text}>Beautiful</Text>
-      <Text style={styles.text}>Beautiful</Text>
+  </View>
-    </View>
+  <View style={styles.slide3}>
-    <View testID="Simple" style={styles.slide3}>
+    <Text style={styles.text}>And simple</Text>
-      <Text style={styles.text}>And simple</Text>
+  </View>
-    </View>
+</Swiper>
-  </Swiper>
-)

examples/components/DisableButton/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Text, View } from 'react-native'
-import Swiper from 'react-native-swiper'
-
-const 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
-    // disable button onPress behavior
-    disablePrevButton
-    disableNextButton
-    loop={false}
-  >
-    <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,5 +1,8 @@
 import React, { Component } from 'react'
-import { Text, View } from 'react-native'
+import {
+  Text,
+  View
+} from 'react-native'
 import Swiper from 'react-native-swiper'
 
 const styles = {
@@ -32,13 +35,13 @@ const styles = {
 }
 
 export default class extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = {
       items: []
     }
   }
-  componentDidMount() {
+  componentDidMount () {
     this.setState({
       items: [
         { title: 'Hello Swiper', css: styles.slide1 },
@@ -47,7 +50,7 @@ export default class extends Component {
       ]
     })
   }
-  render() {
+  render () {
     return (
       <Swiper showsButtons>
         {this.state.items.map((item, key) => {

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/LoadMinimal/index.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import { Text, View, Image, Dimensions, StyleSheet } from 'react-native'
-import Swiper from 'react-native-swiper'
-import { Model } from 'react-model'
-const { width } = Dimensions.get('window')
-const loading = require('./img/loading.gif')
-
-const styles = StyleSheet.create({
-  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
-  }
-})
-
-interface SlideState {
-  imgList: string[]
-  loadQueue: number[]
-}
-
-interface SlideActions {
-  loaded: number
-}
-
-const SlideSchema: ModelType<SlideState, SlideActions> = {
-  state: {
-    imgList: [
-      'https://www.mordeo.org/files/uploads/2016/10/Cute-Angry-Birds-Mobile-Wallpaper.jpg',
-      'http://www.glittergraphics.org/img/74/743564/cute-wallpapers-for-mobile.jpg',
-      'https://wallpapercave.com/wp/wp2807409.jpg',
-      'https://preppywallpapers.com/wp-content/uploads/2018/08/Gorgeous-iPhone-Wallpaper-Collection-11.jpg'
-    ],
-    loadQueue: [0, 0, 0, 0]
-  },
-  actions: {
-    loaded: index => {
-      return state => {
-        state.loadQueue[index] = 1
-      }
-    }
-  }
-}
-
-const Slide = props => {
-  return (
-    <View style={styles.slide}>
-      <Image
-        onLoad={() => {
-          props.loadHandle(props.i)
-        }}
-        style={styles.image}
-        source={{ uri: props.uri }}
-      />
-      {!props.loaded && (
-        <View style={styles.loadingView}>
-          <Image style={styles.loadingImage} source={loading} />
-        </View>
-      )}
-    </View>
-  )
-}
-
-const Page = () => {
-  const [{ useStore }] = useState(() => Model(SlideSchema))
-  const [state, actions] = useStore()
-  const loadHandle = useCallback((i: number) => {
-    actions.loaded(i)
-  }, [])
-  return (
-    <View style={{ flex: 1 }}>
-      <Swiper
-        loadMinimal
-        loadMinimalSize={1}
-        // index={0}
-        style={styles.wrapper}
-        loop={true}
-      >
-        {state.imgList.map((item, i) => (
-          <Slide
-            loadHandle={loadHandle}
-            uri={item}
-            i={i}
-            key={i}
-            loaded={state.loadQueue[i]}
-          />
-        ))}
-      </Swiper>
-      <View>
-        <Text>Current Loaded Images: {state.loadQueue}</Text>
-      </View>
-    </View>
-  )
-}
-
-export default Page

examples/components/Loop/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { Text, View, StyleSheet } from 'react-native'
-import Swiper from 'react-native-swiper'
-
-var styles = StyleSheet.create({
-  wrapper: {},
-  slide1: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#9DD6EB'
-  },
-  slide2: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#97CAE5'
-  },
-  slide3: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#92BBD9'
-  },
-  text: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: 'bold'
-  }
-})
-
-export default () => (
-  <Swiper style={styles.wrapper} loop={true} index={0} 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/NestSwiper/index.tsx

@@ -1,77 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { Text, View, StyleSheet, Dimensions } from 'react-native'
-import Swiper from 'react-native-swiper'
-
-var styles = StyleSheet.create({
-  wrapper: {},
-  slide1: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#9DD6EB'
-  },
-  slide2: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#97CAE5'
-  },
-  slide3: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#92BBD9'
-  },
-  text: {
-    color: '#fff',
-    fontSize: 30,
-    fontWeight: 'bold'
-  }
-})
-
-export default () => {
-  const swiper = useRef(null)
-  const [enable, setEnable] = useState(true)
-  return (
-    <Swiper
-      ref={swiper}
-      containerStyle={styles.wrapper}
-      scrollEnabled={enable}
-      index={0}
-      showsButtons
-    >
-      <View style={{ flex: 1, height: Dimensions.get('window').height }}>
-        <View style={{ height: 300 }}>
-          <Swiper
-            index={1}
-            onTouchStart={e => {
-              setEnable(false)
-            }}
-            onTouchEnd={e => {
-              setEnable(true)
-            }}
-            onMomentumScrollEnd={e => {
-              setEnable(true)
-            }}
-          >
-            <View style={styles.slide1}>
-              <Text style={styles.text}>Nested: Hello Swiper</Text>
-            </View>
-            <View style={styles.slide2}>
-              <Text style={styles.text}>Nested: Beautiful</Text>
-            </View>
-            <View style={styles.slide3}>
-              <Text style={styles.text}>Nested: And simple</Text>
-            </View>
-          </Swiper>
-        </View>
-      </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/Phone/index.js

@@ -1,5 +1,10 @@
 import React, { Component } from 'react'
-import { View, Image, StatusBar, Dimensions } from 'react-native'
+import {
+  View,
+  Image,
+  StatusBar,
+  Dimensions
+} from 'react-native'
 import Swiper from 'react-native-swiper'
 const { width, height } = Dimensions.get('window')
 
@@ -13,7 +18,7 @@ const styles = {
     backgroundColor: 'transparent'
   },
   container: {
-    flex: 1
+    flex: 1,
   },
 
   imgBackground: {
@@ -25,59 +30,38 @@ const styles = {
 
   image: {
     width,
-    height
+    height,
   }
 }
 
 export default class extends Component {
-  render() {
+  render () {
     return (
       <View style={styles.container}>
-        <StatusBar barStyle="light-content" />
+        <StatusBar barStyle='light-content' />
-        <Image source={require('./img/bg.jpg')} style={styles.imgBackground} />
+        <Image
-        <Swiper
+          source={require('./img/bg.jpg')}
-          style={styles.wrapper}
+          style={styles.imgBackground}
-          dot={
+        />
-            <View
+        <Swiper style={styles.wrapper}
-              style={{
+          dot={<View style={{backgroundColor: 'rgba(255,255,255,.3)', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}
-                backgroundColor: 'rgba(255,255,255,.3)',
+          activeDot={<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />}
-                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}
+          loop={false}>
-        >
           <View style={styles.slide}>
             <Image
               style={styles.image}
               source={require('./img/1.jpg')}
-              resizeMode="cover"
+              resizeMode='cover'
             />
           </View>
           <View style={styles.slide}>
             <Image
               style={styles.image}
               source={require('./img/2.jpg')}
-              resizeMode="cover"
+              resizeMode='cover'
             />
           </View>
           <View style={styles.slide}>

examples/components/PhotoView/index.js

@@ -48,62 +48,47 @@ var styles = {
 
 const renderPagination = (index, total, context) => {
   return (
-    <View
+    <View style={{
-      style={{
+      position: 'absolute',
-        position: 'absolute',
+      justifyContent: 'center',
-        justifyContent: 'center',
+      alignItems: 'center',
-        alignItems: 'center',
+      top: 25,
-        top: 25,
+      left: 0,
-        left: 0,
+      right: 0
-        right: 0
+    }}>
-      }}
+      <View style={{
-    >
+        borderRadius: 7,
-      <View
+        backgroundColor: 'rgba(255,255,255,.15)',
-        style={{
+        padding: 3,
-          borderRadius: 7,
+        paddingHorizontal: 7
-          backgroundColor: 'rgba(255,255,255,.15)',
+      }}>
-          padding: 3,
+        <Text style={{
-          paddingHorizontal: 7
+          color: '#fff',
-        }}
+          fontSize: 14
-      >
+        }}>{index + 1} / {total}</Text>
-        <Text
-          style={{
-            color: '#fff',
-            fontSize: 14
-          }}
-        >
-          {index + 1} / {total}
-        </Text>
       </View>
     </View>
   )
 }
 
-const Viewer = props => (
+const Viewer = props => <Swiper index={props.index} style={styles.wrapper} renderPagination={renderPagination}>
-  <Swiper
+  {
-    index={props.index}
+    props.imgList.map((item, i) => <View key={i} style={styles.slide}>
-    style={styles.wrapper}
+      <TouchableWithoutFeedback onPress={e => props.pressHandle()}>
-    renderPagination={renderPagination}
+        <PhotoView
-  >
+          source={{uri: item}}
-    {props.imgList.map((item, i) => (
+          resizeMode='contain'
-      <View key={i} style={styles.slide}>
+          minimumZoomScale={0.5}
-        <TouchableWithoutFeedback onPress={e => props.pressHandle()}>
+          maximumZoomScale={3}
-          <PhotoView
+          androidScaleType='center'
-            source={{ uri: item }}
+          style={styles.photo} />
-            resizeMode="contain"
+      </TouchableWithoutFeedback>
-            minimumZoomScale={0.5}
+    </View>)
-            maximumZoomScale={3}
+  }
-            androidScaleType="center"
+</Swiper>
-            style={styles.photo}
-          />
-        </TouchableWithoutFeedback>
-      </View>
-    ))}
-  </Swiper>
-)
 
 export default class extends Component {
-  constructor(props) {
+  constructor (props) {
     super(props)
     this.state = {
       imgList: [
@@ -117,35 +102,30 @@ export default class extends Component {
     this.viewerPressHandle = this.viewerPressHandle.bind(this)
     this.thumbPressHandle = this.thumbPressHandle.bind(this)
   }
-  viewerPressHandle() {
+  viewerPressHandle () {
     this.setState({
       showViewer: false
     })
   }
-  thumbPressHandle(i) {
+  thumbPressHandle (i) {
     this.setState({
       showIndex: i,
       showViewer: true
     })
   }
-  render() {
+  render () {
-    return (
+    return (<View style={{position: 'relative'}}>
-      <View style={{ position: 'relative' }}>
+      {this.state.showViewer && <Viewer
-        {this.state.showViewer && (
+        index={this.state.showIndex}
-          <Viewer
+        pressHandle={this.viewerPressHandle}
-            index={this.state.showIndex}
+        imgList={this.state.imgList} />}
-            pressHandle={this.viewerPressHandle}
+      <View style={styles.thumbWrap}>
-            imgList={this.state.imgList}
+        {
-          />
+          this.state.imgList.map((item, i) => <TouchableOpacity key={i} onPress={e => this.thumbPressHandle(i)}>
-        )}
+            <Image style={styles.thumb} source={{uri: item}} />
-        <View style={styles.thumbWrap}>
+          </TouchableOpacity>)
-          {this.state.imgList.map((item, i) => (
+        }
-            <TouchableOpacity key={i} onPress={e => this.thumbPressHandle(i)}>
-              <Image style={styles.thumb} source={{ uri: item }} />
-            </TouchableOpacity>
-          ))}
-        </View>
       </View>
-    )
+    </View>)
   }
 }

examples/components/Swiper/index.js

@@ -1,5 +1,10 @@
 import React, { Component } from 'react'
-import { Text, View, Image, Dimensions } from 'react-native'
+import {
+  Text,
+  View,
+  Image,
+  Dimensions
+} from 'react-native'
 import Swiper from 'react-native-swiper'
 const { width } = Dimensions.get('window')
 
@@ -8,7 +13,8 @@ const styles = {
     flex: 1
   },
 
-  wrapper: {},
+  wrapper: {
+  },
 
   slide: {
     flex: 1,
@@ -50,7 +56,7 @@ const styles = {
 }
 
 export default class extends Component {
-  render() {
+  render () {
     return (
       <View style={styles.container}>
         <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay>
@@ -65,92 +71,24 @@ export default class extends Component {
           </View>
         </Swiper>
 
-        <Swiper
+        <Swiper style={styles.wrapper} height={240}
-          style={styles.wrapper}
+          onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
-          height={240}
+          dot={<View style={{backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
-          onMomentumScrollEnd={(e, state, context) =>
+          activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
-            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,
+            bottom: -23, left: null, right: 10
-            left: null,
+          }} loop>
-            right: 10
+          <View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
-          }}
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/1.jpg')} />
-          loop
-        >
-          <View
-            style={styles.slide}
-            title={
-              <Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>
-            }
-          >
-            <Image
-              resizeMode="stretch"
-              style={styles.image}
-              source={require('./img/1.jpg')}
-            />
           </View>
-          <View
+          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
-            style={styles.slide}
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/2.jpg')} />
-            title={
-              <Text numberOfLines={1}>Big lie behind Nine’s new show</Text>
-            }
-          >
-            <Image
-              resizeMode="stretch"
-              style={styles.image}
-              source={require('./img/2.jpg')}
-            />
           </View>
-          <View
+          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
-            style={styles.slide}
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/3.jpg')} />
-            title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}
-          >
-            <Image
-              resizeMode="stretch"
-              style={styles.image}
-              source={require('./img/3.jpg')}
-            />
           </View>
-          <View
+          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
-            style={styles.slide}
+            <Image resizeMode='stretch' style={styles.image} source={require('./img/4.jpg')} />
-            title={
-              <Text numberOfLines={1}>Learn from Kim K to land that job</Text>
-            }
-          >
-            <Image
-              resizeMode="stretch"
-              style={styles.image}
-              source={require('./img/4.jpg')}
-            />
           </View>
         </Swiper>
       </View>

examples/components/SwiperNumber/index.js

@@ -1,10 +1,16 @@
 import React, { Component } from 'react'
-import { Text, View, Image, Dimensions } from 'react-native'
+import {
+  Text,
+  View,
+  Image,
+  Dimensions
+} from 'react-native'
 import Swiper from 'react-native-swiper'
 const { width } = Dimensions.get('window')
 
 const styles = {
-  wrapper: {},
+  wrapper: {
+  },
   slide: {
     flex: 1,
     justifyContent: 'center',
@@ -41,42 +47,26 @@ const renderPagination = (index, total, context) => {
 }
 
 export default class extends Component {
-  render() {
+  render () {
     return (
-      <Swiper
+        <Swiper
-        style={styles.wrapper}
+          style={styles.wrapper}
-        renderPagination={renderPagination}
+          renderPagination={renderPagination}
-        loop={false}
+          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 style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
-        </View>
+            <Image style={styles.image} source={require('./img/1.jpg')} />
-        <View
+          </View>
-          style={styles.slide}
+          <View style={styles.slide} title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}>
-          title={<Text numberOfLines={1}>Big lie behind Nine’s new show</Text>}
+            <Image style={styles.image} source={require('./img/2.jpg')} />
-        >
+          </View>
-          <Image style={styles.image} source={require('./img/2.jpg')} />
+          <View style={styles.slide} title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}>
-        </View>
+            <Image style={styles.image} source={require('./img/3.jpg')} />
-        <View
+          </View>
-          style={styles.slide}
+          <View style={styles.slide} title={<Text numberOfLines={1}>Learn from Kim K to land that job</Text>}>
-          title={<Text numberOfLines={1}>Why Stone split from Garfield</Text>}
+            <Image style={styles.image} source={require('./img/4.jpg')} />
-        >
+          </View>
-          <Image style={styles.image} source={require('./img/3.jpg')} />
+        </Swiper>
-        </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/e2e/AutoPlay.spec.js

@@ -1,34 +0,0 @@
-describe('AutoPlay', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative()
-    await element(by.id('AutoPlay')).tap()
-  })
-
-  it('should execute scrollBy(1) every 2.5s', async () => {
-    // Initial with first swiper
-    await expect(element(by.id('Hello'))).toBeVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-    await expect(element(by.id('Simple'))).toBeNotVisible()
-
-    // after 2.5s => second swiper
-    await new Promise(r => setTimeout(r, 2500))
-
-    await expect(element(by.id('Hello'))).toBeNotVisible()
-    await expect(element(by.id('Beautiful'))).toBeVisible()
-    await expect(element(by.id('Simple'))).toBeNotVisible()
-
-    // after 5s => second swiper
-    await new Promise(r => setTimeout(r, 2500))
-
-    await expect(element(by.id('Hello'))).toBeNotVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-    await expect(element(by.id('Simple'))).toBeVisible()
-
-    // after 7.5s => second swiper
-    await new Promise(r => setTimeout(r, 2500))
-
-    await expect(element(by.id('Hello'))).toBeVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-    await expect(element(by.id('Simple'))).toBeNotVisible()
-  })
-})

examples/e2e/Basic.spec.js

@@ -1,32 +0,0 @@
-describe('Basic', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative()
-    await element(by.id('Basic')).tap()
-  })
-
-  it('should have Basic swiper', async () => {
-    await expect(element(by.id('Hello'))).toBeVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-    await expect(element(by.id('Simple'))).toBeNotVisible()
-  })
-
-  it('should be the same swiper after swipe right when loop={false}', async () => {
-    await element(by.id('Hello')).swipe('right')
-    await expect(element(by.id('Hello'))).toBeVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-  })
-
-  it('should be Beautiful swiper after swipe left', async () => {
-    await element(by.id('Hello')).swipe('left')
-    await expect(element(by.id('Hello'))).toBeNotVisible()
-    await expect(element(by.id('Beautiful'))).toBeVisible()
-  })
-
-  it('should be Simple swiper after swipe left twice', async () => {
-    await element(by.id('Hello')).swipe('left')
-    await element(by.id('Beautiful')).swipe('left')
-    await expect(element(by.id('Hello'))).toBeNotVisible()
-    await expect(element(by.id('Beautiful'))).toBeNotVisible()
-    await expect(element(by.id('Simple'))).toBeVisible()
-  })
-})

examples/e2e/NestSwiper.spec.js

@@ -1,6 +0,0 @@
-describe('AutoPlay', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative()
-    await element(by.id('NestSwiper')).tap()
-  })
-}

examples/e2e/config.json

@@ -1,6 +0,0 @@
-{
-    "setupFilesAfterEnv": ["./init.js"],
-    "testEnvironment": "node",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
-}

examples/e2e/init.js

@@ -1,25 +0,0 @@
-const detox = require('detox');
-const config = require('../package.json').detox;
-const adapter = require('detox/runners/jest/adapter');
-const specReporter = require('detox/runners/jest/specReporter');
-
-// Set the default timeout
-jest.setTimeout(120000);
-jasmine.getEnv().addReporter(adapter);
-
-// This takes care of generating status logs on a per-spec basis. By default, jest only reports at file-level.
-// This is strictly optional.
-jasmine.getEnv().addReporter(specReporter);
-
-beforeAll(async () => {
-  await detox.init(config);
-});
-
-beforeEach(async () => {
-  await adapter.beforeEach();
-});
-
-afterAll(async () => {
-  await adapter.afterAll();
-  await detox.cleanup();
-});

examples/index.android.js

@@ -0,0 +1 @@
+import './App'

examples/index.ios.js

@@ -0,0 +1 @@
+import './App'

examples/index.tsx

@@ -1,120 +0,0 @@
-/**
- * @format
- */
-import React from 'react'
-import {
-  AppRegistry,
-  Text,
-  SafeAreaView,
-  View,
-  StyleSheet,
-  FlatList,
-  TouchableOpacity
-} from 'react-native'
-import { createStackNavigator } from 'react-navigation-stack'
-import { name as appName } from './app.json'
-
-import AutoPlay from './components/AutoPlay'
-import Basic from './components/Basic' // Only update index when scrollEnd
-import DisableButton from './components/DisableButton'
-import Loop from './components/Loop'
-import Dynamic from './components/Dynamic'
-import LoadMinimal from './components/LoadMinimal' // flicker existing when shift from last to first on Android (or last to first)
-import NestSwiper from './components/NestSwiper'
-import Phone from './components/Phone'
-// import PhotoView from './components/PhotoView/'; // not working
-import Swiper from './components/Swiper' // working but no title displayed, direction vertical not work well on android
-import SwiperNumber from './components/SwiperNumber' // working but no title displayed
-import { createAppContainer } from 'react-navigation'
-
-const DATA = [
-  {
-    name: 'AutoPlay'
-  },
-  {
-    name: 'Basic'
-  },
-  {
-    name: 'DisableButton'
-  },
-  {
-    name: 'Dynamic'
-  },
-  {
-    name: 'Loop'
-  },
-  {
-    name: 'LoadMinimal'
-  },
-  {
-    name: 'NestSwiper'
-  },
-  {
-    name: 'Phone'
-  },
-  {
-    name: 'Swiper'
-  },
-  {
-    name: 'SwiperNumber'
-  }
-]
-
-function Item({ title, navigation }) {
-  return (
-    <TouchableOpacity onPress={() => navigation.navigate(title)}>
-      <View testID={title} style={styles.item}>
-        <Text style={styles.title}>{title}</Text>
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-const Home = ({ navigation }) => {
-  return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <FlatList
-        data={DATA}
-        renderItem={({ item }) => (
-          <Item navigation={navigation} title={item.name}></Item>
-        )}
-        keyExtractor={item => item.name}
-      />
-    </SafeAreaView>
-  )
-}
-
-const AppNavigator = createStackNavigator(
-  {
-    Home,
-    AutoPlay,
-    Basic,
-    DisableButton,
-    Loop,
-    Dynamic,
-    LoadMinimal,
-    NestSwiper,
-    Phone,
-    Swiper,
-    SwiperNumber
-  },
-  {
-    initialRouteName: 'Home'
-  }
-)
-
-const App = createAppContainer(AppNavigator)
-
-const styles = StyleSheet.create({
-  item: {
-    backgroundColor: '#ede',
-    padding: 16,
-    marginVertical: 8,
-    marginHorizontal: 16
-  },
-  title: {
-    fontSize: 24
-  }
-})
-
-AppRegistry.registerComponent(appName, () => App)

examples/ios/Podfile

@@ -1,46 +0,0 @@
-platform :ios, '9.0'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
-
-target 'examples' do
-  # Pods for examples
-  pod 'React', :path => '../node_modules/react-native/'
-  pod 'React-Core', :path => '../node_modules/react-native/React'
-  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
-  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
-  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
-
-  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
-
-  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
-
-  target 'examplesTests' do
-    inherit! :search_paths
-    # Pods for testing
-  end
-
-  use_native_modules!
-end
-
-target 'examples-tvOS' do
-  # Pods for examples-tvOS
-
-  target 'examples-tvOSTests' do
-    inherit! :search_paths
-    # Pods for testing
-  end
-
-end

examples/ios/Podfile.lock

@@ -1,199 +0,0 @@
-PODS:
-  - boost-for-react-native (1.63.0)
-  - DoubleConversion (1.1.6)
-  - Folly (2018.10.22.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - Folly/Default (= 2018.10.22.00)
-    - glog
-  - Folly/Default (2018.10.22.00):
-    - boost-for-react-native
-    - DoubleConversion
-    - glog
-  - glog (0.3.5)
-  - React (0.60.5):
-    - React-Core (= 0.60.5)
-    - React-DevSupport (= 0.60.5)
-    - React-RCTActionSheet (= 0.60.5)
-    - React-RCTAnimation (= 0.60.5)
-    - React-RCTBlob (= 0.60.5)
-    - React-RCTImage (= 0.60.5)
-    - React-RCTLinking (= 0.60.5)
-    - React-RCTNetwork (= 0.60.5)
-    - React-RCTSettings (= 0.60.5)
-    - React-RCTText (= 0.60.5)
-    - React-RCTVibration (= 0.60.5)
-    - React-RCTWebSocket (= 0.60.5)
-  - React-Core (0.60.5):
-    - Folly (= 2018.10.22.00)
-    - React-cxxreact (= 0.60.5)
-    - React-jsiexecutor (= 0.60.5)
-    - yoga (= 0.60.5.React)
-  - React-cxxreact (0.60.5):
-    - boost-for-react-native (= 1.63.0)
-    - DoubleConversion
-    - Folly (= 2018.10.22.00)
-    - glog
-    - React-jsinspector (= 0.60.5)
-  - React-DevSupport (0.60.5):
-    - React-Core (= 0.60.5)
-    - React-RCTWebSocket (= 0.60.5)
-  - React-jsi (0.60.5):
-    - boost-for-react-native (= 1.63.0)
-    - DoubleConversion
-    - Folly (= 2018.10.22.00)
-    - glog
-    - React-jsi/Default (= 0.60.5)
-  - React-jsi/Default (0.60.5):
-    - boost-for-react-native (= 1.63.0)
-    - DoubleConversion
-    - Folly (= 2018.10.22.00)
-    - glog
-  - React-jsiexecutor (0.60.5):
-    - DoubleConversion
-    - Folly (= 2018.10.22.00)
-    - glog
-    - React-cxxreact (= 0.60.5)
-    - React-jsi (= 0.60.5)
-  - React-jsinspector (0.60.5)
-  - React-RCTActionSheet (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTAnimation (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTBlob (0.60.5):
-    - React-Core (= 0.60.5)
-    - React-RCTNetwork (= 0.60.5)
-    - React-RCTWebSocket (= 0.60.5)
-  - React-RCTImage (0.60.5):
-    - React-Core (= 0.60.5)
-    - React-RCTNetwork (= 0.60.5)
-  - React-RCTLinking (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTNetwork (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTSettings (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTText (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTVibration (0.60.5):
-    - React-Core (= 0.60.5)
-  - React-RCTWebSocket (0.60.5):
-    - React-Core (= 0.60.5)
-  - RNGestureHandler (1.4.1):
-    - React
-  - RNReanimated (1.3.0):
-    - React
-  - RNScreens (1.0.0-alpha.23):
-    - React
-  - yoga (0.60.5.React)
-
-DEPENDENCIES:
-  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
-  - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
-  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
-  - React (from `../node_modules/react-native/`)
-  - React-Core (from `../node_modules/react-native/React`)
-  - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
-  - React-DevSupport (from `../node_modules/react-native/React`)
-  - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
-  - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
-  - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
-  - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
-  - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
-  - React-RCTImage (from `../node_modules/react-native/Libraries/Image`)
-  - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`)
-  - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`)
-  - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`)
-  - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
-  - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
-  - React-RCTWebSocket (from `../node_modules/react-native/Libraries/WebSocket`)
-  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
-  - RNReanimated (from `../node_modules/react-native-reanimated`)
-  - RNScreens (from `../node_modules/react-native-screens`)
-  - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
-
-SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
-    - boost-for-react-native
-
-EXTERNAL SOURCES:
-  DoubleConversion:
-    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
-  Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
-  glog:
-    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
-  React:
-    :path: "../node_modules/react-native/"
-  React-Core:
-    :path: "../node_modules/react-native/React"
-  React-cxxreact:
-    :path: "../node_modules/react-native/ReactCommon/cxxreact"
-  React-DevSupport:
-    :path: "../node_modules/react-native/React"
-  React-jsi:
-    :path: "../node_modules/react-native/ReactCommon/jsi"
-  React-jsiexecutor:
-    :path: "../node_modules/react-native/ReactCommon/jsiexecutor"
-  React-jsinspector:
-    :path: "../node_modules/react-native/ReactCommon/jsinspector"
-  React-RCTActionSheet:
-    :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
-  React-RCTAnimation:
-    :path: "../node_modules/react-native/Libraries/NativeAnimation"
-  React-RCTBlob:
-    :path: "../node_modules/react-native/Libraries/Blob"
-  React-RCTImage:
-    :path: "../node_modules/react-native/Libraries/Image"
-  React-RCTLinking:
-    :path: "../node_modules/react-native/Libraries/LinkingIOS"
-  React-RCTNetwork:
-    :path: "../node_modules/react-native/Libraries/Network"
-  React-RCTSettings:
-    :path: "../node_modules/react-native/Libraries/Settings"
-  React-RCTText:
-    :path: "../node_modules/react-native/Libraries/Text"
-  React-RCTVibration:
-    :path: "../node_modules/react-native/Libraries/Vibration"
-  React-RCTWebSocket:
-    :path: "../node_modules/react-native/Libraries/WebSocket"
-  RNGestureHandler:
-    :path: "../node_modules/react-native-gesture-handler"
-  RNReanimated:
-    :path: "../node_modules/react-native-reanimated"
-  RNScreens:
-    :path: "../node_modules/react-native-screens"
-  yoga:
-    :path: "../node_modules/react-native/ReactCommon/yoga"
-
-SPEC CHECKSUMS:
-  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
-  Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
-  glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  React: 53c53c4d99097af47cf60594b8706b4e3321e722
-  React-Core: ba421f6b4f4cbe2fb17c0b6fc675f87622e78a64
-  React-cxxreact: 8384287780c4999351ad9b6e7a149d9ed10a2395
-  React-DevSupport: 197fb409737cff2c4f9986e77c220d7452cb9f9f
-  React-jsi: 4d8c9efb6312a9725b18d6fc818ffc103f60fec2
-  React-jsiexecutor: 90ad2f9db09513fc763bc757fdc3c4ff8bde2a30
-  React-jsinspector: e08662d1bf5b129a3d556eb9ea343a3f40353ae4
-  React-RCTActionSheet: b0f1ea83f4bf75fb966eae9bfc47b78c8d3efd90
-  React-RCTAnimation: 359ba1b5690b1e87cc173558a78e82d35919333e
-  React-RCTBlob: 5e2b55f76e9a1c7ae52b826923502ddc3238df24
-  React-RCTImage: f5f1c50922164e89bdda67bcd0153952a5cfe719
-  React-RCTLinking: d0ecbd791e9ddddc41fa1f66b0255de90e8ee1e9
-  React-RCTNetwork: e26946300b0ab7bb6c4a6348090e93fa21f33a9d
-  React-RCTSettings: d0d37cb521b7470c998595a44f05847777cc3f42
-  React-RCTText: b074d89033583d4f2eb5faf7ea2db3a13c7553a2
-  React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
-  React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
-  RNGestureHandler: 4cb47a93019c1a201df2644413a0a1569a51c8aa
-  RNReanimated: 6abbbae2e5e72609d85aabd92a982a94566885f1
-  RNScreens: f28b48b8345f2f5f39ed6195518291515032a788
-  yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
-
-PODFILE CHECKSUM: a3a53e6abc12f076194e8f2e182cc122fa168741
-
-COCOAPODS: 1.7.5

examples/ios/examples-tvOS/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -22,19 +22,6 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -49,5 +36,19 @@
 	</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/examples.xcodeproj/xcshareddata/xcschemes/examples-tvOS.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0940"
+   LastUpgradeVersion = "0820"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "NO"

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0940"
+   LastUpgradeVersion = "0620"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "NO"

examples/ios/examples.xcworkspace/contents.xcworkspacedata

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "group:examples.xcodeproj">
-   </FileRef>
-   <FileRef
-      location = "group:Pods/Pods.xcodeproj">
-   </FileRef>
-</Workspace>

examples/ios/examples/AppDelegate.h

@@ -1,14 +1,15 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
  *
- * This source code is licensed under the MIT license found in the
+ * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-#import <React/RCTBridgeDelegate.h>
 #import <UIKit/UIKit.h>
 
-@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
 

examples/ios/examples/AppDelegate.m

@@ -1,13 +1,14 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
  *
- * This source code is licensed under the MIT license found in the
+ * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  */
 
 #import "AppDelegate.h"
 
-#import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
@@ -15,11 +16,14 @@
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  NSURL *jsCodeLocation;
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
-                                                   moduleName:@"examples"
-                                            initialProperties:nil];
 
+  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      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];
@@ -30,13 +34,4 @@
   return YES;
 }
 
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-#if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-#else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-}
-
 @end

examples/ios/examples/Images.xcassets/Contents.json

@@ -1,6 +0,0 @@
-{
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

examples/ios/examples/Info.plist

@@ -9,7 +9,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -24,21 +24,6 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
-	<key>NSAppTransportSecurity</key>
-	<dict>
-		<key>NSAllowsArbitraryLoads</key>
-		<true/>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +38,19 @@
 	</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/examples/main.m

@@ -1,8 +1,10 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
  *
- * This source code is licensed under the MIT license found in the
+ * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  */
 
 #import <UIKit/UIKit.h>

examples/ios/examplesTests/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>

examples/ios/examplesTests/examplesTests.m

@@ -1,8 +1,10 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
  *
- * This source code is licensed under the MIT license found in the
+ * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  */
 
 #import <UIKit/UIKit.h>

examples/metro.config.js

@@ -1,17 +0,0 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};

examples/package.json

@@ -1,48 +1,31 @@
 {
-  "name": "examples",
+	"name": "examples",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "start": "rm -rf node_modules/react-native-swiper/examples && react-native start || react-native start",
+		"start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "jest",
+		"watch": "node ./scripts/watch-and-copy-src.js",
-    "lint": "eslint ."
+		"packager": "sh ./node_modules/react-native/packager/packager.sh --root ./node_modules/react-native-swiper",
-  },
+		"dev": "concurrently 'npm run watch' 'npm run packager'",
-  "dependencies": {
+		"test": "jest"
-    "react": "16.8.6",
+	},
-    "react-model": "^3.0.0",
+	"dependencies": {
-    "react-native": "0.60.5",
+		"react": "16.0.0-alpha.12",
-    "react-native-gesture-handler": "^1.4.1",
+		"react-native": "0.48.4",
-    "react-native-reanimated": "^1.3.0",
+		"react-native-swiper": "../"
-    "react-native-screens": "^1.0.0-alpha.23",
+	},
-    "react-native-swiper": "../",
+	"devDependencies": {
-    "react-navigation": "^4.0.10",
+		"babel-jest": "20.0.3",
-    "react-navigation-stack": "^1.9.3"
+		"babel-preset-react-native": "2.1.0",
-  },
+		"concurrently": "^2.2.0",
-  "devDependencies": {
+		"fs-extra": "^0.30.0",
-    "@babel/core": "^7.6.0",
+		"jest": "20.0.4",
-    "@babel/runtime": "^7.6.0",
+		"minimatch": "^3.0.2",
-    "@react-native-community/eslint-config": "^0.0.5",
+		"node-watch": "^0.4.0",
-    "@types/react": "^16.9.2",
+		"react-test-renderer": "16.0.0-alpha.12",
-    "@types/react-native": "^0.60.15",
+		"rimraf": "^2.5.4"
-    "babel-jest": "^24.9.0",
+	},
-    "detox": "^14.3.4",
+	"jest": {
-    "eslint": "^6.4.0",
+		"preset": "react-native"
-    "jest": "^24.9.0",
+	}
-    "metro-react-native-babel-preset": "^0.56.0",
-    "react-test-renderer": "16.8.6"
-  },
-  "jest": {
-    "preset": "react-native"
-  },
-  "detox": {
-    "test-runner": "jest",
-    "configurations": {
-      "ios.sim.debug": {
-        "binaryPath": "ios/build/examples/Build/Products/Debug-iphonesimulator/examples.app",
-        "build": "xcodebuild -workspace ios/examples.xcworkspace -scheme examples -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
-        "type": "ios.simulator",
-        "name": "iPhone 7"
-      }
-    }
-  }
 }

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'
+)

index.d.ts

@@ -1,147 +1,106 @@
-import {
-  ViewStyle,
-  StyleProp,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  ScrollViewProps
-} from 'react-native'
-import { Component } from 'react'
-
 declare module 'react-native-swiper' {
-  interface SwiperStates {
+    import { ViewStyle } from 'react-native'
-    autoplayEnd: false
+    import { Component } from 'react'
-    loopJump: false
+
-    width: number
+    interface SwiperProps {
-    height: number
+        // Basic
-    offset: {
+        // If true, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
-      x: number
+        horizontal?: boolean
-      y: number
+        // 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
     }
-    total: number
-    index: number
-    dir: 'x' | 'y'
-  }
 
-  interface SwiperInternals extends SwiperStates {
+    export default class Swiper extends Component<SwiperProps, any> {
-    isScrolling: boolean
+    }
-  }
-
-  interface SwiperProps
-    extends Omit<ScrollViewProps, 'onScrollBeginDrag' | 'onMomentumScrollEnd'> {
-    // 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?: (index: number) => void
-
-    // 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?: StyleProp<ViewStyle>
-    // Customize the View container.
-    containerStyle?: StyleProp<ViewStyle>
-    // Only load current index slide , loadMinimalSize slides before and after.
-    loadMinimal?: boolean
-    // see loadMinimal
-    loadMinimalSize?: number
-    // Custom loader to display when slides aren't loaded
-    loadMinimalLoader?: React.ReactNode
-
-    // Pagination
-    // Set to true make pagination visible.
-    showsPagination?: boolean
-    // Custom styles will merge with the default styles.
-    paginationStyle?: StyleProp<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
-    ) => React.ReactNode
-    // Allow custom the dot element.
-    dot?: React.ReactNode
-    // Allow custom the active-dot element.
-    activeDot?: React.ReactNode
-    // Allow custom the active-dot element.
-    dotStyle?: StyleProp<ViewStyle>
-    // Allow custom the active-dot element.
-    dotColor?: string
-    // Allow custom the active-dot element.
-    activeDotColor?: string
-    // Allow custom the active-dot element.
-    activeDotStyle?: StyleProp<ViewStyle>
-
-    // Autoplay
-    // Delay between auto play transitions (in second).
-    autoplayTimeout?: number
-    // Cycle direction control.
-    autoplayDirection?: boolean
-
-    // Control buttons
-    // Set to true make control buttons visible.
-    buttonWrapperStyle?: StyleProp<ViewStyle>
-    // Allow custom the next button.
-    nextButton?: React.ReactNode
-    // Allow custom the prev button.
-    prevButton?: React.ReactNode
-
-    // Supported ScrollResponder
-    // When animation begins after letting up
-    onScrollBeginDrag?: (
-      e: NativeSyntheticEvent<NativeScrollEvent>,
-      state: SwiperInternals,
-      swiper: Swiper
-    ) => void
-    // Makes no sense why this occurs first during bounce
-    onMomentumScrollEnd?: (
-      e: NativeSyntheticEvent<NativeScrollEvent>,
-      state: SwiperInternals,
-      swiper: Swiper
-    ) => void
-    // 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> {
-    scrollBy: (index?: number, animated?: boolean) => void
-    scrollTo: (index: number, animated?: boolean) => void
-  }
 }

index.js

@@ -1,10 +1,2 @@
 import Swiper from './src/'
-/**
+module.exports = Swiper
- * Resolve ES6 and CommonJS compatibility issues
- * 1. CommonJS code
- *    const Swiper = require('react-native-swiper');
- * 2. ES6 code
- *    import Swiper from 'react-native-swiper';
- */
-module.exports = Swiper;
-module.exports.default = Swiper;

index.js.flow

@@ -1,111 +0,0 @@
-// @flow strict
-
-// eslint-disable-next-line
-import { Component, type Node } from 'react';
-
-declare module 'react-native-swiper' {
-  // eslint-disable-next-line no-undef
-  declare export type SwiperProps = $ReadOnly<{|
-    // 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?: ?(index?: number) => void,
-
-    // 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?: ?Object,
-    // 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?: ?Object,
-    // 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, context: any) => Node,
-    // Allow custom the dot element.
-    dot?: ?Node,
-    // Allow custom the active-dot element.
-    activeDot?: ?Node,
-    // 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,
-
-    // Autoplay
-    // Delay between auto play transitions (in second).
-    autoplayTimeout?: ?number,
-    // Cycle direction control.
-    autoplayDirection?: ?boolean,
-
-    // Control buttons
-    // Set to true make control buttons visible.
-    buttonWrapperStyle?: ?Object,
-    // Allow custom the next button.
-    nextButton?: ?Node,
-    // Allow custom the prev button.
-    prevButton?: ?Node,
-
-    // Supported ScrollResponder
-    // When animation begins after letting up
-    onScrollBeginDrag?: ?(event?: any, state?: any, context?: any) => void,
-    // Makes no sense why this occurs first during bounce
-    onMomentumScrollEnd?: ?(event?: any, state?: any, context?: any) => void,
-    // Immediately after onMomentumScrollEnd
-    onTouchStartCapture?: ?(event?: any, state?: any, context?: any) => void,
-    // Same, but bubble phase
-    onTouchStart?: ?(event?: any, state?: any, context?: any) => void,
-    // You could hold the touch start for a long time
-    onTouchEnd?: ?(event?: any, state?: any, context?: any) => void,
-    // When lifting up - you could pause forever before * lifting
-    onResponderRelease?: ?(event?: any, state?: any, context?: any) => void,
-
-    // 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
-  |}>;
-
-  // eslint-disable-next-line no-undef
-  declare export default class Swiper extends Component<SwiperProps> {
-    scrollBy(index: number, animated?: boolean): void;
-  }
-}

package.json

@@ -5,11 +5,10 @@
     "react-native",
     "ios"
   ],
-  "version": "1.6.0-rc.2",
+  "version": "1.5.13",
   "description": "Swiper component for React Native.",
   "main": "index.js",
   "scripts": {
-    "commit": "npx git-cz",
     "start": "react-native start",
     "lint": "standard | snazzy",
     "update": "updtr",
@@ -47,7 +46,7 @@
     "url": "git+https://github.com/leecade/react-native-swiper.git"
   },
   "author": "",
-  "license": "MIT",
+  "license": "ISC",
   "bugs": {
     "url": "https://github.com/leecade/react-native-swiper/issues"
   },
@@ -55,16 +54,11 @@
   "devDependencies": {
     "babel-eslint": "^8.0.1",
     "rimraf": "^2.5.4",
-    "snazzy": "^7.1.0",
+    "snazzy": "^6.0.0",
-    "standard": "^13.0.1",
+    "standard": "^10.0.3",
     "updtr": "^2.0.0"
   },
   "dependencies": {
     "prop-types": "^15.5.10"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
   }
 }

src/index.js

@@ -11,6 +11,7 @@ import {
   ScrollView,
   Dimensions,
   TouchableOpacity,
+  ViewPagerAndroid,
   Platform,
   ActivityIndicator
 } from 'react-native'
@@ -27,7 +28,7 @@ const styles = {
   },
 
   wrapperIOS: {
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
 
   wrapperAndroid: {
@@ -36,7 +37,7 @@ const styles = {
   },
 
   slide: {
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
   },
 
   pagination_x: {
@@ -90,7 +91,8 @@ const styles = {
 
   buttonText: {
     fontSize: 50,
-    color: '#007aff'
+    color: '#007aff',
+    fontFamily: 'Arial'
   }
 }
 
@@ -104,13 +106,18 @@ export default class extends Component {
   static propTypes = {
     horizontal: PropTypes.bool,
     children: PropTypes.node.isRequired,
-    containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    containerStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.number,
+    ]),
     style: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.number,
-      PropTypes.array
     ]),
-    scrollViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    scrollViewStyle: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.number,
+    ]),
     pagingEnabled: PropTypes.bool,
     showsHorizontalScrollIndicator: PropTypes.bool,
     showsVerticalScrollIndicator: PropTypes.bool,
@@ -121,7 +128,6 @@ export default class extends Component {
     showsPagination: PropTypes.bool,
     showsButtons: PropTypes.bool,
     disableNextButton: PropTypes.bool,
-    disablePrevButton: PropTypes.bool,
     loadMinimal: PropTypes.bool,
     loadMinimalSize: PropTypes.number,
     loadMinimalLoader: PropTypes.element,
@@ -131,16 +137,8 @@ export default class extends Component {
     autoplayDirection: PropTypes.bool,
     index: PropTypes.number,
     renderPagination: PropTypes.func,
-    dotStyle: PropTypes.oneOfType([
+    dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-      PropTypes.object,
+    activeDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-      PropTypes.number,
-      PropTypes.array
-    ]),
-    activeDotStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.number,
-      PropTypes.array
-    ]),
     dotColor: PropTypes.string,
     activeDotColor: PropTypes.string,
     /**
@@ -166,7 +164,6 @@ export default class extends Component {
     showsPagination: true,
     showsButtons: false,
     disableNextButton: false,
-    disablePrevButton: false,
     loop: true,
     loadMinimal: false,
     loadMinimalSize: 1,
@@ -196,70 +193,42 @@ export default class extends Component {
   autoplayTimer = null
   loopJumpTimer = null
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
-    if (!nextProps.autoplay && this.autoplayTimer)
+    if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
-      clearTimeout(this.autoplayTimer)
+    this.setState(this.initState(nextProps, this.props.index !== nextProps.index))
-    if (nextProps.index === this.props.index) return
-    this.setState(
-      this.initState(nextProps, this.props.index !== nextProps.index)
-    )
   }
 
-  componentDidMount() {
+  componentDidMount () {
     this.autoplay()
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     this.autoplayTimer && clearTimeout(this.autoplayTimer)
     this.loopJumpTimer && clearTimeout(this.loopJumpTimer)
   }
 
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  componentWillUpdate (nextProps, nextState) {
     // If the index has changed, we notify the parent via the onIndexChanged callback
-    if (this.state.index !== nextState.index)
+    if (this.state.index !== nextState.index) this.props.onIndexChanged(nextState.index)
-      this.props.onIndexChanged(nextState.index)
   }
 
-  componentDidUpdate(prevProps) {
+  initState (props, updateIndex = false) {
-    // If autoplay props updated to true, autoplay immediately
-    if (this.props.autoplay && !prevProps.autoplay) {
-      this.autoplay()
-    }
-    if (this.props.children !== prevProps.children) {
-      if (this.props.loadMinimal && Platform.OS === 'ios') {
-        this.setState({ ...this.props, index: this.state.index })
-      } else {
-        this.setState(
-          this.initState({ ...this.props, index: this.state.index }, true)
-        )
-      }
-    }
-  }
-
-  initState(props, updateIndex = false) {
     // set the current state
     const state = this.state || { width: 0, height: 0, offset: { x: 0, y: 0 } }
 
     const initState = {
       autoplayEnd: false,
-      children: null,
       loopJump: false,
       offset: {}
     }
 
-    // Support Optional render page
+    initState.total = props.children ? props.children.length || 1 : 0
-    initState.children = Array.isArray(props.children)
-      ? props.children.filter(child => child)
-      : props.children
-
-    initState.total = initState.children ? initState.children.length || 1 : 0
 
     if (state.total === initState.total && !updateIndex) {
       // retain the index
       initState.index = state.index
     } else {
-      initState.index =
+      initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
-        initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
     }
 
     // Default: horizontal
@@ -269,38 +238,40 @@ export default class extends Component {
 
     if (props.width) {
       initState.width = props.width
-    } else if (this.state && this.state.width) {
+    } else if (this.state && this.state.width){
       initState.width = this.state.width
     } else {
-      initState.width = width
+      initState.width = width;
     }
 
     if (props.height) {
       initState.height = props.height
-    } else if (this.state && this.state.height) {
+    } else if (this.state && this.state.height){
       initState.height = this.state.height
     } else {
-      initState.height = height
+      initState.height = height;
     }
 
-    initState.offset[initState.dir] =
+    initState.offset[initState.dir] = initState.dir === 'y'
-      initState.dir === 'y' ? height * props.index : width * props.index
+      ? height * props.index
+      : width * props.index
+
 
     this.internals = {
       ...this.internals,
       isScrolling: false
-    }
+    };
     return initState
   }
 
   // include internals with state
-  fullState() {
+  fullState () {
     return Object.assign({}, this.state, this.internals)
   }
 
-  onLayout = event => {
+  onLayout = (event) => {
     const { width, height } = event.nativeEvent.layout
-    const offset = (this.internals.offset = {})
+    const offset = this.internals.offset = {}
     const state = { width, height }
 
     if (this.state.total > 1) {
@@ -308,22 +279,25 @@ export default class extends Component {
       if (this.props.loop) {
         setup++
       }
-      offset[this.state.dir] =
+      offset[this.state.dir] = this.state.dir === 'y'
-        this.state.dir === 'y' ? height * setup : width * setup
+        ? height * setup
+        : width * setup
     }
 
     // only update the offset in state if needed, updating offset while swiping
     // causes some bad jumping / stuttering
-    if (!this.state.offset) {
+    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 (this.initialRender && this.state.total > 1) {
+    if (Platform.OS === 'ios') {
-      this.scrollView.scrollTo({ ...offset, animated: false })
+      if (this.initialRender && this.state.total > 1) {
-      this.initialRender = false
+        this.scrollView.scrollTo({...offset, animated: false})
+        this.initialRender = false;
+      }
     }
 
     this.setState(state)
@@ -333,59 +307,27 @@ export default class extends Component {
     if (!this.state.loopJump) return
     const i = this.state.index + (this.props.loop ? 1 : 0)
     const scrollView = this.scrollView
-    this.loopJumpTimer = setTimeout(
+    this.loopJumpTimer = setTimeout(() => scrollView.setPageWithoutAnimation &&
-      () => {
+      scrollView.setPageWithoutAnimation(i), 50)
-        if (scrollView.setPageWithoutAnimation) {
-          scrollView.setPageWithoutAnimation(i)
-        } else {
-          if (this.state.index === 0) {
-            scrollView.scrollTo(
-              this.props.horizontal === false
-                ? { x: 0, y: this.state.height, animated: false }
-                : { x: this.state.width, y: 0, animated: false }
-            )
-          } else if (this.state.index === this.state.total - 1) {
-            this.props.horizontal === false
-              ? this.scrollView.scrollTo({
-                  x: 0,
-                  y: this.state.height * this.state.total,
-                  animated: false
-                })
-              : this.scrollView.scrollTo({
-                  x: this.state.width * this.state.total,
-                  y: 0,
-                  animated: false
-                })
-          }
-        }
-      },
-      // Important Parameter
-      // ViewPager 50ms, ScrollView 300ms
-      scrollView.setPageWithoutAnimation ? 50 : 300
-    )
   }
 
   /**
    * Automatic rolling
    */
   autoplay = () => {
-    if (
+    if (!Array.isArray(this.props.children) ||
-      !Array.isArray(this.state.children) ||
       !this.props.autoplay ||
       this.internals.isScrolling ||
-      this.state.autoplayEnd
+      this.state.autoplayEnd) return
-    )
-      return
 
     this.autoplayTimer && clearTimeout(this.autoplayTimer)
     this.autoplayTimer = setTimeout(() => {
-      if (
+      if (!this.props.loop && (
-        !this.props.loop &&
+          this.props.autoplayDirection
-        (this.props.autoplayDirection
+            ? this.state.index === this.state.total - 1
-          ? this.state.index === this.state.total - 1
+            : this.state.index === 0
-          : 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)
@@ -398,8 +340,7 @@ export default class extends Component {
   onScrollBegin = e => {
     // update scroll state
     this.internals.isScrolling = true
-    this.props.onScrollBeginDrag &&
+    this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e, this.fullState(), this)
-      this.props.onScrollBeginDrag(e, this.fullState(), this)
   }
 
   /**
@@ -413,23 +354,19 @@ export default class extends Component {
     // making our events coming from android compatible to updateIndex logic
     if (!e.nativeEvent.contentOffset) {
       if (this.state.dir === 'x') {
-        e.nativeEvent.contentOffset = {
+        e.nativeEvent.contentOffset = {x: e.nativeEvent.position * this.state.width}
-          x: e.nativeEvent.position * this.state.width
-        }
       } else {
-        e.nativeEvent.contentOffset = {
+        e.nativeEvent.contentOffset = {y: e.nativeEvent.position * this.state.height}
-          y: e.nativeEvent.position * this.state.height
-        }
       }
     }
 
     this.updateIndex(e.nativeEvent.contentOffset, this.state.dir, () => {
       this.autoplay()
       this.loopJump()
+
+      // if `onMomentumScrollEnd` registered will be called here
+      this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.fullState(), this)
     })
-    // if `onMomentumScrollEnd` registered will be called here
-    this.props.onMomentumScrollEnd &&
-      this.props.onMomentumScrollEnd(e, this.fullState(), this)
   }
 
   /*
@@ -438,16 +375,14 @@ export default class extends Component {
    */
   onScrollEndDrag = e => {
     const { contentOffset } = e.nativeEvent
-    const { horizontal } = this.props
+    const { horizontal, children } = this.props
-    const { children, index } = this.state
+    const { index } = this.state
     const { offset } = this.internals
     const previousOffset = horizontal ? offset.x : offset.y
     const newOffset = horizontal ? contentOffset.x : contentOffset.y
 
-    if (
+    if (previousOffset === newOffset &&
-      previousOffset === newOffset &&
+      (index === 0 || index === children.length - 1)) {
-      (index === 0 || index === children.length - 1)
-    ) {
       this.internals.isScrolling = false
     }
   }
@@ -459,11 +394,7 @@ export default class extends Component {
    */
   updateIndex = (offset, dir, cb) => {
     const state = this.state
-    // Android ScrollView will not scrollTo certain offset when props change
     let index = state.index
-    if (!this.internals.offset)
-      // Android not setting this onLayout first? https://github.com/leecade/react-native-swiper/issues/582
-      this.internals.offset = {}
     const diff = offset[dir] - this.internals.offset[dir]
     const step = dir === 'x' ? state.width : state.height
     let loopJump = false
@@ -531,49 +462,11 @@ export default class extends Component {
     if (state.dir === 'x') x = diff * state.width
     if (state.dir === 'y') y = diff * state.height
 
-    this.scrollView && this.scrollView.scrollTo({ x, y, animated })
+    if (Platform.OS !== 'ios') {
-
+      this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
-    // update scroll state
+    } else {
-    this.internals.isScrolling = true
+      this.scrollView && this.scrollView.scrollTo({ x, y, animated })
-    this.setState({
-      autoplayEnd: false
-    })
-
-    // trigger onScrollEnd manually in android
-    if (!animated || Platform.OS !== 'ios') {
-      setImmediate(() => {
-        this.onScrollEnd({
-          nativeEvent: {
-            position: diff
-          }
-        })
-      })
     }
-  }
-
-  /**
-   * Scroll to index
-   * @param  {number} index page
-   * @param  {bool} animated
-   */
-
-  scrollTo = (index, animated = true) => {
-    if (
-      this.internals.isScrolling ||
-      this.state.total < 2 ||
-      index == this.state.index
-    )
-      return
-
-    const state = this.state
-    const diff = this.state.index + (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
-
-    this.scrollView && this.scrollView.scrollTo({ x, y, animated })
 
     // update scroll state
     this.internals.isScrolling = true
@@ -609,14 +502,13 @@ export default class extends Component {
 
     for (let prop in props) {
       // if(~scrollResponders.indexOf(prop)
-      if (
+      if (typeof props[prop] === 'function' &&
-        typeof props[prop] === 'function' &&
         prop !== 'onMomentumScrollEnd' &&
         prop !== 'renderPagination' &&
         prop !== 'onScrollBeginDrag'
       ) {
         let originResponder = props[prop]
-        overrides[prop] = e => originResponder(e, this.fullState(), this)
+        overrides[prop] = (e) => originResponder(e, this.fullState(), this)
       }
     }
 
@@ -628,79 +520,59 @@ export default class extends Component {
    * @return {object} react-dom
    */
   renderPagination = () => {
-    // By default, dots only show when `total` >= 2
+     // By default, dots only show when `total` >= 2
     if (this.state.total <= 1) return null
 
     let dots = []
-    const ActiveDot = this.props.activeDot || (
+    const ActiveDot = this.props.activeDot || <View style={[{
-      <View
+      backgroundColor: this.props.activeDotColor || '#007aff',
-        style={[
+      width: 8,
-          {
+      height: 8,
-            backgroundColor: this.props.activeDotColor || '#007aff',
+      borderRadius: 4,
-            width: 8,
+      marginLeft: 3,
-            height: 8,
+      marginRight: 3,
-            borderRadius: 4,
+      marginTop: 3,
-            marginLeft: 3,
+      marginBottom: 3
-            marginRight: 3,
+    }, this.props.activeDotStyle]} />
-            marginTop: 3,
+    const Dot = this.props.dot || <View style={[{
-            marginBottom: 3
+      backgroundColor: this.props.dotColor || 'rgba(0,0,0,.2)',
-          },
+      width: 8,
-          this.props.activeDotStyle
+      height: 8,
-        ]}
+      borderRadius: 4,
-      />
+      marginLeft: 3,
-    )
+      marginRight: 3,
-    const Dot = this.props.dot || (
+      marginTop: 3,
-      <View
+      marginBottom: 3
-        style={[
+    }, this.props.dotStyle ]} />
-          {
-            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(
+      dots.push(i === this.state.index
-        i === this.state.index
+        ? React.cloneElement(ActiveDot, {key: i})
-          ? React.cloneElement(ActiveDot, { key: i })
+        : React.cloneElement(Dot, {key: i})
-          : React.cloneElement(Dot, { key: i })
       )
     }
 
     return (
-      <View
+      <View pointerEvents='none' style={[styles['pagination_' + this.state.dir], this.props.paginationStyle]}>
-        pointerEvents="none"
-        style={[
-          styles['pagination_' + this.state.dir],
-          this.props.paginationStyle
-        ]}
-      >
         {dots}
       </View>
     )
   }
 
   renderTitle = () => {
-    const child = this.state.children[this.state.index]
+    const child = this.props.children[this.state.index]
     const title = child && child.props && child.props.title
-    return title ? (
+    return title
-      <View style={styles.title}>
+      ? (<View style={styles.title}>
-        {this.state.children[this.state.index].props.title}
+        {this.props.children[this.state.index].props.title}
-      </View>
+      </View>)
-    ) : null
+      : null
   }
 
   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>
     }
 
@@ -709,7 +581,9 @@ export default class extends Component {
         onPress={() => button !== null && this.scrollBy(1)}
         disabled={this.props.disableNextButton}
       >
-        <View>{button}</View>
+        <View>
+          {button}
+        </View>
       </TouchableOpacity>
     )
   }
@@ -722,28 +596,20 @@ export default class extends Component {
     }
 
     return (
-      <TouchableOpacity
+      <TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
-        onPress={() => button !== null && this.scrollBy(-1)}
+        <View>
-        disabled={this.props.disablePrevButton}
+          {button}
-      >
+        </View>
-        <View>{button}</View>
       </TouchableOpacity>
     )
   }
 
   renderButtons = () => {
     return (
-      <View
+      <View pointerEvents='box-none' style={[styles.buttonWrapper, {
-        pointerEvents="box-none"
+        width: this.state.width,
-        style={[
+        height: this.state.height
-          styles.buttonWrapper,
+      }, this.props.buttonWrapperStyle]}>
-          {
-            width: this.state.width,
-            height: this.state.height
-          },
-          this.props.buttonWrapperStyle
-        ]}
-      >
         {this.renderPrevButton()}
         {this.renderNextButton()}
       </View>
@@ -751,35 +617,34 @@ export default class extends Component {
   }
 
   refScrollView = view => {
-    this.scrollView = view
+    this.scrollView = view;
-  }
-
-  onPageScrollStateChanged = state => {
-    switch (state) {
-      case 'dragging':
-        return this.onScrollBegin()
-
-      case 'idle':
-      case 'settling':
-        if (this.props.onTouchEnd) this.props.onTouchEnd()
-    }
   }
 
   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
+      <ViewPagerAndroid ref={this.refScrollView}
-        ref={this.refScrollView}
         {...this.props}
-        {...this.scrollViewPropOverrides()}
+        initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
-        contentContainerStyle={[styles.wrapperIOS, this.props.style]}
+        onPageSelected={this.onScrollEnd}
-        contentOffset={this.state.offset}
+        key={pages.length}
-        onScrollBeginDrag={this.onScrollBegin}
+        style={[styles.wrapperAndroid, this.props.style]}>
-        onMomentumScrollEnd={this.onScrollEnd}
-        onScrollEndDrag={this.onScrollEndDrag}
-        style={this.props.scrollViewStyle}
-      >
         {pages}
-      </ScrollView>
+      </ViewPagerAndroid>
     )
   }
 
@@ -787,9 +652,17 @@ export default class extends Component {
    * Default render
    * @return {object} react-dom
    */
-  render() {
+  render () {
-    const { index, total, width, height, children } = this.state
+    const state = this.state
+    const props = this.props
     const {
+      index,
+      total,
+      width,
+      height
+    } = this.state;
+    const {
+      children,
       containerStyle,
       loop,
       loadMinimal,
@@ -797,14 +670,14 @@ export default class extends Component {
       loadMinimalLoader,
       renderPagination,
       showsButtons,
-      showsPagination
+      showsPagination,
-    } = this.props
+    } = this.props;
     // let dir = state.dir
     // let key = 0
     const loopVal = loop ? 1 : 0
     let pages = []
 
-    const pageStyle = [{ width: width, height: height }, styles.slide]
+    const pageStyle = [{width: width, height: height}, styles.slide]
     const pageStyleLoading = {
       width,
       height,
@@ -824,19 +697,9 @@ export default class extends Component {
 
       pages = pages.map((page, i) => {
         if (loadMinimal) {
-          if (
+          if (i >= (index + loopVal - loadMinimalSize) &&
-            (i >= index + loopVal - loadMinimalSize &&
+            i <= (index + loopVal + loadMinimalSize)) {
-              i <= index + loopVal + loadMinimalSize) ||
+            return <View style={pageStyle} key={i}>{children[page]}</View>
-            // The real first swiper should be keep
-            (loop && i === 1) ||
-            // The real last swiper should be keep
-            (loop && i === total - 1)
-          ) {
-            return (
-              <View style={pageStyle} key={i}>
-                {children[page]}
-              </View>
-            )
           } else {
             return (
               <View style={pageStyleLoading} key={i}>
@@ -845,28 +708,19 @@ export default class extends Component {
             )
           }
         } else {
-          return (
+          return <View style={pageStyle} key={i}>{children[page]}</View>
-            <View style={pageStyle} key={i}>
-              {children[page]}
-            </View>
-          )
         }
       })
     } else {
-      pages = (
+      pages = <View style={pageStyle} key={0}>{children}</View>
-        <View style={pageStyle} key={0}>
-          {children}
-        </View>
-      )
     }
 
     return (
       <View style={[styles.container, containerStyle]} onLayout={this.onLayout}>
         {this.renderScrollView(pages)}
-        {showsPagination &&
+        {showsPagination && (renderPagination
-          (renderPagination
+          ? renderPagination(index, total, this)
-            ? renderPagination(index, total, this)
+          : this.renderPagination())}
-            : this.renderPagination())}
         {this.renderTitle()}
         {showsButtons && this.renderButtons()}
       </View>