Fix Promo colors on login screen for native devices

src/components/SVGImage/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Image} from 'react-native';
+import {getWidthAndHeightStyle} from '../../styles/styles';
+import propTypes from './propTypes';
+
+const SVGImage = ({width, height, src}) => (
+    <Image
+        style={getWidthAndHeightStyle(width, height)}
+        source={src}
+    />
+);
+
+SVGImage.propTypes = propTypes;
+SVGImage.displayName = 'SVGImage';
+
+export default SVGImage;

src/components/SVGImage/index.native.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {SvgCssUri} from 'react-native-svg';
+import propTypes from './propTypes';
+
+const SVGImage = ({width, height, src}) => (
+    <SvgCssUri
+        width={width}
+        height={height}
+        uri={src}
+    />
+);
+
+SVGImage.propTypes = propTypes;
+SVGImage.displayName = 'SVGImage';
+
+export default SVGImage;

src/components/SVGImage/propTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** The asset to render. */
+    src: PropTypes.string.isRequired,
+
+    /** The width of the image. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+
+    /** The height of the image. */
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+export default propTypes;

src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import _ from 'underscore';
-import styles from '../../../styles/styles';
+import SVGImage from '../../../components/SVGImage';
+import styles, {getBackgroundColorStyle, getLoginPagePromoStyle} from '../../../styles/styles';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
 import variables from '../../../styles/variables';
@@ -26,12 +26,11 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-const backgroundStyles = [styles.backgroundBlue, styles.backgroundGreen, styles.backgroundOrange, styles.backgroundPink];
-const backgroundStyle = backgroundStyles[_.random(0, 3)];
+const backgroundStyle = getLoginPagePromoStyle();
 
 const SignInPageLayoutWide = props => (
     <View style={[styles.flex1, styles.signInPageInner]}>
-        <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
+        <View style={[styles.flex1, styles.flexRow, styles.flexGrow1]}>
             <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
                 <View style={[
                     styles.flex1,
@@ -50,9 +49,9 @@ const SignInPageLayoutWide = props => (
                             />
                         </View>
                         {props.shouldShowWelcomeText && (
-                        <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
-                            {props.welcomeText}
-                        </Text>
+                            <Text style={[styles.mv5, styles.textLabel, styles.h3]}>
+                                {props.welcomeText}
+                            </Text>
                         )}
                         <View>
                             {props.children}
@@ -65,13 +64,16 @@ const SignInPageLayoutWide = props => (
             </View>
             <View style={[
                 styles.flexGrow1,
-                styles.dFlex,
-                styles.flexRow,
-                styles.background100,
-                backgroundStyle,
+                getBackgroundColorStyle(backgroundStyle.backgroundColor),
                 props.isMediumScreenWidth && styles.alignItemsCenter,
             ]}
-            />
+            >
+                <SVGImage
+                    width="100%"
+                    height="100%"
+                    src={backgroundStyle.backgroundImageUri}
+                />
+            </View>
         </View>
     </View>
 );

src/styles/styles.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import fontFamily from './fontFamily';
 import addOutlineWidth from './addOutlineWidth';
 import themeColors from './themes/default';
@@ -174,30 +175,6 @@ const styles = {
         textTransform: 'uppercase',
     },
 
-    background100: {
-        backgroundSize: '100% 100%',
-    },
-
-    backgroundGreen: {
-        backgroundColor: colors.green,
-        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg)`,
-    },
-
-    backgroundOrange: {
-        backgroundColor: colors.orange,
-        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg)`,
-    },
-
-    backgroundPink: {
-        backgroundColor: colors.pink,
-        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg)`,
-    },
-
-    backgroundBlue: {
-        backgroundColor: colors.blue,
-        backgroundImage: `url(${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg)`,
-    },
-
     colorReversed: {
         color: themeColors.textReversed,
     },
@@ -2462,6 +2439,33 @@ function getEmojiPickerStyle(isSmallScreenWidth) {
     };
 }
 
+/**
+ * Get the random promo color and image for Login page
+ *
+ * @return {Object}
+ */
+function getLoginPagePromoStyle() {
+    const promos = [
+        {
+            backgroundColor: colors.green,
+            backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_green.svg`,
+        },
+        {
+            backgroundColor: colors.orange,
+            backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_orange.svg`,
+        },
+        {
+            backgroundColor: colors.pink,
+            backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_pink.svg`,
+        },
+        {
+            backgroundColor: colors.blue,
+            backgroundImageUri: `${CONST.CLOUDFRONT_URL}/images/homepage/brand-stories/freeplan_blue.svg`,
+        },
+    ];
+    return promos[_.random(0, 3)];
+}
+
 export default styles;
 export {
     getSafeAreaPadding,
@@ -2483,4 +2487,5 @@ export {
     getModalPaddingStyles,
     getFontFamilyMonospace,
     getEmojiPickerStyle,
+    getLoginPagePromoStyle,
 };