Skip to content

[Touches] Translated components receive touches at their non-translated position #3557

@ide

Description

@ide

When translating a View on Android (0.14.0-dev), it continues to receive touches at its original position which is probably not what you want. Here's the repro with PanResponderExample in the UIExplorer (you need to touch the top-left of the scene to move the circle):

diff --git a/Examples/UIExplorer/PanResponderExample.js b/Examples/UIExplorer/PanResponderExample.js
index c2e6a66..f469439 100644
--- a/Examples/UIExplorer/PanResponderExample.js
+++ b/Examples/UIExplorer/PanResponderExample.js
@@ -53,8 +53,10 @@ var PanResponderExample = React.createClass({
     this._previousTop = 84;
     this._circleStyles = {
       style: {
-        left: this._previousLeft,
-        top: this._previousTop
+        transform: [
+          { translateY: this._previousTop },
+          { translateX: this._previousLeft },
+        ],
       }
     };
   },
@@ -112,8 +114,10 @@ var PanResponderExample = React.createClass({
     this._highlight();
   },
   _handlePanResponderMove: function(e: Object, gestureState: Object) {
-    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
-    this._circleStyles.style.top = this._previousTop + gestureState.dy;
+    this._circleStyles.style.transform = [
+      { translateY: this._previousTop + gestureState.dy },
+      { translateX: this._previousLeft + gestureState.dx },
+    ];
     this._updatePosition();
   },
   _handlePanResponderEnd: function(e: Object, gestureState: Object) {

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions