From 32111b9b66d40d0d6f61a1614e08b5d5eb1593bc Mon Sep 17 00:00:00 2001
From: aimane-chnaif <aiman.chnaif@gmail.com>
Date: Mon, 26 Sep 2022 15:52:12 -0600
Subject: [PATCH] fix "Going from small to large screen and vice-versa clears
 the field for Email/Password input fields"

---
 src/pages/signin/SignInPageLayout/index.js | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index ebe72e30ee95..0f813c55dd25 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -58,26 +58,26 @@ const SignInPageLayout = (props) => {
         </Pressable>
     );
 
-    if (props.isSmallScreenWidth) {
-        return content;
-    }
+    const containerStyles = [];
+    const contentContainerStyles = [styles.flex1];
 
-    if (props.isMediumScreenWidth && props.windowHeight >= variables.minHeightToShowGraphics) {
-        return (
-            <View style={[styles.dFlex, styles.signInPageInner, styles.flexColumnReverse, styles.justifyContentBetween]}>
-                {graphicLayout}
-                <View style={styles.flex1}>
-                    {content}
-                </View>
-            </View>
-        );
+    const isLongMediumScreenWidth = props.isMediumScreenWidth && props.windowHeight >= variables.minHeightToShowGraphics;
+
+    if (props.isSmallScreenWidth) {
+        containerStyles.push(styles.flex1);
+    } else if (isLongMediumScreenWidth) {
+        containerStyles.push(styles.dFlex, styles.signInPageInner, styles.flexColumnReverse, styles.justifyContentBetween);
+    } else {
+        containerStyles.push(styles.flex1, styles.signInPageInner);
+        contentContainerStyles.push(styles.flexRow);
     }
 
     return (
-        <View style={[styles.flex1, styles.signInPageInner]}>
-            <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
+        <View style={containerStyles}>
+            {isLongMediumScreenWidth && graphicLayout}
+            <View style={contentContainerStyles}>
                 {content}
-                {graphicLayout}
+                {!props.isSmallScreenWidth && !isLongMediumScreenWidth && graphicLayout}
             </View>
         </View>
     );