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


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


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:


    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
    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
    CocoaPods: 1.9.3 - /usr/local/bin/pod
    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
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
    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:


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


    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};