From 3eddc9abb70eb54209c68aab7dbd69e363cc7b29 Mon Sep 17 00:00:00 2001
From: Hetan Thakkar <hetanthakkar1@gmail.com>
Date: Mon, 7 Feb 2022 04:20:47 -0800
Subject: [PATCH] Opacity in TouchableOpacity properly react to state change
 (#32956)

Summary:
This PR fixes the opacity bug where it fails to properly react to state change. This PR resolves the issue detailed in https://github.com/facebook/react-native/issues/32476

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fixed opacity value in TouchableOpacity

Pull Request resolved: https://github.com/facebook/react-native/pull/32956

Test Plan: The code I added in componentDidUpdate does solve the issue and passes all the test cases

Reviewed By: ryancat

Differential Revision: D33766718

Pulled By: cortinico

fbshipit-source-id: 951bedf22619fc12e66156d0a6074cd8adf1d3eb
---
 Libraries/Components/Touchable/TouchableOpacity.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 089c50c008f7bb..6d78af53a9cb45 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -260,7 +260,12 @@ class TouchableOpacity extends React.Component<Props, State> {
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
-    if (this.props.disabled !== prevProps.disabled) {
+    if (
+      this.props.disabled !== prevProps.disabled ||
+      (flattenStyle(prevProps.style)?.opacity !==
+        flattenStyle(this.props.style)?.opacity) !==
+        undefined
+    ) {
       this._opacityInactive(250);
     }
   }