View bounds and touchable area incorrect after a rotate or a scale transform

[floriancargoet]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native version: https://github.com/facebook/react-native/releases
• Run react-native info in your terminal and paste its contents under "Environment"
• Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-6660U CPU @ 2.40GHz
Memory: 4.38 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.5.0 - /usr/local/bin/node
Yarn: 1.7.0 - ~/.yarn/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 26.0.3
API Levels: 19, 21, 22, 23, 24, 25, 26
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-rename: 2.2.2

Description

The bounds of transformed views, as reported by the inspector or as detected by the Touchable components, do not match what you seen on the screen. The touch area is not correctly transformed with the view.

Screenshot of a { scale: 2 } transform
The real view (scaled) is in pink, the incorrect touchable area is in blue.

Screenshot of a { rotateZ: "-45deg" } transform
The real view (rotated) is in pink, the incorrect touchable area is in blue.

This issue has already been reported in 2016 but has been closed because it was missing reproduction steps. This bug has been here for a long time.

Steps to Reproduce

• Use a real device (I haven't been able to reproduce the bug on emulator, I have on a real Galaxy A5 2017)
  UPDATE: See this comment for an emulator reproduction.
• Use the inspector to display the view bounds
• See that the reported bounds (blue square) do not match the real view (pink square)
• Without the inspector, press somewhere on the real view where the blue square didn't overlap: the press is not correctly detected. onPressOut is triggered immediately after onPressIn, without onPress being triggered. onPressOut is immediately triggered even if you don't release the touch. Sometimes on the very first press, onPress is logged but it doesn't wait for touch release.

Demo code with on-screen logging
I've included some on-screen logging code to easily see the press events.
This example shows the bug with the scale transform but it can be reproduced with a rotate transform as well.

import React from "react";
import { AppRegistry, View, TouchableOpacity, Text } from "react-native";

let i = 1;

class Demo extends React.Component {

  state = {
    logs: []
  };

  log(str) {
    this.setState(state => ({
      logs: [...state.logs.slice(-5), `${i++}  - ${str}`]
    }));
  }

  render() {
    return (
      <View style={{ flex: 1 }}>

        <View style={{
          position: "absolute",
          top: 100,
          left: 100,
          height: 100,
          width: 100,
          transform: [{
            scale: 2 // you can also try rotateZ: "-45deg"
          }]
        }}>
          <TouchableOpacity
            onPress={() => this.log("pressed")}
            onPressIn={() => this.log("pressed in")}
            onPressOut={() => this.log("pressed out")}
            style={{
              flex: 1,
              backgroundColor: "pink"
            }}
          />
        </View>

        <View style={{ position: "absolute", bottom: 0, height: 200 }}>
          <Text style={{ fontWeight: "bold", fontSize: 20 }}>Logs</Text>
          <Text>{this.state.logs.join("\n")}</Text>
        </View>

      </View>
    );
  }
}

AppRegistry.registerComponent("Demo", () => Demo);

Minimal example without on-screen logging

import React from "react";
import { AppRegistry, View, TouchableOpacity } from "react-native";

class Demo extends React.Component {

  render() {
    return (
      <View style={{ flex: 1 }}>

        <View style={{
          position: "absolute",
          top: 100,
          left: 100,
          height: 100,
          width: 100,
          transform: [{
            scale: 2 // you can also try rotateZ: "-45deg"
          }]
        }}>
          <TouchableOpacity
            onPress={() => alert("pressed")}
            style={{
              flex: 1,
              backgroundColor: "pink"
            }}
          />
        </View>

      </View>
    );
  }
}

AppRegistry.registerComponent("Demo", () => Demo);

Expected Behavior

The bounds should match the view even when transformed.
The touch area should match what you see.

Actual Behavior

The bounds are not correctly transformed.
The touch area is not correctly transformed and press behaviour is broken where the real view and the incorrect bounds do not overlap.

[floriancargoet]

I managed to partially reproduce the bug in the emulator:

• the bounds are not transformed in the inspector
• the onPress detection only works if I do not move (which is probably why I can't do that on a real phone)
• BUT you can also press in the view and release in the reported bounds and onPress will be triggered!

In the following GIF we can see this. Here's what I did

1. Inspect the pink view to show the reported bounds (blue).
2. Press the pink view without moving between press in and press out: it's detected (alert).
3. Press in the pink view, move a bit, and release in the pink view: it's incorrectly not detected.
4. Press in the pink view, move a outside the pink view, and release: it's correctly not detected.
5. Press in the pink view, move a outside the pink view but inside the reported bounds, and release: it's incorrectly detected (alert).

[floriancargoet]

I spent several hours in the Java debugger and I believe I've found the source of the issue.
Both TouchableMixin.touchableHandleResponderMove() & the inspector request a call to UIManager.measure() and the measurements are incorrect. That's why both the touch behavior and the inspector have problems.

The measure() code has 2 problems:

• it doesn't correctly compute the size
• it doesn't correctly compute the top left coordinate

The size

This is the simplest one: measure returns the size without the transforms applied.
It calls view.getWidth() and view.getHeight() here which are not aware of the transform.

The position

The core of the method here is to take the (0, 0) coordinates and to ask the transform matrix to transform it. It gives you the coordinates of the transformed origin of the view.
The problem is that with a { scaleX: - 1 } transform, since it flips the view, the transformed origin point is in the top-right corner.
The transformed origin is not the top-left bound.

I believe measure() is supposed to return a bounding box (that's what the iOS inspector seems to display). We should compute the transformed coordinates of the 4 corners and easily extract the bounding box from that.

[brunolemos]

Related: #18266

[floriancargoet]

The issue is still here in RN 0.56, I've updated the environment section.

[floriancargoet]

Would a PR implementing the fix suggested in #19637 (comment) be considered?

[MarianBe]

i am facing the same issues on android, any news about it?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[johnhaup]

Issue still exists in .57.4. iOS works fine, but Android does not.

[tominou]

Still a bug on 0.58.3. After a translate, the zone where the Touchable was is still touchable, but the zone where the item is now isn't.