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