[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.

[radiosilence]

I did this eventually, luckily I am in a single person codebase which is quite small:

import React, { PropsWithChildren } from 'react';
import {
  TouchableWithoutFeedback,
  TouchableNativeFeedbackProps,
  View,
} from 'react-native';

type TouchableInstantProps = PropsWithChildren<
  Omit<TouchableNativeFeedbackProps, 'children'>
>;

export default function TouchableInstant({
  children,
  style,
  ...rest
}: TouchableInstantProps) {
  return (
    <TouchableWithoutFeedback {...rest} delayPressIn={0}>
      {children ?? <View style={style} />}
    </TouchableWithoutFeedback>
  );
}

But you could do the same with TouchableOpacity I think. Seems kind of dumb, but I see both sides to the argument. I think changing the default behaviour is kind of leaving everyone who's already assumed the default is 0 high and dry because they now have to go back to their team and find workarounds, replace loads of stuff, and get PRs approved.

Not even considering dependencies.

What would have been sensible is for Pressable, the new API, to use the 130ms onPressIn delay (configurable via prop), and leave the legacy Touchables alone, so as to not cause a whole load of headache for people who are probably already tired from upgrading to 0.63.

I'd say revert it, personally, else upgrading to 0.63 is just going to make everyone's app feel sluggish.

[stackia]

Closed in favor of #29376

[ramdhanymf]

To resolve this issue, here is the following step:

1. Go to node_modules/react-native/Libraries/Pressability/Pressability.js
2. Change DEFAULT_PRESS_DELAY_MS and DEFAULT_MIN_PRESS_DURATION to 0
3. Annnnndd it solved the problem!

So, you do not have to add delayPressIn={0} to every single TouchableOpacity component or migrate to Pressable component. Moreover, I also saw that even some people still find the delay in opacity change at the newest update of React Native (v0.63+).

So far my solution works for me, and hopefully it works for you guys also.

Cheers. 🤟

[allanzi]

Still getting this issue

[allanzi]

The solution for this is use a patch-package, like this comment