Skip to content

TouchableOpacity with transform and absolute position #28826

@Skizu

Description

@Skizu

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

When using a style such as { position: 'absolute', transform: [{ scale: -1 }] } the onPress does not always get fired, and onPressOut gets fired whilst you are still pressed down.

React Native version:

React Native Environment Info:
System:
OS: macOS 10.15.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 22.19 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /var/folders/hb/7rnt8tq10n7gsrb32sqldxnw0000gn/T/yarn--1588632900439-0.14099588561658694/node
Yarn: 1.16.0 - /var/folders/hb/7rnt8tq10n7gsrb32sqldxnw0000gn/T/yarn--1588632900439-0.14099588561658694/yarn
npm: 6.9.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.3
System Images: android-21 | Google APIs Intel x86 Atom_64, android-22 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-R | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.59.10 => 0.59.10
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

  1. Press TouchableOpacity
  2. onPress not called.

Expected Results

Describe what you expected to happen.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/iEjujCi!6

renderButton: function() {
  return (
    <TouchableOpacity
      onPress={this._onPressButton}
      style={{ transform: [{ scale: -1 }], position: 'absolute' }}
    >
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions