Merge branch 'Expensify:main' into alfredo-fix-textinput-area

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/Modal/index.ios.js

@@ -1,21 +1,15 @@
 import React from 'react';
-import {SafeAreaView} from 'react-native';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
 import {propTypes, defaultProps} from './ModalPropTypes';
 
-// Only want to use <SafeAreaView> on iOS. Avoids ScrollBar in the middle of the modal.
-// https://github.com/facebook/react-native/issues/26610
 const Modal = props => (
-    <SafeAreaView>
-        <BaseModal
+    <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-        >
-            {props.children}
-        </BaseModal>
-    </SafeAreaView>
-
+        {...props}
+    >
+        {props.children}
+    </BaseModal>
 );
 
 Modal.propTypes = propTypes;

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,
 };

src/pages/iou/steps/IOUAmountPage.js

@@ -76,14 +76,28 @@ class IOUAmountPage extends React.Component {
         this.updateAmountNumberPad = this.updateAmountNumberPad.bind(this);
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
+        this.focusTextInput = this.focusTextInput.bind(this);
 
         this.state = {
             amount: props.selectedAmount,
         };
     }
 
     componentDidMount() {
-        // Component is not initialized yet due to navigation transitions
+        this.focusTextInput();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.iou.selectedCurrencyCode !== prevProps.iou.selectedCurrencyCode) {
+            this.focusTextInput();
+        }
+    }
+
+    /**
+     * Focus text input
+     */
+    focusTextInput() {
+        // Component may not initialized due to navigation transitions
         // Wait until interactions are complete before trying to focus
         InteractionManager.runAfterInteractions(() => {
             // Focus text input