diff --git a/README.md b/README.md index 2709a53..446eda6 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,9 @@ var ViewPager = require('react-native-viewpager'); * **`isLoop`**: `true` to run in infinite scroll mode, * **`locked`**: `true` to disable touch scroll, * **`onChangePage`**: page change callback, -* **`renderPageIndicator`**: render custom ViewPager indicator. -* **`initialPage`**: show initially some other page than first page. +* **`renderPageIndicator`**: render custom ViewPager indicator, +* **`distanceThreshold`**: the relative screen distance at which a transition is triggered (from 0 to 1), +* **`velocityThreshold`**: the velocity at which a transition is triggered (see [gestureState.vx](https://facebook.github.io/react-native/docs/panresponder.html)). ## Page Transition Animation Controls diff --git a/ViewPager.js b/ViewPager.js index b0709ed..ea4c9b3 100644 --- a/ViewPager.js +++ b/ViewPager.js @@ -42,6 +42,8 @@ var ViewPager = React.createClass({ autoPlay: PropTypes.bool, animation: PropTypes.func, initialPage: PropTypes.number, + distanceThreshold: PropTypes.number, + velocityThreshold: PropTypes.number, }, fling: false, @@ -50,6 +52,8 @@ var ViewPager = React.createClass({ return { isLoop: false, locked: false, + distanceThreshold: 0.5, + velocityThreshold: 1e-6, animation: function(animate, toValue, gs) { return Animated.spring(animate, { @@ -78,9 +82,11 @@ var ViewPager = React.createClass({ vx = gestureState.vx; var step = 0; - if (relativeGestureDistance < -0.5 || (relativeGestureDistance < 0 && vx <= -1e-6)) { + if (relativeGestureDistance < -this.props.distanceThreshold + || (relativeGestureDistance < 0 && vx <= -this.props.velocityThreshold)) { step = 1; - } else if (relativeGestureDistance > 0.5 || (relativeGestureDistance > 0 && vx >= 1e-6)) { + } else if (relativeGestureDistance > this.props.distanceThreshold + || (relativeGestureDistance > 0 && vx >= this.props.velocityThreshold)) { step = -1; }