From 86d3ae763d0ea0f2c4b6959f3e1e351eb6ea3517 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Tue, 20 Jul 2021 21:34:29 -0300
Subject: [PATCH 1/3] fixes style for hidden element

---
 src/components/TextInputAutoWidth.js | 18 ++++++++++--------
 src/styles/styles.js                 |  3 +--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js
index 9dbc83537cd6..18a04bb9e335 100644
--- a/src/components/TextInputAutoWidth.js
+++ b/src/components/TextInputAutoWidth.js
@@ -42,13 +42,15 @@ class TextInputAutoWidth extends React.Component {
     render() {
         const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
         return (
-            <View>
-                <TextInputFocusable
-                    style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
-                    ref={this.props.forwardedRef}
-                    /* eslint-disable-next-line react/jsx-props-no-spreading */
-                    {...propsWithoutStyles}
-                />
+            <>
+                <View>
+                    <TextInputFocusable
+                        style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
+                        ref={this.props.forwardedRef}
+                        /* eslint-disable-next-line react/jsx-props-no-spreading */
+                        {...propsWithoutStyles}
+                    />
+                </View>
                 {/*
                 Text input component doesn't support auto grow by default.
                 We're using a hidden text input to achieve that.
@@ -61,7 +63,7 @@ class TextInputAutoWidth extends React.Component {
                 >
                     {this.props.value || this.props.placeholder}
                 </Text>
-            </View>
+            </>
         );
     }
 }
diff --git a/src/styles/styles.js b/src/styles/styles.js
index e11f4ee0c920..8a33e4e24941 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1641,11 +1641,10 @@ const styles = {
     },
 
     hiddenElementOutsideOfWindow: {
-        position: 'fixed',
+        position: 'absolute',
         top: 0,
         left: 0,
         opacity: 0,
-        transform: 'translateX(-100%)',
     },
 
     growlNotificationWrapper: {

From 62e3786d4085218bc6a92dd866864ab157b89a75 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Wed, 21 Jul 2021 23:21:39 -0300
Subject: [PATCH 2/3] avoid keyboard, moves error message

---
 src/pages/signin/LoginForm.js                 | 18 +++----
 src/pages/signin/PasswordForm.js              | 18 +++++--
 src/pages/signin/ResendValidationForm.js      | 11 ++--
 src/pages/signin/SignInPage.js                | 15 +-----
 .../SignInPageLayoutNarrow.js                 | 53 ++++++++++---------
 5 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 547c43760fe9..d6f7d8463830 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -88,15 +88,6 @@ class LoginForm extends React.Component {
                         autoFocus={canFocusInputOnScreenFocus()}
                     />
                 </View>
-                <View style={[styles.mt5]}>
-                    <Button
-                        success
-                        text={this.props.translate('common.continue')}
-                        isLoading={this.props.account.loading}
-                        onPress={this.validateAndSubmitForm}
-                    />
-                </View>
-
                 {this.state.formError && (
                     <Text style={[styles.formError]}>
                         {this.state.formError}
@@ -113,6 +104,15 @@ class LoginForm extends React.Component {
                         {this.props.account.success}
                     </Text>
                 )}
+                <View style={[styles.mt5]}>
+                    <Button
+                        success
+                        text={this.props.translate('common.continue')}
+                        isLoading={this.props.account.loading}
+                        onPress={this.validateAndSubmitForm}
+                    />
+                </View>
+
             </>
         );
     }
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 9fdc16c599f8..fc2cf2e804e6 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import styles from '../../styles/styles';
 import Button from '../../components/Button';
 import Text from '../../components/Text';
@@ -110,6 +111,18 @@ class PasswordForm extends React.Component {
                         />
                     </View>
                 )}
+
+                {this.props.account && !_.isEmpty(this.props.account.error) && (
+                    <Text style={[styles.formError]}>
+                        {this.props.account.error}
+                    </Text>
+                )}
+
+                {this.state.formError && (
+                    <Text style={[styles.formError]}>
+                        {this.state.formError}
+                    </Text>
+                )}
                 <View>
                     <Button
                         success
@@ -120,11 +133,6 @@ class PasswordForm extends React.Component {
                     />
                     <ChangeExpensifyLoginLink />
                 </View>
-                {this.state.formError && (
-                    <Text style={[styles.formError]}>
-                        {this.state.formError}
-                    </Text>
-                )}
             </>
         );
     }
diff --git a/src/pages/signin/ResendValidationForm.js b/src/pages/signin/ResendValidationForm.js
index f95d7cea43f8..cbae3f489a83 100755
--- a/src/pages/signin/ResendValidationForm.js
+++ b/src/pages/signin/ResendValidationForm.js
@@ -80,6 +80,11 @@ class ResendValidationForm extends React.Component {
                         {this.props.translate('resendValidationForm.weSentYouMagicSignInLink')}
                     </Text>
                 </View>
+                {!_.isEmpty(this.state.formSuccess) && (
+                    <Text style={[styles.formSuccess]}>
+                        {this.state.formSuccess}
+                    </Text>
+                )}
                 <View style={[styles.mt4]}>
                     <Button
                         success
@@ -90,12 +95,6 @@ class ResendValidationForm extends React.Component {
                     />
                     <ChangeExpensifyLoginLink />
                 </View>
-
-                {!_.isEmpty(this.state.formSuccess) && (
-                    <Text style={[styles.formSuccess]}>
-                        {this.state.formSuccess}
-                    </Text>
-                )}
             </>
         );
     }
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index bab1ccdd3564..dd12cdf992bb 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -1,11 +1,9 @@
 import React, {Component} from 'react';
 import {
-    SafeAreaView, View,
+    SafeAreaView,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import Text from '../../components/Text';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index';
@@ -94,17 +92,6 @@ class SignInPage extends Component {
                         {showPasswordForm && <PasswordForm />}
 
                         {showResendValidationLinkForm && <ResendValidationForm />}
-
-                        {/* Because of the custom layout of the login form, session errors are displayed differently */}
-                        {!showLoginForm && (
-                            <View>
-                                {this.props.account && !_.isEmpty(this.props.account.error) && (
-                                    <Text style={[styles.formError]}>
-                                        {this.props.account.error}
-                                    </Text>
-                                )}
-                            </View>
-                        )}
                     </SignInPageLayout>
                 </SafeAreaView>
             </>
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
index 23b169f713b9..d4a72dd5ffeb 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} from 'react-native';
+import {ScrollView, View, KeyboardAvoidingView} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
@@ -20,39 +20,40 @@ const propTypes = {
 
 const SignInPageLayoutNarrow = props => (
     <ScrollView
-        keyboardShouldPersistTaps="handled"
-        contentContainerStyle={[
+        showsVerticalScrollIndicator={false}
+        style={[
             styles.flexGrow1,
-            styles.pb5,
             styles.mh5,
             styles.signInPageNarrowContentContainer,
             styles.alignSelfCenter,
         ]}
     >
-        <View style={[styles.flexGrow1]}>
-            <View
-                style={[
-                    styles.signInPageInnerNative,
-                    styles.flex1,
-                    styles.dFlex,
-                    styles.flexColumn,
-                    props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
-                ]}
-            >
-                <View style={[styles.signInPageLogoNative, styles.mb2]}>
-                    <ExpensifyCashLogo
-                        width={variables.componentSizeLarge}
-                        height={variables.componentSizeLarge}
-                    />
+        <KeyboardAvoidingView behavior="position">
+            <View style={[styles.flexGrow1]}>
+                <View
+                    style={[
+                        styles.signInPageInnerNative,
+                        styles.flex1,
+                        styles.dFlex,
+                        styles.flexColumn,
+                        props.windowHeight > props.windowWidth ? styles.mt40Percentage : null,
+                    ]}
+                >
+                    <View style={[styles.signInPageLogoNative, styles.mb2]}>
+                        <ExpensifyCashLogo
+                            width={variables.componentSizeLarge}
+                            height={variables.componentSizeLarge}
+                        />
+                    </View>
+                    <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                        {props.translate('welcomeText.phrase1')}
+                    </Text>
+                    {props.children}
                 </View>
-                <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                    {props.translate('welcomeText.phrase1')}
-                </Text>
-                {props.children}
-            </View>
-            <View style={[styles.mt3]}>
-                <TermsAndLicenses />
             </View>
+        </KeyboardAvoidingView>
+        <View style={[styles.mt3, styles.mb5, styles.alignSelfCenter]}>
+            <TermsAndLicenses />
         </View>
     </ScrollView>
 );

From 7974ea0c36d6ea6e9ccf3209eb9056ea66379006 Mon Sep 17 00:00:00 2001
From: Rafael <rdjuric@pm.me>
Date: Wed, 21 Jul 2021 23:32:29 -0300
Subject: [PATCH 3/3] removes mistake commit

---
 src/components/TextInputAutoWidth.js           | 18 ++++++++----------
 .../SignInPageLayout/SignInPageLayoutNarrow.js |  1 +
 src/styles/styles.js                           |  3 ++-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js
index 18a04bb9e335..9dbc83537cd6 100644
--- a/src/components/TextInputAutoWidth.js
+++ b/src/components/TextInputAutoWidth.js
@@ -42,15 +42,13 @@ class TextInputAutoWidth extends React.Component {
     render() {
         const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
         return (
-            <>
-                <View>
-                    <TextInputFocusable
-                        style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
-                        ref={this.props.forwardedRef}
-                        /* eslint-disable-next-line react/jsx-props-no-spreading */
-                        {...propsWithoutStyles}
-                    />
-                </View>
+            <View>
+                <TextInputFocusable
+                    style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
+                    ref={this.props.forwardedRef}
+                    /* eslint-disable-next-line react/jsx-props-no-spreading */
+                    {...propsWithoutStyles}
+                />
                 {/*
                 Text input component doesn't support auto grow by default.
                 We're using a hidden text input to achieve that.
@@ -63,7 +61,7 @@ class TextInputAutoWidth extends React.Component {
                 >
                     {this.props.value || this.props.placeholder}
                 </Text>
-            </>
+            </View>
         );
     }
 }
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
index d4a72dd5ffeb..475b0a30d613 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
@@ -20,6 +20,7 @@ const propTypes = {
 
 const SignInPageLayoutNarrow = props => (
     <ScrollView
+        keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={false}
         style={[
             styles.flexGrow1,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8a33e4e24941..e11f4ee0c920 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1641,10 +1641,11 @@ const styles = {
     },
 
     hiddenElementOutsideOfWindow: {
-        position: 'absolute',
+        position: 'fixed',
         top: 0,
         left: 0,
         opacity: 0,
+        transform: 'translateX(-100%)',
     },
 
     growlNotificationWrapper: {