Merge pull request #16443 from gedu/edu/15270_viewport_jumping_up

Viewport jumping up
Expensify · Apr 21, 2023 · 4341da6 · 4341da6
2 parents a33b719 + b90d6c8
commit 4341da6
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 5 deletions.
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
@@ -94,6 +94,8 @@ class ScreenWrapper extends React.Component {
     }
 
     render() {
+        const maxHeight = this.props.shouldEnableMaxHeight ? this.props.windowHeight : undefined;
+
         return (
             <SafeAreaConsumer>
                 {({
@@ -120,7 +122,7 @@ class ScreenWrapper extends React.Component {
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})}
                         >
-                            <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 />
                                 {(this.props.environment === CONST.ENVIRONMENT.DEV) && <TestToolsModal />}
                                 {(this.props.environment === CONST.ENVIRONMENT.DEV) && <CustomDevMenu />}

diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
@@ -34,6 +34,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,
+
     ...windowDimensionsPropTypes,
 
     ...environmentPropTypes,
@@ -47,6 +50,7 @@ const defaultProps = {
     onEntryTransitionEnd: () => {},
     modal: {},
     keyboardAvoidingViewBehavior: 'padding',
+    shouldEnableMaxHeight: false,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
@@ -233,7 +233,7 @@ class NewChatPage extends Component {
             maxParticipantsReached,
         );
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight>
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithCloseButton

diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -57,7 +57,7 @@ class MoneyRequestDescriptionPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight>
                 <HeaderWithCloseButton
                     title={this.props.translate('common.description')}
                     shouldShowBackButton

diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js
@@ -28,6 +28,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.
@@ -367,8 +368,10 @@ const MoneyRequestModal = (props) => {
         />
     );
     const amountButtonText = isEditingAmountAfterConfirm ? props.translate('common.save') : props.translate('common.next');
+    const enableMaxHeight = DeviceCapabilities.canUseTouchScreen() && currentStep === Steps.MoneyRequestParticipants;
+
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper includeSafeAreaPaddingBottom={false} shouldEnableMaxHeight={enableMaxHeight}>
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
                     <View style={[styles.pRelative, styles.flex1]}>

diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
@@ -300,7 +300,7 @@ class WorkspaceInvitePage extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper shouldEnableMaxHeight>
                 {({didScreenTransitionEnd}) => (
                     <FullPageNotFoundView
                         shouldShow={_.isEmpty(this.props.policy)}