Merge pull request #8173 from parasharrajat/app-freeze

Fix: Modal freezing issue on Payments page
Expensify · Mar 20, 2022 · 15ae27b · 15ae27b
2 parents 6c037b9 + 20490a6
commit 15ae27b
Showing 1 changed file with 23 additions and 5 deletions.
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import {View, TouchableOpacity, Dimensions} from 'react-native';
+import {
+    View, TouchableOpacity, Dimensions, InteractionManager, LayoutAnimation,
+} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PaymentMethodList from '../PaymentMethodList';
 import ROUTES from '../../../../ROUTES';
@@ -197,6 +199,10 @@ class BasePaymentsPage extends React.Component {
 
     hidePasswordPrompt() {
         this.setState({shouldShowPasswordPrompt: false});
+
+        // Due to iOS modal freeze issue, password modal freezes the app when closed.
+        // LayoutAnimation undoes the running animation.
+        LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));
     }
 
     makeDefaultPaymentMethod(password) {
@@ -316,9 +322,17 @@ class BasePaymentsPage extends React.Component {
                                 <TouchableOpacity
                                     onPress={() => {
                                         this.setState({
-                                            shouldShowPasswordPrompt: true,
                                             shouldShowDefaultDeleteMenu: false,
-                                            passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+                                        });
+
+                                        // Wait for the previous modal to close, before opening a new one. A modal will be considered completely closed when closing animation is finished.
+                                        // InteractionManager fires after the currently running animation is completed.
+                                        // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
+                                        InteractionManager.runAfterInteractions(() => {
+                                            this.setState({
+                                                shouldShowPasswordPrompt: true,
+                                                passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+                                            });
                                         });
                                     }}
                                     style={[styles.button, styles.alignSelfCenter, styles.w100]}
@@ -332,7 +346,11 @@ class BasePaymentsPage extends React.Component {
                                 onPress={() => {
                                     this.setState({
                                         shouldShowDefaultDeleteMenu: false,
-                                        shouldShowConfirmPopover: true,
+                                    });
+                                    InteractionManager.runAfterInteractions(() => {
+                                        this.setState({
+                                            shouldShowConfirmPopover: true,
+                                        });
                                     });
                                 }}
                                 style={[
@@ -364,7 +382,7 @@ class BasePaymentsPage extends React.Component {
                         isDangerousAction
                     />
                     <ConfirmPopover
-                        contentStyles={[!this.props.isSmallScreenWidth ? styles.sidebarPopover : '']}
+                        contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
                         isVisible={this.state.shouldShowConfirmPopover}
                         title={this.props.translate('paymentsPage.deleteAccount')}
                         prompt={this.props.translate('paymentsPage.deleteConfirmation')}