Merge pull request #2525 from Expensify/marcaaron-fixSomeIpadIssues

Fix iPad overlay / click away handler issues

package.json

@@ -10,6 +10,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "ipad": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (4th generation)\"",
+    "ipad-sm": "react-native run-ios --simulator=\"iPad Pro (9.7-inch)\"",
     "desktop": "node desktop/start.js",
     "start": "react-native start",
     "web": "node web/proxy.js & webpack-dev-server --open --config config/webpack/webpack.dev.js",

src/ROUTES.js

@@ -1,5 +1,5 @@
 import lodashGet from 'lodash/get';
-import {addTrailingForwardSlash} from './libs/Url';
+import {wrapWithForwardSlash} from './libs/Url';
 
 /**
  * This is a file containing constants for all of the routes we want to be able to go to
@@ -43,7 +43,7 @@ export default {
      * @returns {Object}
      */
     parseReportRouteParams: (route) => {
-        if (!route.startsWith(addTrailingForwardSlash(REPORT))) {
+        if (!route.startsWith(wrapWithForwardSlash(REPORT))) {
             return {};
         }
 

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -179,6 +179,7 @@ class AuthScreens extends React.Component {
             cardStyleInterpolator: modalCardStyleInterpolator,
             animationEnabled: true,
             gestureDirection: 'horizontal',
+            cardOverlayEnabled: true,
 
             // This is a custom prop we are passing to custom navigator so that we will know to add a Pressable overlay
             // when displaying a modal. This allows us to dismiss by clicking outside on web / large screens.

src/libs/Navigation/AppNavigator/ClickAwayHandler/ClickAwayHandler.js → src/libs/Navigation/AppNavigator/ClickAwayHandler.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Pressable} from 'react-native';
-import Navigation from '../../Navigation';
-import styles from '../../../../styles/styles';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import Navigation from '../Navigation';
+import styles from '../../../styles/styles';
 
 const propTypes = {
+    // Whether a modal is currently being displayed
     isDisplayingModal: PropTypes.bool.isRequired,
+
+    ...windowDimensionsPropTypes,
 };
 
 const ClickAwayHandler = (props) => {
-    if (!props.isDisplayingModal) {
+    if (!props.isDisplayingModal || props.isSmallScreenWidth) {
         return null;
     }
 
@@ -23,4 +27,4 @@ const ClickAwayHandler = (props) => {
 
 ClickAwayHandler.propTypes = propTypes;
 ClickAwayHandler.displayName = 'ClickAwayHandler';
-export default ClickAwayHandler;
+export default withWindowDimensions(ClickAwayHandler);

src/libs/Url.js

@@ -10,7 +10,23 @@ function addTrailingForwardSlash(url) {
     return url;
 }
 
+/**
+ * Add / to the beginning and end of any URL if not present
+ * @param {String} url
+ * @returns {String}
+ */
+function wrapWithForwardSlash(url) {
+    const newUrl = addTrailingForwardSlash(url);
+    if (newUrl.startsWith('/')) {
+        return newUrl;
+    }
+
+    return `/${newUrl}`;
+}
+
+
 export {
     // eslint-disable-next-line import/prefer-default-export
     addTrailingForwardSlash,
+    wrapWithForwardSlash,
 };