From 43b4958b807ccb68336f83e1375888f83aca76be Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Mon, 8 Aug 2022 13:41:08 +0200
Subject: [PATCH] Merge pull request #10229 from
 Expensify/beaman-fixButtonOpacityProblem

Fix button opacity problem when saving personal details

(cherry picked from commit f6cb21037e80a9ce03bfa8ae4b915dcadf96f939)
---
 src/components/OpacityView.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js
index 162aa6fa585e..9b6ebcc018b4 100644
--- a/src/components/OpacityView.js
+++ b/src/components/OpacityView.js
@@ -21,6 +21,7 @@ class OpacityView extends React.Component {
     constructor(props) {
         super(props);
         this.opacity = new Animated.Value(1);
+        this.undim = this.undim.bind(this);
     }
 
     componentDidUpdate(prevProps) {
@@ -33,14 +34,26 @@ class OpacityView extends React.Component {
         }
 
         if (prevProps.shouldDim && !this.props.shouldDim) {
-            Animated.timing(this.opacity, {
-                toValue: 1,
-                duration: 50,
-                useNativeDriver: true,
-            }).start();
+            this.undim();
         }
     }
 
+    undim() {
+        Animated.timing(this.opacity, {
+            toValue: 1,
+            duration: 50,
+            useNativeDriver: true,
+        }).start(({finished}) => {
+            // If animation doesn't finish because Animation.stop was called
+            // (e.g. because it was interrupted by a gesture or another animation),
+            // restart animation so we always make sure the component gets completely shown.
+            if (finished) {
+                return;
+            }
+            this.undim();
+        });
+    }
+
     render() {
         return (
             <Animated.View