scale 0 touchable is clickable, inherits dimensions from random views

[vanaigr]

Description

If a transform scaleY: 0 is applied to a view with e.g. TouchableWithoutFeedback inside, the clicks are still registered as if TouchableWithoutFeedback had some height.

The height matches height of another TouchableWithoutFeedback in the hierarchy.

Steps to reproduce

1. Connect an Android device.
2. git clone https://github.com/vanaigr/react-native-scale-0-bug and cd into the directory
3. npm i
4. npm run android
5. Wait until the app is started on the device
6. From Metro, open DevTools
7. On the phone, change Scale: input to 0.5
8. Click within 50% from the center of the green rectangle. Observe message 1 clicked appears in console.
9. Click outide 50% from the center of the green rectangle. Observe no additional messages are printed.
10. Change Scale: input to 0.9
11. Click outide 50%, but within 90% from the center of the green rectangle. Observe message 1 clicked printed in console.
12. Change Scale: input to 0
13. Click near the middle of the blue rectangle. Observe message 2 clicked printed in console.

React Native Version

0.79.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: Windows 10 10.0.19045
  CPU: "(12) x64 AMD Ryzen 5 4500 6-Core Processor              "
  Memory: 5.91 GB / 15.87 GB
Binaries:
  Node:
    version: 20.16.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.8.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.9.34723.18 (Visual Studio Community 2022)
Languages:
  Java: 17.0.13
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.0
    wanted: 0.79.0
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

N/A

Reproducer

https://github.com/vanaigr/react-native-scale-0-bug

Screenshots and Videos

2025-04-18.00-04-30.mp4

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.79.1. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[vanaigr]

Reproducible on 0.79.1

[vanaigr]

Similar (but different) behavior is present in 0.76.9

[cipolleschi]

@vanaigr thanks for the issue. We will look into it as soon as possible.

I believe this is the reproducer, am I correct?

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json'
import React from 'react'
import { View, Text, TouchableWithoutFeedback, TextInput } from 'react-native'

function App() {
    const [value, setValue] = React.useState('0.9')
    const [scale, setScale] = React.useState(0.9)

    return <View>
        <View style={{ backgroundColor: 'green', marginTop: 50 }}>
            <View style={{ height: 200, transform: [{ scaleY: 0 }] }}>
                <TouchableWithoutFeedback onPress={() => console.log('1 clicked')}>
                    <View style={{ flex: 1, backgroundColor: 'red' }}>
                        <Text>View 1</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        </View>
        <View style={{ backgroundColor: 'blue', marginTop: 50 }}>
            <View style={{ height: 200, transform: [{ scaleY: scale }] }}>
                <TouchableWithoutFeedback onPress={() => console.log('2 clicked')}>
                    <View style={{ flex: 1, backgroundColor: 'red' }}>
                        <Text>View 2</Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        </View>
        <View>
            <Text>Scale:</Text>
            <TextInput value={value} onChangeText={it => {
                setValue(it)
                const p = parseFloat(it)
                if(isFinite(p)) setScale(p)
            }}/>
        </View>
    </View>
}

AppRegistry.registerComponent(appName, () => App);

[vanaigr]

I believe this is the reproducer, am I correct?

yes

[cortinico]

This reproduces correctly here:

• @nocommit - Reproducer for #50797 #51075

The thing is that this bug is not a New Arch regression, as it's happening also on Legacy Arch.

So there are 2 problems:

1. The view that has scaleY: 0 from the beginning is "inheriting" the touch target sizing from another view in the hierarchy. If you change the scale in the second view, you can see it changing.

2. When you set scaleY: 0, the touch target are not properly recomputed, and the last touch target are used. So if your view had scaleY: 0.9 and then you update to scaleY: 0.0 you will have 90% of the view still touchable. This is observable in the second view alone.

We would need to fix those bugs, but as they're not a NewArch regression they have lower priority.

I think #51075 could be a good starting point if someone wants to contribute here.