Touch event is canceled on small move because element height is 0
See original GitHub issueOn galaxy s6 touch is so sensitive that when you tap on the phone sometimes move event is fired. And because height in TouchableMixin._handleQueryLayout
is 0 so because of that isTouchWithinActive
will always be false and touch event will be canceled.
Now I am not sure how to fix because I am not sure how react-native is getting that value from the native component. Any help is appreciated
Issue Analytics
- State:
- Created 7 years ago
- Reactions:4
- Comments:28
Top Results From Across the Web
Touch event is canceled on small move because element ...
On galaxy s6 touch is so sensitive that when you tap on the phone sometimes move event is fired. And because height in...
Read more >Touch events - Web APIs - MDN Web Docs - Mozilla
During this interaction, an application receives touch events during the start, move, and end phases. Touch events are similar to mouse events ...
Read more >Touch move getting stuck Ignored attempt to cancel a ...
Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
Read more >Pointer events - The Modern JavaScript Tutorial
Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen,...
Read more >Invoking Events from Effects - Xamarin - Microsoft Learn
An effect can define and invoke an event, signaling changes in the underlying native view. This article shows how to implement low-level ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Not that I know of. One workaround, which cripple’s touch moved event, but makes
onPress
work is to disable the move responder:Also getting the same conclusion here.
The Bug
Summary: All move related touch behavior functions incorrectly with react-native-svg.
I created a demo project to demo this: https://github.com/chengyin/react-native-svg-press-bug
Here is a GIF:
You can see that in this sequence:
The expected behavior is
onPress
event is filed. Unfortunately for react-native-svg, this is not happening.Technical Details
This line in RN’s Touchable determines whether the touch moved out of the view boundary or not. If the touch moved out of the boundary,
onPressOut
will be fired immediately. It also leads to that when the touch releases,onPress
would not be fired.To perform this calculate, Touchable mixin saves the size and position of the element it is attached to to compare them to the touch event position. The measurement is done through
UIManager
on the native side usingframe
(for iOS). But this measurement is wrong for react-native-svg components because they areUIView
subclass with zero frames. This wrong measurement makes Touchable treat almost all touch moves as if the they are out of the component touch area.This is particularly bad for 3D Touch enabled devices. When combining a Force Touch device (6s, 6s Plus, 7, 7 Plus) with an app that targets 9.0 and below.
Due to an iOS SDK 9.0 bug, Force change triggers
touchesMoved
event call back (although the touch actually didn’t move), which leads to thetouchableHandleResponderMove
being called, and cancels out the press itself. Essentially,onPress
s on react-native-svg components do not work at all on 6s, 6s Plus, 7, and 7 Plus. When the tap is very fast and light, it would work, but this is an unpractical expectation. This is reproducible in the Simulator with a 3D Touch enabled trackpad.Suggestions
I would like to hear @magicismight’s input on this, some options are:
frame
on native SVG components. I am afraid that this bug here could lead to other unknown bugs.I’m more than happy to help here with the code.