Viewport jumping up

src/components/ScreenWrapper/index.js

@@ -85,6 +85,8 @@ class ScreenWrapper extends React.Component {
     }
 
     render() {
+        const maxHeight = this.props.shouldEnableMaxHeight ? this.props.windowHeight : null;
+
         return (
             <SafeAreaConsumer>
                 {({
@@ -109,7 +111,7 @@ class ScreenWrapper extends React.Component {
                                 paddingStyle,
                             ]}
                         >
-                            <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
+                            <KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
                                 <HeaderGap />
                                 {// If props.children is a function, call it to provide the insets to the children.
                                     _.isFunction(this.props.children)

src/components/ScreenWrapper/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 const propTypes = {
     /** Array of additional styles to add */
@@ -31,6 +32,9 @@ const propTypes = {
 
     /** Whether to dismiss keyboard before leaving a screen */
     shouldDismissKeyboardBeforeClose: PropTypes.bool,
+
+    /** Whether to use the maxHeight (true) or use the 100% of the height (false) */
+    shouldEnableMaxHeight: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -41,6 +45,7 @@ const defaultProps = {
     onEntryTransitionEnd: () => {},
     modal: {},
     keyboardAvoidingViewBehavior: 'padding',
+    shouldEnableMaxHeight: !DeviceCapabilities.canUseTouchScreen(),
 };
 
 export {propTypes, defaultProps};

src/pages/NewChatPage.js

@@ -233,7 +233,7 @@ class NewChatPage extends Component {
             maxParticipantsReached,
         );
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight>
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithCloseButton

src/pages/iou/MoneyRequestModal.js

@@ -29,6 +29,7 @@ import {withNetwork} from '../../components/OnyxProvider';
 import reportPropTypes from '../reportPropTypes';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as ReportScrollManager from '../../libs/ReportScrollManager';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 /**
  * A modal used for requesting money, splitting bills or sending money.
@@ -343,8 +344,10 @@ const MoneyRequestModal = (props) => {
     const reportID = lodashGet(props, 'route.params.reportID', '');
     const shouldShowBackButton = currentStepIndex > 0;
     const modalHeader = <ModalHeader title={titleForStep} shouldShowBackButton={shouldShowBackButton} onBackButtonPress={navigateToPreviousStep} />;
+    const enableMaxHeight = DeviceCapabilities.canUseTouchScreen() && currentStep !== Steps.IOUAmount;
+
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight={enableMaxHeight}>
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
                     <View style={[styles.pRelative, styles.flex1]}>