From b5257f54d45d14bacb957f7fe59112a76d14eec3 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 3 Nov 2021 23:11:15 +0530 Subject: [PATCH 1/6] Fix footer position on the login page in mobile View --- .../SignInPageLayoutNarrow.js | 48 +++++++++---------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 4ab52883f600..3960b5499bc3 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -27,37 +27,33 @@ const SignInPageLayoutNarrow = props => ( keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} style={[ - styles.flexGrow1, + styles.flex1, styles.signInPageNarrowContentContainer, styles.alignSelfCenter, ]} - contentContainerStyle={styles.ph5} + contentContainerStyle={[styles.ph5, styles.flex1]} > - - - - - - - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - + + + + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} From 51df3c922b280577014fee7251677e935cf79276 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sun, 7 Nov 2021 22:41:21 +0530 Subject: [PATCH 2/6] hide the languge changer behind the keyboard while keeping the main view above keyboard It is a little tricky to manage the various parts of UI above and below the keyboard together but:- - Created a Flex 1 container which will respect the position behaviour. - Now move all the styles to content of the keyboardAvoidView. - There is some sort of problem that keeps some part of view behind the keyboard. It could be some thing but I am not aware of so I tried various padding and it seem that 20px will be hidden behind the keyboard. - so I moved the margin from footer to this and added pb5. --- .../SignInPageLayoutNarrow.js | 54 ++++++++++--------- src/styles/utilities/sizing.js | 4 ++ 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 3960b5499bc3..2a72f5fd3951 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -7,6 +7,7 @@ import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import withWindowDimensions from '../../../components/withWindowDimensions'; const propTypes = { /** The children to show inside the layout */ @@ -27,35 +28,36 @@ const SignInPageLayoutNarrow = props => ( keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false} style={[ - styles.flex1, + styles.h100, styles.signInPageNarrowContentContainer, styles.alignSelfCenter, ]} - contentContainerStyle={[styles.ph5, styles.flex1]} + contentContainerStyle={[styles.ph5, styles.mnh100]} > - - - - - {props.shouldShowWelcomeText && ( - - {props.welcomeText} - - )} - {props.children} - - + + + + + + {props.shouldShowWelcomeText && ( + + {props.welcomeText} + + )} + {props.children} + + + @@ -64,4 +66,4 @@ const SignInPageLayoutNarrow = props => ( SignInPageLayoutNarrow.propTypes = propTypes; SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow'; -export default withLocalize(SignInPageLayoutNarrow); +export default withWindowDimensions(withLocalize(SignInPageLayoutNarrow)); diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js index d823eb9856fa..488d391f3c11 100644 --- a/src/styles/utilities/sizing.js +++ b/src/styles/utilities/sizing.js @@ -8,6 +8,10 @@ export default { height: '100%', }, + mnh100: { + minHeight: '100%', + }, + w100: { width: '100%', }, From 26f4f652095c03190a03e1bec3f18c525fb0a600 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 8 Nov 2021 00:57:13 +0530 Subject: [PATCH 3/6] Fix IOS styles --- .../SignInPageLayoutNarrow.js | 22 ++++++++++++++----- .../signInPageStyles.js/index.ios.js | 5 +++++ .../signInPageStyles.js/index.js | 5 +++++ 3 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js create mode 100644 src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 2a72f5fd3951..e9670a8447a6 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,13 +1,15 @@ import React from 'react'; import {ScrollView, View, KeyboardAvoidingView} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../../styles/styles'; +import {withSafeAreaInsets} from 'react-native-safe-area-context'; +import styles, {getModalPaddingStyles} from '../../../styles/styles'; import variables from '../../../styles/variables'; import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo'; import Text from '../../../components/Text'; import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import withWindowDimensions from '../../../components/withWindowDimensions'; +import compose from '../../../libs/compose'; +import scrollViewContentContainerStyles from './signInPageStyles.js'; const propTypes = { /** The children to show inside the layout */ @@ -20,6 +22,9 @@ const propTypes = { /** Whether to show welcome text on a particular page */ shouldShowWelcomeText: PropTypes.bool.isRequired, + /** SafeArea insets */ + insets: PropTypes.shape(PropTypes.object).isRequired, + ...withLocalizePropTypes, }; @@ -32,7 +37,7 @@ const SignInPageLayoutNarrow = props => ( styles.signInPageNarrowContentContainer, styles.alignSelfCenter, ]} - contentContainerStyle={[styles.ph5, styles.mnh100]} + contentContainerStyle={[styles.ph5, scrollViewContentContainerStyles]} > ( contentContainerStyle={[ styles.mt40Percentage, styles.mb3, - styles.pb5, + getModalPaddingStyles({ + shouldAddBottomSafeAreaPadding: true, + modalContainerStylePaddingBottom: 20, + safeAreaPaddingBottom: props.insets.bottom, + }), ]} > @@ -66,4 +75,7 @@ const SignInPageLayoutNarrow = props => ( SignInPageLayoutNarrow.propTypes = propTypes; SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow'; -export default withWindowDimensions(withLocalize(SignInPageLayoutNarrow)); +export default compose( + withLocalize, + withSafeAreaInsets, +)(SignInPageLayoutNarrow); diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js new file mode 100644 index 000000000000..6d0bdfe859c5 --- /dev/null +++ b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js @@ -0,0 +1,5 @@ +import styles from '../../../../styles/styles'; + +const scrollViewContentContainerStyles = styles.h100; + +export default scrollViewContentContainerStyles; diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js new file mode 100644 index 000000000000..9cb9a43bc197 --- /dev/null +++ b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.js @@ -0,0 +1,5 @@ +import styles from '../../../../styles/styles'; + +const scrollViewContentContainerStyles = styles.mnh100; + +export default scrollViewContentContainerStyles; From 72cada66703fd476767da0d1407fa15229004f8b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 8 Nov 2021 01:07:09 +0530 Subject: [PATCH 4/6] UI fixes and props --- src/pages/signin/ChangeExpensifyLoginLink.js | 2 +- .../signin/SignInPageLayout/SignInPageLayoutNarrow.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js index a8d3d16be345..95ed6b7c3b9a 100755 --- a/src/pages/signin/ChangeExpensifyLoginLink.js +++ b/src/pages/signin/ChangeExpensifyLoginLink.js @@ -22,7 +22,7 @@ const propTypes = { }; const ChangeExpensifyLoginLink = ({credentials, translate, toLocalPhone}) => ( - + {translate('common.not')}   diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index e9670a8447a6..75ef6fb209ff 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -23,11 +23,15 @@ const propTypes = { shouldShowWelcomeText: PropTypes.bool.isRequired, /** SafeArea insets */ - insets: PropTypes.shape(PropTypes.object).isRequired, + insets: PropTypes.shape(PropTypes.object), ...withLocalizePropTypes, }; +const defaultProps = { + insets: {}, +}; + const SignInPageLayoutNarrow = props => ( ( ); SignInPageLayoutNarrow.propTypes = propTypes; +SignInPageLayoutNarrow.defaultProps = defaultProps; SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow'; export default compose( From f02b60aa4e5a7c26eb03f20cd989486a10522bd5 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 8 Nov 2021 01:46:22 +0530 Subject: [PATCH 5/6] Fix: styles for mobile web --- .../LoginKeyboardAvoidingView/index.js | 34 +++++++++++++++++++ .../LoginKeyboardAvoidingView/index.native.js | 6 ++++ .../SignInPageLayoutNarrow.js | 7 ++-- .../signInPageStyles.js/index.ios.js | 2 +- 4 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.js create mode 100644 src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.native.js diff --git a/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.js b/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.js new file mode 100644 index 000000000000..bf19d8336b9c --- /dev/null +++ b/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.js @@ -0,0 +1,34 @@ +import _ from 'underscore'; +import React from 'react'; +import {KeyboardAvoidingView} from 'react-native'; +import PropTypes from 'prop-types'; + +const propTypes = { + /** Style for KeyboardAvoidingView */ + style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), + + /** ContentContainerStyle for KeyboardAvoidingView */ + contentContainerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), +}; + +const defaultProps = { + style: {}, + contentContainerStyle: {}, +}; + +const LoginKeyboardAvoidingView = props => ( + +); + +LoginKeyboardAvoidingView.propTypes = propTypes; +LoginKeyboardAvoidingView.defaultProps = defaultProps; +LoginKeyboardAvoidingView.displayName = 'LoginKeyboardAvoidingView'; + +export default LoginKeyboardAvoidingView; diff --git a/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.native.js b/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.native.js new file mode 100644 index 000000000000..8c29e812ab36 --- /dev/null +++ b/src/pages/signin/SignInPageLayout/LoginKeyboardAvoidingView/index.native.js @@ -0,0 +1,6 @@ +import {KeyboardAvoidingView} from 'react-native'; + +const LoginKeyboardAvoidingView = KeyboardAvoidingView; +LoginKeyboardAvoidingView.displayName = 'LoginKeyboardAvoidingView'; + +export default LoginKeyboardAvoidingView; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 75ef6fb209ff..37f79faed6b8 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -1,5 +1,5 @@ import React from 'react'; -import {ScrollView, View, KeyboardAvoidingView} from 'react-native'; +import {ScrollView, View} from 'react-native'; import PropTypes from 'prop-types'; import {withSafeAreaInsets} from 'react-native-safe-area-context'; import styles, {getModalPaddingStyles} from '../../../styles/styles'; @@ -10,6 +10,7 @@ import TermsAndLicenses from '../TermsAndLicenses'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; import scrollViewContentContainerStyles from './signInPageStyles.js'; +import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView'; const propTypes = { /** The children to show inside the layout */ @@ -44,7 +45,7 @@ const SignInPageLayoutNarrow = props => ( contentContainerStyle={[styles.ph5, scrollViewContentContainerStyles]} > - ( )} {props.children} - + diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js index 6d0bdfe859c5..97eba60aab1a 100644 --- a/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js +++ b/src/pages/signin/SignInPageLayout/signInPageStyles.js/index.ios.js @@ -1,5 +1,5 @@ import styles from '../../../../styles/styles'; -const scrollViewContentContainerStyles = styles.h100; +const scrollViewContentContainerStyles = styles.flex1; export default scrollViewContentContainerStyles; From 77ebc1f8b5f041d26853733ae4fd3f884b692ada Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 12 Nov 2021 03:03:45 +0530 Subject: [PATCH 6/6] fix: login page styles Explicitly trigger the page layout update when keyboard shows to remove glitch --- src/components/withKeyboardState.js | 64 +++++++++++++++++++ .../SignInPageLayoutNarrow.js | 9 +-- 2 files changed, 69 insertions(+), 4 deletions(-) create mode 100755 src/components/withKeyboardState.js diff --git a/src/components/withKeyboardState.js b/src/components/withKeyboardState.js new file mode 100755 index 000000000000..b1159bdb376d --- /dev/null +++ b/src/components/withKeyboardState.js @@ -0,0 +1,64 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {Keyboard} from 'react-native'; +import getComponentDisplayName from '../libs/getComponentDisplayName'; + +const withKeyboardStatePropTypes = { + /** Returns whether keyboard is open */ + isShown: PropTypes.bool.isRequired, +}; + +export default function withKeyboardState(WrappedComponent) { + const WithKeyboardState = class extends Component { + constructor(props) { + super(props); + this.state = { + isShown: false, + }; + } + + componentDidMount() { + this.keyboardDidShowListener = Keyboard.addListener( + 'keyboardDidShow', + () => { + this.setState({isShown: true}); + }, + ); + this.keyboardDidHideListener = Keyboard.addListener( + 'keyboardDidHide', + () => { + this.setState({isShown: false}); + }, + ); + } + + componentWillUnmount() { + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); + } + + render() { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + } + }; + + WithKeyboardState.displayName = `WithKeyboardState(${getComponentDisplayName(WrappedComponent)})`; + WithKeyboardState.propTypes = { + forwardedRef: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({current: PropTypes.instanceOf(React.Component)}), + ]), + }; + WithKeyboardState.defaultProps = { + forwardedRef: undefined, + }; + return React.forwardRef((props, ref) => ( + // eslint-disable-next-line react/jsx-props-no-spreading + + )); +} + +export { + withKeyboardStatePropTypes, +}; diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js index 37f79faed6b8..380e5793b6c8 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js @@ -11,6 +11,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import compose from '../../../libs/compose'; import scrollViewContentContainerStyles from './signInPageStyles.js'; import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView'; +import withKeyboardState from '../../../components/withKeyboardState'; const propTypes = { /** The children to show inside the layout */ @@ -39,12 +40,11 @@ const SignInPageLayoutNarrow = props => ( showsVerticalScrollIndicator={false} style={[ styles.h100, - styles.signInPageNarrowContentContainer, styles.alignSelfCenter, ]} - contentContainerStyle={[styles.ph5, scrollViewContentContainerStyles]} + contentContainerStyle={scrollViewContentContainerStyles} > - + ( {props.children} - + @@ -83,5 +83,6 @@ SignInPageLayoutNarrow.displayName = 'SignInPageLayoutNarrow'; export default compose( withLocalize, + withKeyboardState, withSafeAreaInsets, )(SignInPageLayoutNarrow);