diff --git a/CardStack.js b/CardStack.js index b83f65c..84922ef 100644 --- a/CardStack.js +++ b/CardStack.js @@ -35,6 +35,10 @@ class CardStack extends Component { onStartShouldSetPanResponder: (evt, gestureState) => false, onStartShouldSetPanResponderCapture: (evt, gestureState) => false, onMoveShouldSetPanResponder: (evt, gestureState) => { + if (this.props.disableMultitouchSwipe && gestureState.numberActiveTouches > 1) { + return false; + } + const isVerticalSwipe = Math.sqrt( Math.pow(gestureState.dx, 2) < Math.pow(gestureState.dy, 2) ) @@ -44,6 +48,10 @@ class CardStack extends Component { return Math.sqrt(Math.pow(gestureState.dx, 2) + Math.pow(gestureState.dy, 2)) > 10 }, onMoveShouldSetPanResponderCapture: (evt, gestureState) => { + if (this.props.disableMultitouchSwipe && gestureState.numberActiveTouches > 1) { + return false; + } + const isVerticalSwipe = Math.sqrt( Math.pow(gestureState.dx, 2) < Math.pow(gestureState.dy, 2) ) @@ -488,6 +496,7 @@ CardStack.propTypes = { disableLeftSwipe: PropTypes.bool, disableRightSwipe: PropTypes.bool, disableTopSwipe: PropTypes.bool, + disableMultitouchSwipe: PropTypes.bool, verticalSwipe: PropTypes.bool, verticalThreshold: PropTypes.number, @@ -519,6 +528,7 @@ CardStack.defaultProps = { disableLeftSwipe: false, disableRightSwipe: false, disableTopSwipe: false, + disableMultitouchSwipe: false, verticalSwipe: true, verticalThreshold: height / 4, horizontalSwipe: true, diff --git a/README.md b/README.md index 429d513..fa22243 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # react-native-card-stack-swiper + Tinder like react-native card stack swiper [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/lhandel/react-native-card-stack-swiper/issues) @@ -31,52 +32,53 @@ import CardStack, { Card } from 'react-native-card-stack-swiper'; # CardStack ## CardStack props -| Props | type | description | required | default | -| --------------------| ------------- | --------------------------------| ------------- | ------------- | -| style | object | container style | | {} | -| cardContainerStyle | object | cardContainerStyle style | | {} | -| secondCardZoom | number | second card zoom | | 0.95 | -| duration | number | animation duration | | 300 | -| initialIndex | number | initial card index | | 0 | -| loop | bool | keep swiping indefinitely | | false | -| renderNoMoreCards | func | | | false | -| disableTopSwipe | bool | disable top swipe | | false | -| disableBottomSwipe | bool | disable bottom swipe | | false | -| disableLeftSwipe | bool | disable left swipe | | false | -| disableRightSwipe | bool | disable right swipe | | false | -| verticalSwipe | bool | enable/disable vertical swiping | | true | -| horizontalSwipe | bool | enable/disable horizont swiping | | true | -| verticalThreshold | number | vertical swipe threshold | | height/4 | -| horizontalThreshold | number | horizontal swipe threshold | | width/2 | -| outputRotationRange | array | rotation values for the x values| | ['-15deg', '0deg', '15deg'] | +| Props | type | description | required | default | +| ---------------------- | ------ | --------------------------------------- | -------- | --------------------------- | +| style | object | container style | | {} | +| cardContainerStyle | object | cardContainerStyle style | | {} | +| secondCardZoom | number | second card zoom | | 0.95 | +| duration | number | animation duration | | 300 | +| initialIndex | number | initial card index | | 0 | +| loop | bool | keep swiping indefinitely | | false | +| renderNoMoreCards | func | | | false | +| disableTopSwipe | bool | disable top swipe | | false | +| disableBottomSwipe | bool | disable bottom swipe | | false | +| disableLeftSwipe | bool | disable left swipe | | false | +| disableRightSwipe | bool | disable right swipe | | false | +| disableMultitouchSwipe | bool | disable swipe with more than one finger | | false | +| verticalSwipe | bool | enable/disable vertical swiping | | true | +| horizontalSwipe | bool | enable/disable horizont swiping | | true | +| verticalThreshold | number | vertical swipe threshold | | height/4 | +| horizontalThreshold | number | horizontal swipe threshold | | width/2 | +| outputRotationRange | array | rotation values for the x values | | ['-15deg', '0deg', '15deg'] | ## CardStack events -| Props | type | description | -| ----------------- | ------------- | --------------------------- | -| onSwipeStart | func | function to be called when a card swipe starts | -| onSwipeEnd | func | function to be called when a card swipe ends (card is released) | -| onSwiped | func | function to be called when a card is swiped. it receives the swiped card index | -| onSwipedLeft | func | function to be called when a card is swiped left. it receives the swiped card index | -| onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | -| onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | -| onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | -| onSwipedAll | async func | function to be called when the last card is swiped. Could trig action to refresh cards | -| onSwipe | func | function to be called when a card is swiped. It receives the current x, and y coordinates| - +| Props | type | description | +| -------------- | ---------- | ----------------------------------------------------------------------------------------- | +| onSwipeStart | func | function to be called when a card swipe starts | +| onSwipeEnd | func | function to be called when a card swipe ends (card is released) | +| onSwiped | func | function to be called when a card is swiped. it receives the swiped card index | +| onSwipedLeft | func | function to be called when a card is swiped left. it receives the swiped card index | +| onSwipedRight | func | function to be called when a card is swiped right. it receives the swiped card index | +| onSwipedTop | func | function to be called when a card is swiped top. it receives the swiped card index | +| onSwipedBottom | func | function to be called when a card is swiped bottom. it receives the swiped card index | +| onSwipedAll | async func | function to be called when the last card is swiped. Could trig action to refresh cards | +| onSwipe | func | function to be called when a card is swiped. It receives the current x, and y coordinates | ## CardStack actions -| Props | type | -| ----------------- | ------------- | -| swipeLeft | func | -| swipeRight | func | -| swipeBottom | func | -| swipeTop | func | -| goBackFromLeft | func | -| goBackFromRight | func | -| goBackFromBottom | func | -| goBackFromTop | func | + +| Props | type | +| ---------------- | ---- | +| swipeLeft | func | +| swipeRight | func | +| swipeBottom | func | +| swipeTop | func | +| goBackFromLeft | func | +| goBackFromRight | func | +| goBackFromBottom | func | +| goBackFromTop | func | ```javascript { this.swiper = swiper }}> @@ -89,19 +91,20 @@ import CardStack, { Card } from 'react-native-card-stack-swiper'; ``` - # Card ## Card props -| Props | type | description | required | default | -| --------------------| ------------- | --------------------------------| ------------- | ------------- | -| style | object | container style | | {} | + +| Props | type | description | required | default | +| ----- | ------ | --------------- | -------- | ------- | +| style | object | container style | | {} | ## Card events -| Props | type | description | -| ----------------- | ------------- | --------------------------- | -| onSwiped | func | function to be called when a card is swiped. | -| onSwipedLeft | func | function to be called when a card is swiped left. | -| onSwipedRight | func | function to be called when a card is swiped right. | -| onSwipedTop | func | function to be called when a card is swiped top. | -| onSwipedBottom | func | function to be called when a card is swiped bottom. | + +| Props | type | description | +| -------------- | ---- | --------------------------------------------------- | +| onSwiped | func | function to be called when a card is swiped. | +| onSwipedLeft | func | function to be called when a card is swiped left. | +| onSwipedRight | func | function to be called when a card is swiped right. | +| onSwipedTop | func | function to be called when a card is swiped top. | +| onSwipedBottom | func | function to be called when a card is swiped bottom. | diff --git a/index.d.ts b/index.d.ts index 112c474..aefcf10 100644 --- a/index.d.ts +++ b/index.d.ts @@ -10,6 +10,7 @@ export interface CardStackProps { disableBottomSwipe?: boolean; disableLeftSwipe?: boolean; disableRightSwipe?: boolean; + disableMultitouchSwipe?: boolean; verticalSwipe?: boolean; horizontalSwipe?: boolean; verticalThreshold?: number;