TouchableOpacity no longer shows opacity tap effects on 0.63.0

[ethanneff]

Description

TouchableOpacity no longer shows opacity tap effects on 0.63.0

React Native version:

0.63.0

Steps To Reproduce

1. See opacity effects with <TouchableOpacity /> on 0.62.2
2. See NO opacity effects with <TouchableOpacity /> on 0.63.0

Expected Results

Opacity effects work

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

    <TouchableOpacity
      disabled={disabled}
      onLongPress={onLongPressHandler}
      onPress={onPressHandler}
      style={style}
      testID={testID}>
      {children}
    </TouchableOpacity>

[exneval]

Confirm this as well on 0.63.0

[cristianoccazinsp]

Can you test setting delayPressIn={0} ? I think this is the same issue I'm seeing with onPressIn not firing as before (it won't fire due to some new default value for the delay prop)

[lukewlms]

This repros for us in 0.63.1 as well. This is extremely important - not having any button feedback means we can't launch this version of the app.

Can confirm the delayPressIn solution from @cristianoccazinsp works but it's a hack to apply that to every button (and of course quite non-obvious). Looks like a fairly severe bug in 0.63.x.

[sauravsid]

For me too. They should have left Touchables alone and worked on Pressables only.

[CyrusZei]

any update on this?
I can confirm that adding delayPressIn={0} fix the issue so we could use that until they have fixed it.

[CyrusZei]

You can use my snack url that I have created for the issue that I have closed.

[matinzd]

any update on this?
I can confirm that adding delayPressIn={0} fix the issue so we could use that until they have fixed it.

I had the same problem. Adding delayPressIn={0} fixed for me!

[farshed]

No need to add delayPressIn={0} to every TouchableOpacity. Just add the following code to your root component's componentDidMount.

if (TouchableOpacity.defaultProps == null) TouchableOpacity.defaultProps = {};
TouchableOpacity.defaultProps.delayPressIn = 0;

[brentvatne]

this is fixed in react-native@0.63.3 - https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0633

[maxbaldrighi]

Hello.

I feel the need to reopen this issue.
I'm running react-native 0.63.4, and everything works normally until I configure a component such as:

const StyledText = props => {
  return props.onPress ? (
    <TouchableOpacity onPress={props.onPress}>
      <Text
        {...props}
        style={{
          ...R.styles.textAccent,
          ...props.style,
        }}>
        {props.text}
      </Text>
    </TouchableOpacity>
  ) : (
    <Text
      {...props}
      style={{
        ...R.styles.textAccent,
        ...props.style,
      }}>
      {props.text}
    </Text>
  );
};

It looks like the presence of {...props} prevents the tap effect to show. But I confirm that by removing that piece of code TouchableOpacity starts behaving correctly again.

At the moment I could try this behavior only on iOS.