[0.63] TouchableOpacity has a slightly delay between press and opacity change

Description

0.63.0 changes the default behavior of TouchableOpacity causing a 130ms delay between the press and opacity change.

fc45530#diff-ff4d5358a97501a402a3f234318497e4R273-R276

Before 0.63: TouchableOpacity will instantly become semi-transparent when pressed.
0.63.0: A simple press will not trigger the opacity change. Only ‘press and hold’ will make it semi-transparent.

TouchableOpacity is usually used as the base of customized buttons, where most interactions should be simple presses (without hold). Such change makes it super hard to trigger the opacity animation, causing many customized buttons feels so non-interactive.

React Native version:

0.63.0

System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.60 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 27, 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-28 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_251 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python

Steps To Reproduce

<TouchableOpacity /> by default will have a 130ms delay between press and opacity change.

Expected Results

<TouchableOpacity /> should behave like <TouchableOpacity delayPressIn={0} />.

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

https://snack.expo.io/jilPTbg9l

5 thoughts on “[0.63] TouchableOpacity has a slightly delay between press and opacity change

  1. We now have Pressable Component check it out here…

    The react native team encourages you now to use the Pressable Component instead of the TouchableOpacity

    https://reactnative.dev/blog/2020/07/06/version-0.63#pressable

    It’s difficult to migrate all existing <TouchableOpacity /> to <Pressable />. <TouchableOpacity /> is such an important base component that is used to build many existing interactive components. I think 0.63 should maintain backward compatibility for TouchabeOpacity.

  2. This affects the behavior of onPress as well which is IMO a much bigger deal. It’s a really big behavior change that now users cannot just tap on TouchableOpacity in my app — they must tap and hold for 130ms to trigger the onPress. That breaks a lot of interactions.

    edit: disregard, the error was in my app code. TouchableOpacity seems fine other than the delay in opacity change mentioned in this issue.

  3. A workaround is to add below code in the entry file:

    TouchableOpacity.defaultProps = {...(TouchableOpacity.defaultProps || {}), delayPressIn: 0};