Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Touch event is canceled on small move because element height is 0

See original GitHub issue

On 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:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:28

github_iconTop GitHub Comments

chengyincommented, Nov 8, 2016

Not that I know of. One workaround, which cripple’s touch moved event, but makes onPress work is to disable the move responder:

onPress: [[your press handler]]
onResponderMove: function() { return; }
chengyincommented, Oct 24, 2016

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:

Here is a GIF:

You can see that in this sequence:

  1. Touch down
  2. Move within the Rect
  3. Touch up

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 using frame (for iOS). But this measurement is wrong for react-native-svg components because they are UIView 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 the touchableHandleResponderMove being called, and cancels out the press itself. Essentially, onPresss 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.


I would like to hear @magicismight’s input on this, some options are:

  1. Fix frame on native SVG components. I am afraid that this bug here could lead to other unknown bugs.
  2. Override Touchable’s handlers to accommodate this limitation, either by cripple the touch support, or through offsetting the measurements from the native side to make them accurate.

I’m more than happy to help here with the code.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found