From 8aed1c7c6ca7d3216fa42ac980ff001b272793cc Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 12 Dec 2022 11:49:53 -0700 Subject: [PATCH 1/5] Play around with keyboard detection on iOS --- ios/Podfile.lock | 4 +- .../SignInPageLayout/SignInPageContent.js | 59 ++++++++++--------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index c696014a9b31..b4226a18fb71 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -472,7 +472,7 @@ PODS: - React-Core - react-native-image-manipulator (1.0.5): - React - - react-native-image-picker (4.10.1): + - react-native-image-picker (4.10.2): - React-Core - react-native-netinfo (8.3.1): - React-Core @@ -980,7 +980,7 @@ SPEC CHECKSUMS: react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88 react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4 react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56 - react-native-image-picker: f2ab1215d17bcfe27b0eb6417cc236fd1f4775e7 + react-native-image-picker: bf34f3f516d139ed3e24c5f5a381a91819e349ea react-native-netinfo: 1a6035d3b9780221d407c277ebfb5722ace00658 react-native-pdf: 33c622cbdf776a649929e8b9d1ce2d313347c4fa react-native-plaid-link-sdk: 77052f329310ff5a36ddda276793f40d27c02bc4 diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 1206a0f01823..f9d2f680ec3f 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -12,6 +12,7 @@ import SignInPageForm from '../../../components/SignInPageForm'; import compose from '../../../libs/compose'; import withKeyboardState from '../../../components/withKeyboardState'; import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; const propTypes = { /** The children to show inside the layout */ @@ -29,6 +30,7 @@ const propTypes = { }; const SignInPageContent = (props) => { + console.log('!!!', props.isShown, props.windowHeight); const dismissKeyboardWhenTappedOutsideOfInput = () => { // This prop comes from withKeyboardState if (!props.isShown) { @@ -44,38 +46,39 @@ const SignInPageContent = (props) => { styles.flex1, styles.signInPageLeftContainer, !props.isSmallScreenWidth && styles.signInPageLeftContainerWide, + {backgroundColor: 'red'}, ]} > - - {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} - + + {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} + - - - - - - {props.shouldShowWelcomeText && ( - - - {props.welcomeText} - + + + + - )} - {props.children} - - - - - - + {props.shouldShowWelcomeText && ( + + + {props.windowHeight}{props.welcomeText} + + + )} + {props.children} + + + + + + ); From 590d793ba6c5b6791e225624c009fa5ea11162e2 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 12 Dec 2022 14:22:31 -0700 Subject: [PATCH 2/5] Add bottom margin when keyboard is shown --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index f9d2f680ec3f..b0efbc812867 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -51,7 +51,7 @@ const SignInPageContent = (props) => { > {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} - + @@ -75,7 +75,7 @@ const SignInPageContent = (props) => { {props.children} - + From d3929a1308498bf02a1428e1dce8a7b14acd1a71 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Mon, 12 Dec 2022 14:26:08 -0700 Subject: [PATCH 3/5] Add bottom margin when keyboard is shown --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index b0efbc812867..3f2a7e8bb877 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -68,7 +68,7 @@ const SignInPageContent = (props) => { {props.shouldShowWelcomeText && ( - {props.windowHeight}{props.welcomeText} + {props.welcomeText} )} From c55c17be82abf0283d7ea6ee2adb872e8e85dfab Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Tue, 13 Dec 2022 16:10:33 +0800 Subject: [PATCH 4/5] use keyboardVerticalOffset prop instead of conditionally setting marginBottom on the TermsAndLicenses --- src/pages/signin/SignInPageLayout/SignInPageContent.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 3f2a7e8bb877..e3f1862b09d0 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -30,7 +30,6 @@ const propTypes = { }; const SignInPageContent = (props) => { - console.log('!!!', props.isShown, props.windowHeight); const dismissKeyboardWhenTappedOutsideOfInput = () => { // This prop comes from withKeyboardState if (!props.isShown) { @@ -49,7 +48,7 @@ const SignInPageContent = (props) => { {backgroundColor: 'red'}, ]} > - + {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} @@ -75,7 +74,7 @@ const SignInPageContent = (props) => { {props.children} - + From d63b4e5edcacc64a35b06e564e5003281a7ce905 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 13 Dec 2022 08:35:26 -0700 Subject: [PATCH 5/5] Cleanup all debug stuff and add keyboard vertical offset --- src/components/KeyboardAvoidingView/index.js | 2 +- .../SignInPageLayout/SignInPageContent.js | 64 ++++++++++--------- 2 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/components/KeyboardAvoidingView/index.js b/src/components/KeyboardAvoidingView/index.js index 76fe55058fb4..94c0369c0f5c 100644 --- a/src/components/KeyboardAvoidingView/index.js +++ b/src/components/KeyboardAvoidingView/index.js @@ -8,7 +8,7 @@ import _ from 'underscore'; const KeyboardAvoidingView = (props) => { const viewProps = _.omit(props, ['behavior', 'contentContainerStyle', 'enabled', 'keyboardVerticalOffset']); return ( - // eslint-disable-next-line react/jsx-props-no-spreading + // eslint-disable-next-line react/jsx-props-no-spreading ); }; diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 3f2a7e8bb877..c692c93c868e 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -30,7 +30,6 @@ const propTypes = { }; const SignInPageContent = (props) => { - console.log('!!!', props.isShown, props.windowHeight); const dismissKeyboardWhenTappedOutsideOfInput = () => { // This prop comes from withKeyboardState if (!props.isShown) { @@ -46,39 +45,44 @@ const SignInPageContent = (props) => { styles.flex1, styles.signInPageLeftContainer, !props.isSmallScreenWidth && styles.signInPageLeftContainerWide, - {backgroundColor: 'red'}, ]} > - - {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} - + - - - + // This vertical offset is here to add some more margin above the keyboard. Without it, the TOS and footer stuff still hides behind the keyboard by a few pixels. + keyboardVerticalOffset={50} + > + {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */} + + + + + + + + {props.shouldShowWelcomeText && ( + + + {props.welcomeText} + - {props.shouldShowWelcomeText && ( - - - {props.welcomeText} - - - )} - {props.children} - - - - - - + )} + {props.children} + + + + + + );