Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Modal freezing issue on Payments page #8173

Merged
merged 3 commits into from
Mar 20, 2022
Merged

Fix: Modal freezing issue on Payments page #8173

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13f40fd
Fix: Modal freezing issue on Payments page
parasharrajat Mar 15, 2022
31ad8c1
Correct prop values and remove warning
parasharrajat Mar 16, 2022
20490a6
Add more comments
parasharrajat Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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]}
Expand All @@ -332,7 +346,11 @@ class BasePaymentsPage extends React.Component {
onPress={() => {
this.setState({
shouldShowDefaultDeleteMenu: false,
shouldShowConfirmPopover: true,
});
InteractionManager.runAfterInteractions(() => {
this.setState({
shouldShowConfirmPopover: true,
});
});
}}
style={[
Expand Down Expand Up @@ -364,7 +382,7 @@ class BasePaymentsPage extends React.Component {
isDangerousAction
/>
<ConfirmPopover
contentStyles={[!this.props.isSmallScreenWidth ? styles.sidebarPopover : '']}
contentStyles={!this.props.isSmallScreenWidth ? [styles.sidebarPopover] : undefined}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why change to undefined instead of [""] which was there previously? Just curious.

Otherwise just missing the comments and we should be good to go.

Copy link
Member Author

@parasharrajat parasharrajat Mar 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting it to undefined is like resetting it. So it will automatically take dfaultProp value for this prop.

[""] is the wrong value for this prop. It expects it to be Array<Object>.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha! thanks for the explanation.

isVisible={this.state.shouldShowConfirmPopover}
title={this.props.translate('paymentsPage.deleteAccount')}
prompt={this.props.translate('paymentsPage.deleteConfirmation')}
Expand Down