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.

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

Fix 3D Touch swiping issue #41

Merged
merged 3 commits into from Jul 27, 2017
Merged

Fix 3D Touch swiping issue #41

merged 3 commits into from Jul 27, 2017

Conversation

webraptor
Copy link
Contributor

No description provided.

@webraptor webraptor mentioned this pull request Jul 25, 2017
@AlexVegner
Copy link
Contributor

@webraptor Hi @webraptor,
I will verify your solution on my iPhone 7, 6+ later today.

@webraptor
Copy link
Contributor Author

Allright, already tested on simulator and 2 different devices with and without 3D touch

@alexbrillant
Copy link
Owner

Thanks alot ! @webraptor @AlexVegner What issue is it fixing ?

@AlexVegner
Copy link
Contributor

AlexVegner commented Jul 25, 2017

Hi @webraptor @alexbrillant,
This solition doen't work for me.
On iPhone 7 issue #33 is reproducible. Swiper interceps Buttons tap on iPhone 7 with 3d touch.
OnlyonMoveShouldSetPanResponder: (event, gestureState) => false help with this issue.

@webraptor
Copy link
Contributor Author

And that one causes swiping not to work at all on simulator and all devices. Does swiping work for you in that scenario ?

@AlexVegner
Copy link
Contributor

AlexVegner commented Jul 26, 2017

@webraptor

And that one causes swiping not to work at all on simulator and all devices. Does swiping work for you in that scenario ?

Yes, with #40 swipe worked for my case. Tested on 6+, 7 devices.
I will create test project later today, so we will discuss this issue based on same code base.

@webraptor
Copy link
Contributor Author

webraptor commented Jul 26, 2017 via email

@@ -110,6 +110,7 @@ class Swiper extends React.Component {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (event, gestureState) => true,
onMoveShouldSetPanResponder: (event, gestureState) => false,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line partly fixes 3D touch issues.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@@ -110,6 +110,7 @@ class Swiper extends React.Component {
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: (event, gestureState) => true,
onMoveShouldSetPanResponder: (event, gestureState) => false,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => gestureState.dx != 0 && gestureState.dy != 0,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line fixed manual swiping around (pan responder) on 3D touch devices.

@webraptor
Copy link
Contributor Author

webraptor commented Jul 26, 2017

Added a few extra comments on the lines affected by this PR, with info on what they actually do.
Changes actually fix swiping and 3D touching, but following info should be taken into consideration.

Inline touch not working?
If within the swipe cards (aka panresponder) one has touchable items that do not work, here are some solutions:

  1. Add hitslop on touchable items (touchableOpacity, touchableWithoutFeedback, whatever you have etc) that are directly within the render card method.
  2. If the touchables mentioned at point (1.) are within an Animated.View class, use onPressOut in favor of onPress which isn't triggered by 3D touch devices.

I am sure there are still some other scenarios, but at least we now know how to fix basic behaviors.

@alexbrillant alexbrillant merged commit 8eac282 into alexbrillant:master Jul 27, 2017
@AlexVegner
Copy link
Contributor

@webraptor @alexbrillant
onMoveShouldSetPanResponder: (event, gestureState) => false,
Fix the issue, all types of buttons and swipe works with this PR on iPhone 7, etc.
https://github.com/AlexVegner/test-react-native-deck-swiper/blob/master/App.js#L19
Thanks.

@AlexVegner
Copy link
Contributor

@alexbrillant You could close #33

alexbrillant added a commit that referenced this pull request Nov 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants