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

[stackia]

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

[stackia]

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.

[elicwhite]

This was fixed in 4aaf629#diff-ff4d5358a97501a402a3f234318497e4 and the pick has been requested for 0.63

[evelant]

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.

[anastely]

So should I add delayPressIn={0} in every TouchableOpacity component I have!

[yz1311]

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

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

[radiosilence]

I am using 0.63.1 and still get the issue with onPressIn

[oliverdolgener]

yep can confirm, the delay is still there. I really hope the gets fixed soon. I don't want to add the delayPressIn={0}-Prop for more than 50 components :(

[mzu]

Same here. I am getting the delay as well (0.63.2). I rely on 3rd party components which utilise TouchableOpacity which complicates matters in regards to just adding delayPressIn={0}.

[xanderdeseyn]

Still having this issue on 0.63.2 as well.