Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to disable multi-touch swipes #89

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+65 −51
Open

Add option to disable multi-touch swipes #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d701e0d
Added functionality to disable swiping when more than one finger is used
DiegoBM Oct 6, 2021
d8b3a8a
disable prettier styles in order to match upstream's repository style…
DiegoBM Oct 6, 2021
c192272
disable prettier styles for component demo but keep the table alignme…
DiegoBM Oct 6, 2021
decaffb
Updated typescript type definitions
DiegoBM Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CardStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
)
Expand All @@ -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)
)
Expand Down Expand Up @@ -488,6 +496,7 @@ CardStack.propTypes = {
disableLeftSwipe: PropTypes.bool,
disableRightSwipe: PropTypes.bool,
disableTopSwipe: PropTypes.bool,
disableMultitouchSwipe: PropTypes.bool,
verticalSwipe: PropTypes.bool,
verticalThreshold: PropTypes.number,

Expand Down Expand Up @@ -519,6 +528,7 @@ CardStack.defaultProps = {
disableLeftSwipe: false,
disableRightSwipe: false,
disableTopSwipe: false,
disableMultitouchSwipe: false,
verticalSwipe: true,
verticalThreshold: height / 4,
horizontalSwipe: true,
Expand Down
105 changes: 54 additions & 51 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand Down Expand Up @@ -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
<CardStack style={styles.content} ref={swiper => { this.swiper = swiper }}>
Expand All @@ -89,19 +91,20 @@ import CardStack, { Card } from 'react-native-card-stack-swiper';
</TouchableOpacity>
```


# 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. |
1 change: 1 addition & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface CardStackProps {
disableBottomSwipe?: boolean;
disableLeftSwipe?: boolean;
disableRightSwipe?: boolean;
disableMultitouchSwipe?: boolean;
verticalSwipe?: boolean;
horizontalSwipe?: boolean;
verticalThreshold?: number;
Expand Down