fix random bg color for every re-render

Expensify · Oct 16, 2021 · f618cac · f618cac
1 parent d8c5ee0
commit f618cac
Showing 1 changed file with 43 additions and 44 deletions.
diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -26,56 +26,55 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const SignInPageLayoutWide = (props) => {
-    const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
-    const backgroundStyle = backgroundStyles[_.random(0, 3)];
-    return (
-        <View style={[styles.flex1, styles.signInPageInner]}>
-            <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
-                <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
-                    <View style={[
-                        styles.flex1,
-                        styles.dFlex,
-                        styles.flexColumn,
-                        styles.mt40Percentage,
-                        styles.signInPageFormContainer,
-                        styles.alignSelfCenter,
-                    ]}
-                    >
-                        <View style={[styles.flex1]}>
-                            <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
-                                <ExpensifyCashLogo
-                                    width={variables.componentSizeLarge}
-                                    height={variables.componentSizeLarge}
-                                />
-                            </View>
-                            {props.shouldShowWelcomeText && (
-                                <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                                    {props.welcomeText}
-                                </Text>
-                            )}
-                            <View>
-                                {props.children}
-                            </View>
+const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
+const backgroundStyle = backgroundStyles[_.random(0, 3)];
+
+const SignInPageLayoutWide = props => (
+    <View style={[styles.flex1, styles.signInPageInner]}>
+        <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
+            <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
+                <View style={[
+                    styles.flex1,
+                    styles.dFlex,
+                    styles.flexColumn,
+                    styles.mt40Percentage,
+                    styles.signInPageFormContainer,
+                    styles.alignSelfCenter,
+                ]}
+                >
+                    <View style={[styles.flex1]}>
+                        <View style={[styles.signInPageLogo, styles.mt6, styles.mb5]}>
+                            <ExpensifyCashLogo
+                                width={variables.componentSizeLarge}
+                                height={variables.componentSizeLarge}
+                            />
                         </View>
-                        <View style={[styles.mv5]}>
-                            <TermsAndLicenses />
+                        {props.shouldShowWelcomeText && (
+                        <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                            {props.welcomeText}
+                        </Text>
+                        )}
+                        <View>
+                            {props.children}
                         </View>
                     </View>
+                    <View style={[styles.mv5]}>
+                        <TermsAndLicenses />
+                    </View>
                 </View>
-                <View style={[
-                    styles.flexGrow1,
-                    styles.dFlex,
-                    styles.flexRow,
-                    styles.background100,
-                    backgroundStyle,
-                    props.isMediumScreenWidth && styles.alignItemsCenter,
-                ]}
-                />
             </View>
+            <View style={[
+                styles.flexGrow1,
+                styles.dFlex,
+                styles.flexRow,
+                styles.background100,
+                backgroundStyle,
+                props.isMediumScreenWidth && styles.alignItemsCenter,
+            ]}
+            />
         </View>
-    );
-};
+    </View>
+);
 
 SignInPageLayoutWide.propTypes = propTypes;
 SignInPageLayoutWide.displayName = 'SignInPageLayoutWide';