TouchableOpacity initial opacity bug

[jdmunro]

I've noticed a bug where if you have an opacity set in a style that is used by a TouchableOpacity: the opacity will not be seen until the component has been tapped once. See gif below for an example:

In this example the TouchableOpacity has an opacity specified in a style as 0.2 (to represent a disabled state), however the button must be pressed before the initial opacity is set correctly. You could argue not to use a TouchableOpacity if the component within is disabled however there may be more valid cases for having a different initial opacity.

I believe this could be the source of the bug: https://github.com/facebook/react-native/blob/33d8db599ef8eb85dc27150e04c71719be6ffd26/Libraries/Components/Touchable/TouchableOpacity.js#L72

The default opacity is always set to 1 for the animation. I believe it should take the value from the style if this is possible.

[facebook-github-bot]

Hey jdmunro, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[Hu4F00d]

+1 Any initial opacity style that you give TouchableOpacity is ignored until the first interaction with the element.

[breadadams]

+1 Having the same issue as @jdmunro & @Hu4F00d

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/touchableopacity-initial-opacity-bug

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[Kielan]

this issue should not be closed. @jdmunro gave a very good issue and source and still not resolved.

[xasopheno]

👍 I'm having the same problem.

[drakmail]

👍 have same problem

[beausmith]

Running into this bug ? 🐞

Up-vote this… ➡️ TouchableOpacity initial opacity bug ⬅️