Skip to content

Fix the position of the TOS on the sign on page to be above the keyboard #13529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 14, 2022
Merged

Fix the position of the TOS on the sign on page to be above the keyboard #13529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8aed1c7
Play around with keyboard detection on iOS
tgolen Dec 12, 2022
590d793
Add bottom margin when keyboard is shown
tgolen Dec 12, 2022
d3929a1
Add bottom margin when keyboard is shown
tgolen Dec 12, 2022
c55c17b
use keyboardVerticalOffset prop instead of conditionally setting marg…
jasperhuangg Dec 13, 2022
d63b4e5
Cleanup all debug stuff and add keyboard vertical offset
tgolen Dec 13, 2022
dfdebde
Merge branch 'tgolen-animated-keyboard' of github.com:Expensify/App i…
tgolen Dec 13, 2022
2c1fcee
Merge branch 'main' of github.com:Expensify/App into tgolen-animated-…
jasperhuangg Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/components/KeyboardAvoidingView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<View {...viewProps} />
);
};
Expand Down
11 changes: 9 additions & 2 deletions src/pages/signin/SignInPageLayout/SignInPageContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -46,7 +47,13 @@ const SignInPageContent = (props) => {
!props.isSmallScreenWidth && styles.signInPageLeftContainerWide,
]}
>
<View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
<KeyboardAvoidingView
behavior="padding"
style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}

// 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 */}
<View style={[styles.flexGrow1, styles.signInPageContentTopSpacer]} />

Expand Down Expand Up @@ -75,7 +82,7 @@ const SignInPageContent = (props) => {
<View style={[styles.mv5]}>
<TermsAndLicenses />
</View>
</View>
</KeyboardAvoidingView>
</View>
</TouchableWithoutFeedback>
);
Expand Down