Compare commits
No commits in common. "master" and "bumpVersion" have entirely different histories.
master
...
bumpVersio
3
.gitignore
vendored
3
.gitignore
vendored
@ -39,6 +39,3 @@ examples/swiper.xcodeproj/xcuserdata
|
||||
# Vim
|
||||
*.sw*
|
||||
dist/
|
||||
|
||||
# yarn
|
||||
yarn.lock
|
||||
|
||||
10
.prettierrc
10
.prettierrc
@ -1,10 +0,0 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"bracketSpacing": true,
|
||||
"jsxBracketSameLine": false
|
||||
}
|
||||
136
CHANGELOG.md
136
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))
|
||||
- Fix wrong calculation of width and height after device rotation #581 (thanks [@kostyaVyrodov](https://github.com/kostyaVyrodov))
|
||||
- Calculated width & height on layout, used later on re-rendering. Possibility to change ScrollView styles #548 (thanks [@germanst](https://github.com/germanst))
|
||||
+ Workaround for react-native 0.4.8 contentOffset regression #572 (thanks @nixoz)
|
||||
+ Fix wrong calculation of width and height after device rotation #581 (thanks @kostyaVyrodov)
|
||||
+ Calculated width & height on layout, used later on re-rendering. Possibility to change ScrollView styles #548 (thanks @germanst)
|
||||
- [1.5.12]
|
||||
|
||||
- Update core packages
|
||||
- Optionally disable the 'next' control button (thanks [@SSTPIERRE2](https://github.com/SSTPIERRE2))
|
||||
- Fix `Uncaught TypeError: _this.refs.scrollView.scrollTo is not a function` (thanks [@flyskywhy](https://github.com/flyskywhy))
|
||||
- Allow dotStyle and activeDotStyle PropTypes to accept Stylesheet (thanks [@knopt](https://github.com/knopt))
|
||||
- Calculate the offset in the initial state instead of `onLayout` (thanks [@kjkta](https://github.com/kjkta))
|
||||
+ Update core packages
|
||||
+ Optionally disable the 'next' control button (thanks [@SSTPIERRE2](https://github.com/SSTPIERRE2))
|
||||
+ Fix `Uncaught TypeError: _this.refs.scrollView.scrollTo is not a function` (thanks [@flyskywhy](https://github.com/flyskywhy))
|
||||
+ Allow dotStyle and activeDotStyle PropTypes to accept Stylesheet (thanks [@knopt](https://github.com/knopt))
|
||||
+ Calculate the offset in the initial state instead of `onLayout` (thanks [@kjkta](https://github.com/kjkta))
|
||||
|
||||
- [1.5.11]
|
||||
|
||||
- Typescript Definition
|
||||
+ Typescript Definition
|
||||
|
||||
- [1.5.1]
|
||||
|
||||
- Allow scroll without animate, ref: [scrollBy(index, animated)](#scrollbyindex-animated)
|
||||
- Remove [#254](https://github.com/leecade/react-native-swiper/pull/254) which break the scroll direction in loop mode
|
||||
+ Allow scroll without animate, ref: [scrollBy(index, animated)](#scrollbyindex-animated)
|
||||
+ Remove [#254](https://github.com/leecade/react-native-swiper/pull/254) which break the scroll direction in loop mode
|
||||
|
||||
- [1.5.0]
|
||||
|
||||
- Improve develop [workflow](#development) for support watch & use real pkg name in examples
|
||||
- Update examples for support `React-native 0.33` + `Xcode8` + `ios10` + `iphone7`
|
||||
- Switch to [standard](https://github.com/feross/standard) code style
|
||||
- Rewrite source code with ES6 syntex
|
||||
- Cancel transform the source code when publish
|
||||
- Add a [demo](examples/components/LoadMinimal) for `loadMinimal` + `lazyload`
|
||||
- Add a [demo](examples/components/PhotoView) for multi-images viewer
|
||||
- [#254](https://github.com/leecade/react-native-swiper/pull/254) Fix jitter when quickly swiping back and forth between pages (iOS) (@thanks [@nemophrost](https://github.com/nemophrost)).
|
||||
+ Improve develop [workflow](#development) for support watch & use real pkg name in examples
|
||||
+ Update examples for support `React-native 0.33` + `Xcode8` + `ios10` + `iphone7`
|
||||
+ Switch to [standard](https://github.com/feross/standard) code style
|
||||
+ Rewrite source code with ES6 syntex
|
||||
+ Cancel transform the source code when publish
|
||||
+ Add a [demo](examples/components/LoadMinimal) for `loadMinimal` + `lazyload`
|
||||
+ Add a [demo](examples/components/PhotoView) for multi-images viewer
|
||||
+ [#254](https://github.com/leecade/react-native-swiper/pull/254) Fix jitter when quickly swiping back and forth between pages (iOS) (@thanks [@nemophrost](https://github.com/nemophrost)).
|
||||
|
||||
- [1.4.11]
|
||||
|
||||
- Adds loadMinimalSize property
|
||||
+ 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
|
||||
- Fixes examples links
|
||||
- Adds drag end handling to always reset state.isScrolling
|
||||
- Fixes float calculation error
|
||||
+ Don't attempt to mutate this.props
|
||||
+ Fixes examples links
|
||||
+ Adds drag end handling to always reset state.isScrolling
|
||||
+ Fixes float calculation error
|
||||
|
||||
- [1.4.6]
|
||||
|
||||
- refactors examples
|
||||
- prevents mutation of `this.props`
|
||||
- fixes android index loop issue
|
||||
+ refactors examples
|
||||
+ prevents mutation of `this.props`
|
||||
+ fixes android index loop issue
|
||||
|
||||
- [1.4.5]
|
||||
|
||||
- renames `scrollTo()` to `scrollBy()`
|
||||
- image index is now always an integer
|
||||
- prevents parent state updates from reseting index counter
|
||||
- fixes issue with scrolling not working sometimes
|
||||
+ renames `scrollTo()` to `scrollBy()`
|
||||
+ image index is now always an integer
|
||||
+ prevents parent state updates from reseting index counter
|
||||
+ fixes issue with scrolling not working sometimes
|
||||
|
||||
- [1.4.4]
|
||||
|
||||
- Support for React Native latest(`^0.26.0`)
|
||||
- Updates examples to work with react-native-swiper 1.4.4
|
||||
- Examples now run on Android (some are still buggy, needs more work)
|
||||
- Removes old examples folder
|
||||
+ Support for React Native latest(`^0.26.0`)
|
||||
+ Updates examples to work with react-native-swiper 1.4.4
|
||||
+ Examples now run on Android (some are still buggy, needs more work)
|
||||
+ Removes old examples folder
|
||||
|
||||
- [1.4.3]
|
||||
|
||||
- Fixed auto play issue when only a child view
|
||||
+ 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.
|
||||
- [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))
|
||||
+ [838b24c](https://github.com/leecade/react-native-swiper/commit/838b24cbeaf49b9ca1dabb4eed8305e314503fb1) Re-design a loop model for avoid img flickering.
|
||||
+ [9cb91c5](https://github.com/leecade/react-native-swiper/commit/9cb91c58c84034b0b8b874dbfc2a44da982686a8) fixes [#7](https://github.com/leecade/react-native-swiper/issues/6) `onMomentumScrollEnd` lost `event` param. (thanks [@smothers](https://github.com/smothers))
|
||||
|
||||
- [v1.1.1]
|
||||
|
||||
- [21f0b00](https://github.com/leecade/react-native-swiper/commit/21f0b00138b6936cd3dfac2eb107a14c99c7392b) fixes [#6](https://github.com/leecade/react-native-swiper/issues/6) a define-propType error. (thanks [@benjamingeorge](https://github.com/benjamingeorge))
|
||||
+ [21f0b00](https://github.com/leecade/react-native-swiper/commit/21f0b00138b6936cd3dfac2eb107a14c99c7392b) fixes [#6](https://github.com/leecade/react-native-swiper/issues/6) a define-propType error. (thanks [@benjamingeorge](https://github.com/benjamingeorge))
|
||||
|
||||
- [v1.1.0]
|
||||
|
||||
- [44ec630](https://github.com/leecade/react-native-swiper/commit/44ec630b62844dbeaccee73adaa0996e319ebffb) fixes [#4](https://github.com/leecade/react-native-swiper/issues/4) `onMoementumScrollEnd` gets overridden. (thanks [@subpublicanders](https://github.com/subpublicanders))
|
||||
- [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov))
|
||||
+ [44ec630](https://github.com/leecade/react-native-swiper/commit/44ec630b62844dbeaccee73adaa0996e319ebffb) fixes [#4](https://github.com/leecade/react-native-swiper/issues/4) `onMoementumScrollEnd` gets overridden. (thanks [@subpublicanders](https://github.com/subpublicanders))
|
||||
+ [5de06a7](https://github.com/leecade/react-native-swiper/commit/5de06a7aa86318ad38720728022b80e5cf98a2ab) New prop: `renderPagination`. (thanks [@aksonov](https://github.com/aksonov))
|
||||
|
||||
- [v1.0.4]
|
||||
|
||||
- [21cb373](https://github.com/leecade/react-native-swiper/commit/21cb3732578588f9d47ee7ddda541577ad691970) fixes [#2](https://github.com/leecade/react-native-swiper/issues/2) Solve the problem of installation. (thanks [@jamwaffles](https://github.com/jamwaffles))
|
||||
+ [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))
|
||||
|
||||
232
README.md
232
README.md
@ -22,45 +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-nightly]**
|
||||
- Dependency
|
||||
- Remove ViewPagerAndroid, use ScrollView #1009
|
||||
- TypeScript
|
||||
- correct the wrong types #1000
|
||||
- Add missing scrollBy TypeScript definition #931
|
||||
- New Feature
|
||||
- add scrollTo #831
|
||||
- Added prop to disable the PrevButton #749
|
||||
- Optionally render page #1004
|
||||
- Bug Fix
|
||||
- ES6 and CommonJS compatibility #717
|
||||
- Solves the issue of state messing up when parent component calls setState #939
|
||||
- replay when autoplay is setted to true #1002
|
||||
|
||||
* [1.5.6]
|
||||
|
||||
- Fix [#16](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 scrollEnabled prop to documentation (thanks [@ibandominguez](https://github.com/ibandominguez))
|
||||
+ Added easily accessible pagination point manipulation: use `dotColor` / `activeDotColor` and `dotStyle` / `activeDotStyle` (thanks [@denizs](https://github.com/denizs))
|
||||
+ Added scrollEnabled prop to documentation (thanks [@ibandominguez](https://github.com/ibandominguez))
|
||||
|
||||
- [1.5.3]
|
||||
|
||||
- Add loadMinimalLoader prop to customize `<ActivityIndicator />` (thanks [@Exilz](https://github.com/Exilz))
|
||||
- Disable autoplay timer when prop changes to false (thanks [@dizlexik](https://github.com/dizlexik))
|
||||
- Special thanks to [@hypatiah](https://github.com/dizlexik) for fixed some grammatical errors in README
|
||||
+ Add loadMinimalLoader prop to customize `<ActivityIndicator />` (thanks [@Exilz](https://github.com/Exilz))
|
||||
+ Disable autoplay timer when prop changes to false (thanks [@dizlexik](https://github.com/dizlexik))
|
||||
+ Special thanks to [@hypatiah](https://github.com/dizlexik) for fixed some grammatical errors in README
|
||||
|
||||
- [1.5.2]
|
||||
- Add yarn lock
|
||||
- Fix jitter when quickly swiping back and forth between pages (iOS) (thanks [@nemophrost](https://github.com/nemophrost))
|
||||
- The first webview always reloaded when injecting the rest of the children (thanks [@eosterberg](https://github.com/eosterberg))
|
||||
+ Add yarn lock
|
||||
+ Fix jitter when quickly swiping back and forth between pages (iOS) (thanks [@nemophrost](https://github.com/nemophrost))
|
||||
+ The first webview always reloaded when injecting the rest of the children (thanks [@eosterberg](https://github.com/eosterberg))
|
||||
|
||||
> see more: [CHANGELOG.md](CHANGELOG.md)
|
||||
|
||||
@ -88,36 +70,29 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Properties](#properties)
|
||||
- [Basic](#basic)
|
||||
- [Custom basic style & content](#custom-basic-style--content)
|
||||
- [Pagination](#pagination)
|
||||
- [Autoplay](#autoplay)
|
||||
- [Control buttons](#control-buttons)
|
||||
- [Props of Children](#props-of-children)
|
||||
- [Basic props of `<ScrollView />`](#basic-props-of-scrollview-)
|
||||
- [Supported ScrollResponder](#supported-scrollresponder)
|
||||
+ [Basic](#basic)
|
||||
+ [Custom basic style & content](#custom-basic-style--content)
|
||||
+ [Pagination](#pagination)
|
||||
+ [Autoplay](#autoplay)
|
||||
+ [Control buttons](#control-buttons)
|
||||
+ [Props of Children](#props-of-children)
|
||||
+ [Basic props of `<ScrollView />`](#basic-props-of-scrollview-)
|
||||
+ [Supported ScrollResponder](#supported-scrollresponder)
|
||||
- [Examples](#examples)
|
||||
- [Development](#development)
|
||||
|
||||
### Installation
|
||||
|
||||
> v1.5.14
|
||||
|
||||
```bash
|
||||
$ npm i react-native-swiper --save
|
||||
```
|
||||
|
||||
> v1.6.0-nightly
|
||||
|
||||
```
|
||||
npm i --save react-native-swiper@nightly
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
- Install `react-native` first
|
||||
@ -135,40 +110,46 @@ $ react-native init myproject
|
||||
- Then, edit `myproject/index.ios.js`, like this:
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
import { AppRegistry, StyleSheet, Text, View } from 'react-native'
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View
|
||||
} from 'react-native';
|
||||
|
||||
import Swiper from 'react-native-swiper'
|
||||
import Swiper from 'react-native-swiper';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
wrapper: {},
|
||||
var styles = StyleSheet.create({
|
||||
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 {
|
||||
render() {
|
||||
var swiper = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<Swiper style={styles.wrapper} showsButtons={true}>
|
||||
<View style={styles.slide1}>
|
||||
@ -183,100 +164,99 @@ export default class SwiperComponent extends Component {
|
||||
</Swiper>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
AppRegistry.registerComponent('myproject', () => SwiperComponent)
|
||||
AppRegistry.registerComponent('myproject', () => swiper);
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
#### Basic
|
||||
|
||||
| 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. |
|
||||
| loop | true | `bool` | Set to `false` to disable continuous loop mode. |
|
||||
| index | 0 | `number` | Index number of initial slide. |
|
||||
| showsButtons | false | `bool` | Set to `true` make control buttons visible. |
|
||||
| autoplay | false | `bool` | Set to `true` enable auto play mode. |
|
||||
| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped |
|
||||
| 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. |
|
||||
| loop | true | `bool` | Set to `false` to disable continuous loop mode. |
|
||||
| index | 0 | `number` | Index number of initial slide. |
|
||||
| showsButtons | false | `bool` | Set to `true` make control buttons visible. |
|
||||
| autoplay | false | `bool` | Set to `true` enable auto play mode. |
|
||||
| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped |
|
||||
|
||||
#### Custom basic style & content
|
||||
|
||||
| Prop | Default | Type | Description |
|
||||
| :---------------- | :---------------------: | :-------: | :------------------------------------------------------------------------- |
|
||||
| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |
|
||||
| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |
|
||||
| style | {...} | `style` | See default style in source. |
|
||||
| containerStyle | {...} | `style` | See default container style in source. |
|
||||
| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. |
|
||||
| loadMinimalSize | 1 | `number` | see `loadMinimal` |
|
||||
| loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded |
|
||||
| Prop | Default | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |
|
||||
| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |
|
||||
| style | {...} | `style` | See default style in source. |
|
||||
| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. |
|
||||
| loadMinimalSize | 1 | `number` | see `loadMinimal` |
|
||||
| loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded
|
||||
|
||||
#### Pagination
|
||||
|
||||
| Prop | Default | Type | Description |
|
||||
| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| showsPagination | true | `bool` | Set to `true` make pagination visible. |
|
||||
| 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. |
|
||||
| dot | `<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the dot element. |
|
||||
| activeDot | `<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the active-dot element. |
|
||||
| dotStyle | - | `object` | Allow custom the active-dot element. |
|
||||
| dotColor | - | `string` | Allow custom the active-dot element. |
|
||||
| activeDotColor | - | `string` | Allow custom the active-dot element. |
|
||||
| activeDotStyle | - | `object` | Allow custom the active-dot element. |
|
||||
| Prop | Default | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| showsPagination | true | `bool` | Set to `true` make pagination visible. |
|
||||
| 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. |
|
||||
| dot | `<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the dot element. |
|
||||
| activeDot | `<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />` | `element` | Allow custom the active-dot element. |
|
||||
| dotStyle | - | `object` | Allow custom the active-dot element. |
|
||||
| dotColor | - | `string` | Allow custom the active-dot element. |
|
||||
| activeDotColor | - | `string` | Allow custom the active-dot element. |
|
||||
| activeDotStyle | - | `object` | Allow custom the active-dot element. |
|
||||
|
||||
#### Autoplay
|
||||
|
||||
| Prop | Default | Type | Description |
|
||||
| :---------------- | :-----: | :------: | :----------------------------------------------- |
|
||||
| autoplay | true | `bool` | Set to `true` enable auto play mode. |
|
||||
| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). |
|
||||
| autoplayDirection | true | `bool` | Cycle direction control. |
|
||||
| Prop | Default | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| autoplay | true | `bool` | Set to `true` enable auto play mode. |
|
||||
| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). |
|
||||
| autoplayDirection | true | `bool` | Cycle direction control. |
|
||||
|
||||
#### Control buttons
|
||||
|
||||
| Prop | Default | Type | Description |
|
||||
| :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------: | :------------------------------------------ |
|
||||
| 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. |
|
||||
| nextButton | `<Text style={styles.buttonText}>›</Text>` | `element` | Allow custom the next button. |
|
||||
| prevButton | `<Text style={styles.buttonText}>‹</Text>` | `element` | Allow custom the prev button. |
|
||||
| Prop | Default | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| 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. |
|
||||
| nextButton | `<Text style={styles.buttonText}>›</Text>` | `element` | Allow custom the next button. |
|
||||
| prevButton | `<Text style={styles.buttonText}>‹</Text>` | `element` | Allow custom the prev button. |
|
||||
|
||||
#### Props of Children
|
||||
|
||||
| Prop | Default | Type | Description |
|
||||
| :---- | :----------------------------------: | :-------: | :------------------------------------------------------------- |
|
||||
| style | {...} | `style` | Custom styles will merge with the default styles. |
|
||||
| Prop | Default | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| 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 |
|
||||
| :------------------------------- | :-----: | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. |
|
||||
| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. |
|
||||
| scrollEnabled | true | `bool` | Enables/Disables swiping |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped. |
|
||||
| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. |
|
||||
| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. |
|
||||
| scrollEnabled | true | `bool` | Enables/Disables swiping |
|
||||
|
||||
> @see: http://facebook.github.io/react-native/docs/scrollview.html
|
||||
|
||||
#### Supported ScrollResponder
|
||||
|
||||
| Prop | Params | Type | Description |
|
||||
| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- |
|
||||
| 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 |
|
||||
| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` |
|
||||
| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase |
|
||||
| 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 |
|
||||
| Prop | Params | Type | Description |
|
||||
| :------------ |:---------------:| :---------------:| :-----|
|
||||
| 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 |
|
||||
| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` |
|
||||
| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase |
|
||||
| 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 |
|
||||
|
||||
> 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:
|
||||
|
||||
@ -306,10 +286,10 @@ Scroll by relative index.
|
||||
|
||||
Parameters:
|
||||
|
||||
| Name | Type | default | Description |
|
||||
| :------- | :------: | :---------: | :----------- |
|
||||
| index | `number` | `undefined` | offset index |
|
||||
| animated | `bool` | `true` | offset index |
|
||||
| Name | Type | default | Description |
|
||||
| :---- | :------: | :------: | :--- |
|
||||
| index | `number` | `undefined` | offset index |
|
||||
| animated | `bool` | `true` | offset index |
|
||||
|
||||
### Examples
|
||||
|
||||
|
||||
0
examples/android/gradlew
vendored
Normal file → Executable file
0
examples/android/gradlew
vendored
Normal file → Executable file
@ -2,10 +2,6 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@react-native-community/viewpager@^1.1.7":
|
||||
version "1.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@react-native-community/viewpager/-/viewpager-1.1.7.tgz#7d3b1631f1ec91145db92a8e25c80d53027e96ba"
|
||||
|
||||
abab@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
|
||||
@ -191,6 +187,10 @@ assert-plus@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
|
||||
|
||||
async@^1.4.0:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
|
||||
|
||||
async@^2.1.4, async@^2.4.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
|
||||
@ -1074,10 +1074,6 @@ commander@^2.9.0:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
commander@~2.20.0:
|
||||
version "2.20.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
|
||||
|
||||
compressible@~2.0.5:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.11.tgz#16718a75de283ed8e604041625a2064586797d8a"
|
||||
@ -1336,8 +1332,8 @@ detect-indent@^4.0.0:
|
||||
repeating "^2.0.0"
|
||||
|
||||
diff@^3.2.0:
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
|
||||
|
||||
dom-walk@^0.1.0:
|
||||
version "0.1.1"
|
||||
@ -1794,14 +1790,14 @@ gulplog@^1.0.0:
|
||||
glogg "^1.0.0"
|
||||
|
||||
handlebars@^4.0.3:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.2.tgz#b6b37c1ced0306b221e094fc7aca3ec23b131b67"
|
||||
version "4.0.10"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.10.tgz#3d30c718b09a3d96f23ea4cc1f403c4d3ba9ff4f"
|
||||
dependencies:
|
||||
neo-async "^2.6.0"
|
||||
async "^1.4.0"
|
||||
optimist "^0.6.1"
|
||||
source-map "^0.6.1"
|
||||
source-map "^0.4.4"
|
||||
optionalDependencies:
|
||||
uglify-js "^3.1.4"
|
||||
uglify-js "^2.6"
|
||||
|
||||
har-schema@^1.0.5:
|
||||
version "1.0.5"
|
||||
@ -2878,10 +2874,6 @@ negotiator@0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
|
||||
|
||||
neo-async@^2.6.0:
|
||||
version "2.6.1"
|
||||
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
|
||||
|
||||
node-fetch@^1.0.1, node-fetch@^1.3.3:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5"
|
||||
@ -3282,9 +3274,8 @@ react-devtools-core@^2.5.0:
|
||||
ws "^2.0.3"
|
||||
|
||||
react-native-swiper@../:
|
||||
version "1.6.0-nightly.1"
|
||||
version "1.5.12"
|
||||
dependencies:
|
||||
"@react-native-community/viewpager" "^1.1.7"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-native@0.48.4:
|
||||
@ -3772,14 +3763,16 @@ source-map-support@^0.4.2:
|
||||
dependencies:
|
||||
source-map "^0.5.6"
|
||||
|
||||
source-map@^0.4.4:
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
|
||||
dependencies:
|
||||
amdefine ">=0.0.4"
|
||||
|
||||
source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1:
|
||||
version "0.5.6"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
|
||||
|
||||
source-map@^0.6.1, source-map@~0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
|
||||
source-map@~0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
|
||||
@ -3876,8 +3869,8 @@ string_decoder@~1.0.3:
|
||||
safe-buffer "~5.1.0"
|
||||
|
||||
stringstream@~0.0.4:
|
||||
version "0.0.6"
|
||||
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.6.tgz#7880225b0d4ad10e30927d167a1d6f2fd3b33a72"
|
||||
version "0.0.5"
|
||||
resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
|
||||
|
||||
strip-ansi@^0.3.0:
|
||||
version "0.3.0"
|
||||
@ -4068,12 +4061,14 @@ uglify-js@2.7.5:
|
||||
uglify-to-browserify "~1.0.0"
|
||||
yargs "~3.10.0"
|
||||
|
||||
uglify-js@^3.1.4:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
|
||||
uglify-js@^2.6:
|
||||
version "2.8.29"
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
|
||||
dependencies:
|
||||
commander "~2.20.0"
|
||||
source-map "~0.6.1"
|
||||
source-map "~0.5.1"
|
||||
yargs "~3.10.0"
|
||||
optionalDependencies:
|
||||
uglify-to-browserify "~1.0.0"
|
||||
|
||||
uglify-to-browserify@~1.0.0:
|
||||
version "1.0.2"
|
||||
|
||||
243
index.d.ts
vendored
243
index.d.ts
vendored
@ -1,145 +1,106 @@
|
||||
import {
|
||||
ViewStyle,
|
||||
StyleProp,
|
||||
NativeSyntheticEvent,
|
||||
NativeScrollEvent
|
||||
} from 'react-native'
|
||||
import { Component } from 'react'
|
||||
|
||||
declare module 'react-native-swiper' {
|
||||
interface SwiperState {
|
||||
autoplayEnd: false
|
||||
loopJump: false
|
||||
width: number
|
||||
height: number
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
import { ViewStyle } from 'react-native'
|
||||
import { Component } from 'react'
|
||||
|
||||
interface SwiperProps {
|
||||
// Basic
|
||||
// If true, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
|
||||
horizontal?: boolean
|
||||
// If no specify default enable fullscreen mode by flex: 1.
|
||||
loop?: boolean
|
||||
// Index number of initial slide.
|
||||
index?: number
|
||||
// Set to true make control buttons visible.
|
||||
showsButtons?: boolean
|
||||
// Set to false to disable continuous loop mode.
|
||||
autoplay?: boolean
|
||||
// Called with the new index when the user swiped
|
||||
onIndexChanged?: any
|
||||
|
||||
// Custom basic style & content
|
||||
// Set to true enable auto play mode.
|
||||
width?: number
|
||||
// If no specify default fullscreen mode by flex: 1.
|
||||
height?: number
|
||||
// See default style in source.
|
||||
style?: ViewStyle
|
||||
// Only load current index slide , loadMinimalSize slides before and after.
|
||||
loadMinimal?: boolean
|
||||
// see loadMinimal
|
||||
loadMinimalSize?: boolean
|
||||
// Custom loader to display when slides aren't loaded
|
||||
loadMinimalLoader?: boolean
|
||||
|
||||
// Pagination
|
||||
// Set to true make pagination visible.
|
||||
showsPagination?: boolean
|
||||
// Custom styles will merge with the default styles.
|
||||
paginationStyle?: ViewStyle
|
||||
// Complete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots.
|
||||
renderPagination?: (index: number, total: number, swiper: Swiper) => JSX.Element
|
||||
// Allow custom the dot element.
|
||||
dot?: any
|
||||
// Allow custom the active-dot element.
|
||||
activeDot?: any
|
||||
// Allow custom the active-dot element.
|
||||
dotStyle?: ViewStyle
|
||||
// Allow custom the active-dot element.
|
||||
dotColor?: string
|
||||
// Allow custom the active-dot element.
|
||||
activeDotColor?: string
|
||||
// Allow custom the active-dot element.
|
||||
activeDotStyle?: ViewStyle
|
||||
|
||||
// Autoplay
|
||||
// Delay between auto play transitions (in second).
|
||||
autoplayTimeout?: boolean
|
||||
// Cycle direction control.
|
||||
autoplayDirection?: boolean
|
||||
|
||||
// Control buttons
|
||||
// Set to true make control buttons visible.
|
||||
buttonWrapperStyle?: any
|
||||
// Allow custom the next button.
|
||||
nextButton?: JSX.Element
|
||||
// Allow custom the prev button.
|
||||
prevButton?: JSX.Element
|
||||
|
||||
// Supported ScrollResponder
|
||||
// When animation begins after letting up
|
||||
onScrollBeginDrag?: any
|
||||
// Makes no sense why this occurs first during bounce
|
||||
onMomentumScrollEnd?: any
|
||||
// Immediately after onMomentumScrollEnd
|
||||
onTouchStartCapture?: any
|
||||
// Same, but bubble phase
|
||||
onTouchStart?: any
|
||||
// You could hold the touch start for a long time
|
||||
onTouchEnd?: any
|
||||
// When lifting up - you could pause forever before * lifting
|
||||
onResponderRelease?: any
|
||||
|
||||
// If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for
|
||||
// horizontal pagination.
|
||||
pagingEnabled?: boolean
|
||||
// Set to true if you want to show horizontal scroll bar.
|
||||
showsHorizontalScrollIndicator?: boolean
|
||||
// Set to true if you want to show vertical scroll bar.
|
||||
showsVerticalScrollIndicator?: boolean
|
||||
// If true, the scroll view bounces when it reaches the end of the content if the content is larger then the
|
||||
// scroll view along the axis of the scroll direction. If false, it disables all bouncing even if the
|
||||
// alwaysBounce* props are true.
|
||||
bounces?: boolean
|
||||
// If true, the scroll view scrolls to top when the status bar is tapped.
|
||||
scrollsToTop?: boolean
|
||||
// If true, offscreen child views (whose overflow value is hidden) are removed from their native backing
|
||||
// superview when offscreen. This canimprove scrolling performance on long lists.
|
||||
removeClippedSubviews?: boolean
|
||||
// Set to true if you need adjust content insets automation.
|
||||
automaticallyAdjustContentInsets?: boolean
|
||||
// Enables/Disables swiping
|
||||
scrollEnabled?: boolean
|
||||
}
|
||||
total: number
|
||||
index: number
|
||||
dir: 'x' | 'y'
|
||||
}
|
||||
|
||||
interface SwiperInternals extends SwiperState {
|
||||
isScrolling: boolean
|
||||
}
|
||||
|
||||
interface SwiperProps {
|
||||
// Basic
|
||||
// If true, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
|
||||
horizontal?: boolean
|
||||
// If no specify default enable fullscreen mode by flex: 1.
|
||||
loop?: boolean
|
||||
// Index number of initial slide.
|
||||
index?: number
|
||||
// Set to true make control buttons visible.
|
||||
showsButtons?: boolean
|
||||
// Set to false to disable continuous loop mode.
|
||||
autoplay?: boolean
|
||||
// Called with the new index when the user swiped
|
||||
onIndexChanged?: (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, SwiperState> {
|
||||
scrollBy: (index?: number, animated?: boolean) => void;
|
||||
scrollTo: (index: number, animated?: boolean) => void;
|
||||
}
|
||||
export default class Swiper extends Component<SwiperProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
10
index.js
10
index.js
@ -1,10 +1,2 @@
|
||||
import Swiper from './src/'
|
||||
/**
|
||||
* 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;
|
||||
module.exports = Swiper
|
||||
|
||||
111
index.js.flow
111
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;
|
||||
}
|
||||
}
|
||||
14
package.json
14
package.json
@ -5,11 +5,10 @@
|
||||
"react-native",
|
||||
"ios"
|
||||
],
|
||||
"version": "1.6.0-nightly.4",
|
||||
"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",
|
||||
"standard": "^13.0.1",
|
||||
"snazzy": "^6.0.0",
|
||||
"standard": "^10.0.3",
|
||||
"updtr": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "cz-conventional-changelog"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
469
src/index.js
469
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([
|
||||
PropTypes.object,
|
||||
PropTypes.number,
|
||||
PropTypes.array
|
||||
]),
|
||||
activeDotStyle: PropTypes.oneOfType([
|
||||
PropTypes.object,
|
||||
PropTypes.number,
|
||||
PropTypes.array
|
||||
]),
|
||||
dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
|
||||
activeDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
|
||||
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,66 +193,42 @@ export default class extends Component {
|
||||
autoplayTimer = null
|
||||
loopJumpTimer = null
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.autoplay && this.autoplayTimer)
|
||||
clearTimeout(this.autoplayTimer)
|
||||
if (nextProps.index === this.props.index) return
|
||||
this.setState(
|
||||
this.initState(nextProps, this.props.index !== nextProps.index)
|
||||
)
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
|
||||
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)
|
||||
}
|
||||
|
||||
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)
|
||||
this.props.onIndexChanged(nextState.index)
|
||||
if (this.state.index !== nextState.index) this.props.onIndexChanged(nextState.index)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
// If autoplay props updated to true, autoplay immediately
|
||||
if (this.props.autoplay && !prevProps.autoplay) {
|
||||
this.autoplay()
|
||||
}
|
||||
if (this.props.children !== prevProps.children) {
|
||||
this.setState(
|
||||
this.initState({ ...this.props, index: this.state.index }, true)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
initState(props, updateIndex = false) {
|
||||
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.children = Array.isArray(props.children)
|
||||
? props.children.filter(child => child)
|
||||
: props.children
|
||||
|
||||
initState.total = initState.children ? initState.children.length || 1 : 0
|
||||
initState.total = props.children ? props.children.length || 1 : 0
|
||||
|
||||
if (state.total === initState.total && !updateIndex) {
|
||||
// retain the index
|
||||
initState.index = state.index
|
||||
} else {
|
||||
initState.index =
|
||||
initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
|
||||
initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
|
||||
}
|
||||
|
||||
// Default: horizontal
|
||||
@ -265,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.dir === 'y' ? height * props.index : width * props.index
|
||||
initState.offset[initState.dir] = initState.dir === 'y'
|
||||
? height * props.index
|
||||
: width * props.index
|
||||
|
||||
|
||||
this.internals = {
|
||||
...this.internals,
|
||||
isScrolling: false
|
||||
}
|
||||
};
|
||||
return initState
|
||||
}
|
||||
|
||||
// include internals with state
|
||||
fullState() {
|
||||
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) {
|
||||
@ -304,26 +279,25 @@ export default class extends Component {
|
||||
if (this.props.loop) {
|
||||
setup++
|
||||
}
|
||||
offset[this.state.dir] =
|
||||
this.state.dir === 'y' ? height * setup : width * setup
|
||||
offset[this.state.dir] = this.state.dir === 'y'
|
||||
? 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 ||
|
||||
width !== this.state.width ||
|
||||
height !== this.state.height
|
||||
) {
|
||||
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) {
|
||||
this.scrollView.scrollTo({ ...offset, animated: false })
|
||||
this.initialRender = false
|
||||
if (Platform.OS === 'ios') {
|
||||
if (this.initialRender && this.state.total > 1) {
|
||||
this.scrollView.scrollTo({...offset, animated: false})
|
||||
this.initialRender = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState(state)
|
||||
@ -333,35 +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(
|
||||
() =>
|
||||
scrollView.setPageWithoutAnimation &&
|
||||
scrollView.setPageWithoutAnimation(i),
|
||||
50
|
||||
)
|
||||
this.loopJumpTimer = setTimeout(() => scrollView.setPageWithoutAnimation &&
|
||||
scrollView.setPageWithoutAnimation(i), 50)
|
||||
}
|
||||
|
||||
/**
|
||||
* Automatic rolling
|
||||
*/
|
||||
autoplay = () => {
|
||||
if (
|
||||
!Array.isArray(this.state.children) ||
|
||||
if (!Array.isArray(this.props.children) ||
|
||||
!this.props.autoplay ||
|
||||
this.internals.isScrolling ||
|
||||
this.state.autoplayEnd
|
||||
)
|
||||
return
|
||||
this.state.autoplayEnd) return
|
||||
|
||||
this.autoplayTimer && clearTimeout(this.autoplayTimer)
|
||||
this.autoplayTimer = setTimeout(() => {
|
||||
if (
|
||||
!this.props.loop &&
|
||||
(this.props.autoplayDirection
|
||||
? this.state.index === this.state.total - 1
|
||||
: this.state.index === 0)
|
||||
)
|
||||
return this.setState({ autoplayEnd: true })
|
||||
if (!this.props.loop && (
|
||||
this.props.autoplayDirection
|
||||
? this.state.index === this.state.total - 1
|
||||
: this.state.index === 0
|
||||
)
|
||||
) return this.setState({ autoplayEnd: true })
|
||||
|
||||
this.scrollBy(this.props.autoplayDirection ? 1 : -1)
|
||||
}, this.props.autoplayTimeout * 1000)
|
||||
@ -374,8 +340,7 @@ export default class extends Component {
|
||||
onScrollBegin = e => {
|
||||
// update scroll state
|
||||
this.internals.isScrolling = true
|
||||
this.props.onScrollBeginDrag &&
|
||||
this.props.onScrollBeginDrag(e, this.fullState(), this)
|
||||
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e, this.fullState(), this)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -389,13 +354,9 @@ 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 = {
|
||||
x: e.nativeEvent.position * this.state.width
|
||||
}
|
||||
e.nativeEvent.contentOffset = {x: e.nativeEvent.position * this.state.width}
|
||||
} else {
|
||||
e.nativeEvent.contentOffset = {
|
||||
y: e.nativeEvent.position * this.state.height
|
||||
}
|
||||
e.nativeEvent.contentOffset = {y: e.nativeEvent.position * this.state.height}
|
||||
}
|
||||
}
|
||||
|
||||
@ -404,8 +365,7 @@ export default class extends Component {
|
||||
this.loopJump()
|
||||
|
||||
// if `onMomentumScrollEnd` registered will be called here
|
||||
this.props.onMomentumScrollEnd &&
|
||||
this.props.onMomentumScrollEnd(e, this.fullState(), this)
|
||||
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.fullState(), this)
|
||||
})
|
||||
}
|
||||
|
||||
@ -415,16 +375,14 @@ export default class extends Component {
|
||||
*/
|
||||
onScrollEndDrag = e => {
|
||||
const { contentOffset } = e.nativeEvent
|
||||
const { horizontal } = this.props
|
||||
const { children, index } = this.state
|
||||
const { horizontal, children } = this.props
|
||||
const { index } = this.state
|
||||
const { offset } = this.internals
|
||||
const previousOffset = horizontal ? offset.x : offset.y
|
||||
const newOffset = horizontal ? contentOffset.x : contentOffset.y
|
||||
|
||||
if (
|
||||
previousOffset === newOffset &&
|
||||
(index === 0 || index === children.length - 1)
|
||||
) {
|
||||
if (previousOffset === newOffset &&
|
||||
(index === 0 || index === children.length - 1)) {
|
||||
this.internals.isScrolling = false
|
||||
}
|
||||
}
|
||||
@ -436,41 +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
|
||||
const callback = async () => {
|
||||
cb()
|
||||
if (Platform.OS === 'android') {
|
||||
if (this.state.index === 0) {
|
||||
this.props.horizontal
|
||||
? this.scrollView.scrollTo({
|
||||
x: state.width,
|
||||
y: 0,
|
||||
animated: false
|
||||
})
|
||||
: this.scrollView.scrollTo({
|
||||
x: 0,
|
||||
y: state.height,
|
||||
animated: false
|
||||
})
|
||||
} else if (this.state.index === this.state.total - 1) {
|
||||
this.props.horizontal
|
||||
? this.scrollView.scrollTo({
|
||||
x: state.width * this.state.total,
|
||||
y: 0,
|
||||
animated: false
|
||||
})
|
||||
: this.scrollView.scrollTo({
|
||||
x: 0,
|
||||
y: state.height * this.state.total,
|
||||
animated: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
@ -512,14 +436,14 @@ export default class extends Component {
|
||||
newState.offset = { x: 0, y: 0 }
|
||||
newState.offset[dir] = offset[dir] + 1
|
||||
this.setState(newState, () => {
|
||||
this.setState({ offset: offset }, callback)
|
||||
this.setState({ offset: offset }, cb)
|
||||
})
|
||||
} else {
|
||||
newState.offset = offset
|
||||
this.setState(newState, callback)
|
||||
this.setState(newState, cb)
|
||||
}
|
||||
} else {
|
||||
this.setState(newState, callback)
|
||||
this.setState(newState, cb)
|
||||
}
|
||||
}
|
||||
|
||||
@ -538,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 })
|
||||
|
||||
// update scroll state
|
||||
this.internals.isScrolling = true
|
||||
this.setState({
|
||||
autoplayEnd: false
|
||||
})
|
||||
|
||||
// trigger onScrollEnd manually in android
|
||||
if (!animated || Platform.OS !== 'ios') {
|
||||
setImmediate(() => {
|
||||
this.onScrollEnd({
|
||||
nativeEvent: {
|
||||
position: diff
|
||||
}
|
||||
})
|
||||
})
|
||||
if (Platform.OS !== 'ios') {
|
||||
this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
|
||||
} else {
|
||||
this.scrollView && this.scrollView.scrollTo({ x, y, animated })
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
@ -616,14 +502,13 @@ export default class extends Component {
|
||||
|
||||
for (let prop in props) {
|
||||
// if(~scrollResponders.indexOf(prop)
|
||||
if (
|
||||
typeof props[prop] === 'function' &&
|
||||
if (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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -635,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 || (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
backgroundColor: this.props.activeDotColor || '#007aff',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginLeft: 3,
|
||||
marginRight: 3,
|
||||
marginTop: 3,
|
||||
marginBottom: 3
|
||||
},
|
||||
this.props.activeDotStyle
|
||||
]}
|
||||
/>
|
||||
)
|
||||
const Dot = this.props.dot || (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
backgroundColor: this.props.dotColor || 'rgba(0,0,0,.2)',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginLeft: 3,
|
||||
marginRight: 3,
|
||||
marginTop: 3,
|
||||
marginBottom: 3
|
||||
},
|
||||
this.props.dotStyle
|
||||
]}
|
||||
/>
|
||||
)
|
||||
const ActiveDot = this.props.activeDot || <View style={[{
|
||||
backgroundColor: this.props.activeDotColor || '#007aff',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginLeft: 3,
|
||||
marginRight: 3,
|
||||
marginTop: 3,
|
||||
marginBottom: 3
|
||||
}, this.props.activeDotStyle]} />
|
||||
const Dot = this.props.dot || <View style={[{
|
||||
backgroundColor: this.props.dotColor || 'rgba(0,0,0,.2)',
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginLeft: 3,
|
||||
marginRight: 3,
|
||||
marginTop: 3,
|
||||
marginBottom: 3
|
||||
}, this.props.dotStyle ]} />
|
||||
for (let i = 0; i < this.state.total; i++) {
|
||||
dots.push(
|
||||
i === this.state.index
|
||||
? React.cloneElement(ActiveDot, { key: i })
|
||||
: React.cloneElement(Dot, { key: i })
|
||||
dots.push(i === this.state.index
|
||||
? React.cloneElement(ActiveDot, {key: i})
|
||||
: React.cloneElement(Dot, {key: i})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={[
|
||||
styles['pagination_' + this.state.dir],
|
||||
this.props.paginationStyle
|
||||
]}
|
||||
>
|
||||
<View 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 ? (
|
||||
<View style={styles.title}>
|
||||
{this.state.children[this.state.index].props.title}
|
||||
</View>
|
||||
) : null
|
||||
return title
|
||||
? (<View style={styles.title}>
|
||||
{this.props.children[this.state.index].props.title}
|
||||
</View>)
|
||||
: 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>
|
||||
}
|
||||
|
||||
@ -716,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>
|
||||
)
|
||||
}
|
||||
@ -729,28 +596,20 @@ export default class extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={() => button !== null && this.scrollBy(-1)}
|
||||
disabled={this.props.disablePrevButton}
|
||||
>
|
||||
<View>{button}</View>
|
||||
<TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
|
||||
<View>
|
||||
{button}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
renderButtons = () => {
|
||||
return (
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={[
|
||||
styles.buttonWrapper,
|
||||
{
|
||||
width: this.state.width,
|
||||
height: this.state.height
|
||||
},
|
||||
this.props.buttonWrapperStyle
|
||||
]}
|
||||
>
|
||||
<View pointerEvents='box-none' style={[styles.buttonWrapper, {
|
||||
width: this.state.width,
|
||||
height: this.state.height
|
||||
}, this.props.buttonWrapperStyle]}>
|
||||
{this.renderPrevButton()}
|
||||
{this.renderNextButton()}
|
||||
</View>
|
||||
@ -758,35 +617,34 @@ export default class extends Component {
|
||||
}
|
||||
|
||||
refScrollView = view => {
|
||||
this.scrollView = view
|
||||
}
|
||||
|
||||
onPageScrollStateChanged = state => {
|
||||
switch (state) {
|
||||
case 'dragging':
|
||||
return this.onScrollBegin()
|
||||
|
||||
case 'idle':
|
||||
case 'settling':
|
||||
if (this.props.onTouchEnd) this.props.onTouchEnd()
|
||||
}
|
||||
this.scrollView = view;
|
||||
}
|
||||
|
||||
renderScrollView = pages => {
|
||||
if (Platform.OS === 'ios') {
|
||||
return (
|
||||
<ScrollView ref={this.refScrollView}
|
||||
{...this.props}
|
||||
{...this.scrollViewPropOverrides()}
|
||||
contentContainerStyle={[styles.wrapperIOS, this.props.style]}
|
||||
contentOffset={this.state.offset}
|
||||
onScrollBeginDrag={this.onScrollBegin}
|
||||
onMomentumScrollEnd={this.onScrollEnd}
|
||||
onScrollEndDrag={this.onScrollEndDrag}
|
||||
style={this.props.scrollViewStyle}>
|
||||
{pages}
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ScrollView
|
||||
ref={this.refScrollView}
|
||||
<ViewPagerAndroid 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}
|
||||
>
|
||||
initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
|
||||
onPageSelected={this.onScrollEnd}
|
||||
key={pages.length}
|
||||
style={[styles.wrapperAndroid, this.props.style]}>
|
||||
{pages}
|
||||
</ScrollView>
|
||||
</ViewPagerAndroid>
|
||||
)
|
||||
}
|
||||
|
||||
@ -794,9 +652,17 @@ export default class extends Component {
|
||||
* Default render
|
||||
* @return {object} react-dom
|
||||
*/
|
||||
render() {
|
||||
const { index, total, width, height, children } = this.state
|
||||
render () {
|
||||
const state = this.state
|
||||
const props = this.props
|
||||
const {
|
||||
index,
|
||||
total,
|
||||
width,
|
||||
height
|
||||
} = this.state;
|
||||
const {
|
||||
children,
|
||||
containerStyle,
|
||||
loop,
|
||||
loadMinimal,
|
||||
@ -804,14 +670,14 @@ export default class extends Component {
|
||||
loadMinimalLoader,
|
||||
renderPagination,
|
||||
showsButtons,
|
||||
showsPagination
|
||||
} = this.props
|
||||
showsPagination,
|
||||
} = 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,
|
||||
@ -831,15 +697,9 @@ export default class extends Component {
|
||||
|
||||
pages = pages.map((page, i) => {
|
||||
if (loadMinimal) {
|
||||
if (
|
||||
i >= index + loopVal - loadMinimalSize &&
|
||||
i <= index + loopVal + loadMinimalSize
|
||||
) {
|
||||
return (
|
||||
<View style={pageStyle} key={i}>
|
||||
{children[page]}
|
||||
</View>
|
||||
)
|
||||
if (i >= (index + loopVal - loadMinimalSize) &&
|
||||
i <= (index + loopVal + loadMinimalSize)) {
|
||||
return <View style={pageStyle} key={i}>{children[page]}</View>
|
||||
} else {
|
||||
return (
|
||||
<View style={pageStyleLoading} key={i}>
|
||||
@ -848,28 +708,19 @@ export default class extends Component {
|
||||
)
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<View style={pageStyle} key={i}>
|
||||
{children[page]}
|
||||
</View>
|
||||
)
|
||||
return <View style={pageStyle} key={i}>{children[page]}</View>
|
||||
}
|
||||
})
|
||||
} else {
|
||||
pages = (
|
||||
<View style={pageStyle} key={0}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
pages = <View style={pageStyle} key={0}>{children}</View>
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, containerStyle]} onLayout={this.onLayout}>
|
||||
{this.renderScrollView(pages)}
|
||||
{showsPagination &&
|
||||
(renderPagination
|
||||
? renderPagination(index, total, this)
|
||||
: this.renderPagination())}
|
||||
{showsPagination && (renderPagination
|
||||
? renderPagination(index, total, this)
|
||||
: this.renderPagination())}
|
||||
{this.renderTitle()}
|
||||
{showsButtons && this.renderButtons()}
|
||||
</View>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user