Merge pull request #5889 from parasharrajat/ESC-confirmModal

Fix: Modal and screen closing with single `esacpe` keypress

Author: Julesssss

src/components/Modal/BaseModal.js

@@ -7,7 +7,7 @@ import styles, {getModalPaddingStyles, getSafeAreaPadding} from '../../styles/st
 import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './ModalPropTypes';
 import getModalStyles from '../../styles/getModalStyles';
-import {setModalVisibility} from '../../libs/actions/Modal';
+import {setModalVisibility, willAlertModalBecomeVisible} from '../../libs/actions/Modal';
 
 const propTypes = {
     ...modalPropTypes,
@@ -28,6 +28,12 @@ class BaseModal extends PureComponent {
         this.hideModal = this.hideModal.bind(this);
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isVisible !== this.props.isVisible) {
+            willAlertModalBecomeVisible(this.props.isVisible);
+        }
+    }
+
     componentWillUnmount() {
         // we don't want to call the onModalHide on unmount
         this.hideModal(this.props.isVisible);

src/components/ScreenWrapper.js

@@ -4,11 +4,14 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withNavigation} from '@react-navigation/compat';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import {withOnyx} from 'react-native-onyx';
 import styles, {getSafeAreaPadding} from '../styles/styles';
 import HeaderGap from './HeaderGap';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
 import onScreenTransitionEnd from '../libs/onScreenTransitionEnd';
 import Navigation from '../libs/Navigation/Navigation';
+import compose from '../libs/compose';
+import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -34,6 +37,13 @@ const propTypes = {
         // Method to attach listener to Navigation state.
         addListener: PropTypes.func.isRequired,
     }),
+
+    /** Details about any modals being used */
+    modal: PropTypes.shape({
+        /** Indicates when an Alert modal is about to be visible */
+        willAlertModalBecomeVisible: PropTypes.bool,
+    }),
+
 };
 
 const defaultProps = {
@@ -44,6 +54,7 @@ const defaultProps = {
     navigation: {
         addListener: () => {},
     },
+    modal: {},
 };
 
 class ScreenWrapper extends React.Component {
@@ -56,7 +67,9 @@ class ScreenWrapper extends React.Component {
 
     componentDidMount() {
         this.unsubscribeEscapeKey = KeyboardShortcut.subscribe('Escape', () => {
-            Navigation.dismissModal();
+            if (!this.props.modal.willAlertModalBecomeVisible) {
+                Navigation.dismissModal();
+            }
         }, [], true);
 
         this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
@@ -116,4 +129,11 @@ class ScreenWrapper extends React.Component {
 ScreenWrapper.propTypes = propTypes;
 ScreenWrapper.defaultProps = defaultProps;
 ScreenWrapper.displayName = 'ScreenWrapper';
-export default withNavigation(ScreenWrapper);
+export default compose(
+    withNavigation,
+    withOnyx({
+        modal: {
+            key: ONYXKEYS.MODAL,
+        },
+    }),
+)(ScreenWrapper);

src/libs/actions/Modal.js

@@ -4,13 +4,23 @@ import ONYXKEYS from '../../ONYXKEYS';
 /**
  * Allows other parts of the app to know when a modal has been opened or closed
  *
- * @param {bool} isVisible
+ * @param {Boolean} isVisible
  */
 function setModalVisibility(isVisible) {
     Onyx.merge(ONYXKEYS.MODAL, {isVisible});
 }
 
+/**
+ * Allows other parts of app to know that an alert modal is about to open.
+ * This will trigger as soon as a modal is opened but not yet visible while animation is running.
+ *
+ * @param {Boolean} isVisible
+ */
+function willAlertModalBecomeVisible(isVisible) {
+    Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible});
+}
+
 export {
-    // eslint-disable-next-line import/prefer-default-export
     setModalVisibility,
+    willAlertModalBecomeVisible,
 };