Merge pull request #30065 from sarious/fix/17866

Fix 17866: After pressing the back arrow to "Send/Request money" screen, the keyboard flashes

src/components/ScreenWrapper/index.js

@@ -11,6 +11,7 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import TestToolsModal from '@components/TestToolsModal';
 import useEnvironment from '@hooks/useEnvironment';
+import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -22,6 +23,7 @@ import {defaultProps, propTypes} from './propTypes';
 
 function ScreenWrapper({
     shouldEnableMaxHeight,
+    shouldEnableMinHeight,
     includePaddingTop,
     keyboardAvoidingViewBehavior,
     includeSafeAreaPaddingBottom,
@@ -37,12 +39,14 @@ function ScreenWrapper({
     testID,
 }) {
     const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {initialHeight} = useInitialDimensions();
     const keyboardState = useKeyboardState();
     const {isDevelopment} = useEnvironment();
     const {isOffline} = useNetwork();
     const navigation = useNavigation();
     const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
+    const minHeight = shouldEnableMinHeight ? initialHeight : undefined;
     const isKeyboardShown = lodashGet(keyboardState, 'isKeyboardShown', false);
 
     const panResponder = useRef(
@@ -125,7 +129,7 @@ function ScreenWrapper({
                             {...keyboardDissmissPanResponder.panHandlers}
                         >
                             <KeyboardAvoidingView
-                                style={[styles.w100, styles.h100, {maxHeight}]}
+                                style={[styles.w100, styles.h100, {maxHeight, minHeight}]}
                                 behavior={keyboardAvoidingViewBehavior}
                                 enabled={shouldEnableKeyboardAvoidingView}
                             >

src/components/ScreenWrapper/propTypes.js

@@ -37,6 +37,9 @@ const propTypes = {
     /** Whether to use the maxHeight (true) or use the 100% of the height (false) */
     shouldEnableMaxHeight: PropTypes.bool,
 
+    /** Whether to use the minHeight. Use true for screens where the window height are changing because of Virtual Keyboard */
+    shouldEnableMinHeight: PropTypes.bool,
+
     /** Array of additional styles for header gap */
     headerGapStyles: PropTypes.arrayOf(PropTypes.object),
 

src/hooks/useInitialWindowDimensions/index.js

@@ -0,0 +1,59 @@
+// eslint-disable-next-line no-restricted-imports
+import {useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
+import {initialWindowMetrics} from 'react-native-safe-area-context';
+
+/**
+ * A convenience hook that provides initial size (width and height).
+ * An initial height allows to know the real height of window,
+ * while the standard useWindowDimensions hook return the height minus Virtual keyboard height
+ * @returns {Object} with information about initial width and height
+ */
+export default function () {
+    const [dimensions, setDimensions] = useState(() => {
+        const window = Dimensions.get('window');
+        const screen = Dimensions.get('screen');
+
+        return {
+            screenHeight: screen.height,
+            screenWidth: screen.width,
+            initialHeight: window.height,
+            initialWidth: window.width,
+        };
+    });
+
+    useEffect(() => {
+        const onDimensionChange = (newDimensions) => {
+            const {window, screen} = newDimensions;
+
+            setDimensions((oldState) => {
+                if (screen.width !== oldState.screenWidth || screen.height !== oldState.screenHeight || window.height > oldState.initialHeight) {
+                    return {
+                        initialHeight: window.height,
+                        initialWidth: window.width,
+                        screenHeight: screen.height,
+                        screenWidth: screen.width,
+                    };
+                }
+
+                return oldState;
+            });
+        };
+
+        const dimensionsEventListener = Dimensions.addEventListener('change', onDimensionChange);
+
+        return () => {
+            if (!dimensionsEventListener) {
+                return;
+            }
+            dimensionsEventListener.remove();
+        };
+    }, []);
+
+    const bottomInset = initialWindowMetrics && initialWindowMetrics.insets && initialWindowMetrics.insets.bottom ? initialWindowMetrics.insets.bottom : 0;
+
+    return {
+        initialWidth: dimensions.initialWidth,
+        initialHeight: dimensions.initialHeight - bottomInset,
+    };
+}

src/pages/EditRequestAmountPage.js

@@ -4,6 +4,7 @@ import React, {useCallback, useRef} from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import MoneyRequestAmountForm from './iou/steps/MoneyRequestAmountForm';
 
@@ -43,6 +44,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onNavigateToCurr
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             testID={EditRequestAmountPage.displayName}
         >
             <HeaderWithBackButton title={translate('iou.amount')} />

src/pages/iou/MoneyRequestSelectorPage.js

@@ -12,6 +12,7 @@ import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
@@ -94,6 +95,7 @@ function MoneyRequestSelectorPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
+            shouldEnableMinHeight={DeviceCapabilities.canUseTouchScreen()}
             headerGapStyles={isDraggingOver ? [styles.receiptDropHeaderGap] : []}
             testID={MoneyRequestSelectorPage.displayName}
         >