perf: optimize home-background svg

src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx → src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx

@@ -1,17 +1,17 @@
 import {Image} from 'expo-image';
 import React, {useEffect, useState} from 'react';
-import type {ImageSourcePropType} from 'react-native';
 import {InteractionManager} from 'react-native';
+import type {ImageSourcePropType} from 'react-native';
 import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import MobileBackgroundImage from '@assets/images/home-background--ios.svg';
+import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isAnonymousUser} from '@libs/actions/Session';
 import CONST from '@src/CONST';
 import {useSplashScreenStateContext} from '@src/SplashScreenStateContext';
 import type BackgroundImageProps from './types';
 
-function BackgroundImage({width, transitionDuration}: BackgroundImageProps) {
+function BackgroundImage({width}: BackgroundImageProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [isInteractionComplete, setIsInteractionComplete] = useState(false);
@@ -57,8 +57,9 @@ function BackgroundImage({width, transitionDuration}: BackgroundImageProps) {
             <Image
                 source={MobileBackgroundImage as ImageSourcePropType}
                 onLoadEnd={() => setOpacityAnimation()}
+                pointerEvents="none"
                 style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]}
-                transition={transitionDuration}
+                transition={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
             />
         </Reanimated.View>
     );

src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx

@@ -3,6 +3,7 @@ import {InteractionManager} from 'react-native';
 import Animated, {FadeIn} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isAnonymousUser} from '@libs/actions/Session';
+import CONST from '@src/CONST';
 import type BackgroundImageProps from './types';
 
 const BackgroundMobile = lazy(() =>
@@ -16,7 +17,7 @@ const BackgroundDesktop = lazy(() =>
     })),
 );
 
-function BackgroundImage({width, transitionDuration, isSmallScreen = false}: BackgroundImageProps) {
+function BackgroundImage({width, isSmallScreen = false}: BackgroundImageProps) {
     const styles = useThemeStyles();
     const [isInteractionComplete, setIsInteractionComplete] = useState(false);
     const isAnonymous = isAnonymousUser();
@@ -52,7 +53,7 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac
         <Suspense fallback={null}>
             <Animated.View
                 style={styles.signInBackground}
-                entering={FadeIn.duration(transitionDuration)}
+                entering={FadeIn.duration(CONST.BACKGROUND_IMAGE_TRANSITION_DURATION)}
             >
                 <BackgroundComponent width={width} />
             </Animated.View>

src/pages/signin/SignInPageLayout/BackgroundImage/types.ts

@@ -1,15 +1,9 @@
 type BackgroundImageProps = {
-    /** pointerEvents property to the SVG element */
-    pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
-
     /** The width of the image. */
     width: number;
 
     /** Is the window width narrow, like on a mobile device */
     isSmallScreen?: boolean;
-
-    /** Transition duration in milliseconds */
-    transitionDuration: number;
 };
 
 export default BackgroundImageProps;

src/pages/signin/SignInPageLayout/Footer.tsx

@@ -161,7 +161,7 @@ function Footer({navigateFocus}: FooterProps) {
         <View style={[styles.flex1]}>
             <View style={footerWrapper}>
                 {isVertical ? (
-                    <View style={[styles.signInPageGradientMobile]}>
+                    <View style={styles.signInPageGradientMobile}>
                         <ImageSVG
                             src={SignInGradient}
                             height="100%"

src/pages/signin/SignInPageLayout/index.tsx

@@ -118,9 +118,7 @@ function SignInPageLayout({
                             <View style={styles.signInPageHeroCenter}>
                                 <BackgroundImage
                                     isSmallScreen={false}
-                                    pointerEvents="none"
                                     width={variables.signInHeroBackgroundWidth}
-                                    transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
                                 />
                             </View>
                             <View>
@@ -155,21 +153,11 @@ function SignInPageLayout({
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
-                    <View
-                        style={[
-                            styles.flex1,
-                            styles.flexColumn,
-                            isMobileSafari() ? styles.overflowHidden : {},
-                            StyleUtils.getMinimumHeight(backgroundImageHeight),
-                            StyleUtils.getSignInBgStyles(theme),
-                        ]}
-                    >
-                        <View style={[styles.pAbsolute, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
+                    <View style={[styles.flex1, styles.flexColumn, isMobileSafari() ? styles.overflowHidden : {}, StyleUtils.getMinimumHeight(backgroundImageHeight)]}>
+                        <View style={[styles.pAbsolute, styles.b0, styles.w100, StyleUtils.getHeight(backgroundImageHeight), StyleUtils.getBackgroundColorStyle(theme.highlightBG)]}>
                             <BackgroundImage
                                 isSmallScreen
-                                pointerEvents="none"
                                 width={variables.signInHeroBackgroundWidthMobile}
-                                transitionDuration={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION}
                             />
                         </View>
                         <SignInPageContent

src/styles/index.ts

@@ -1423,7 +1423,7 @@ const staticStyles = (theme: ThemeColors) =>
 
         signInPageGradientMobile: {
             height: 300,
-            width: 800,
+            width: '100%',
             position: 'absolute',
             top: 0,
             left: 0,

src/styles/utils/index.ts

@@ -30,7 +30,6 @@ import getMoneyRequestReportPreviewStyle from './getMoneyRequestReportPreviewSty
 import getNavigationBarType from './getNavigationBarType/index';
 import getNavigationModalCardStyle from './getNavigationModalCardStyles';
 import getSafeAreaInsets from './getSafeAreaInsets';
-import getSignInBgStyles from './getSignInBgStyles';
 import getSuccessReportCardLostIllustrationStyle from './getSuccessReportCardLostIllustrationStyle';
 import {compactContentContainerStyles} from './optionRowStyles';
 import positioning from './positioning';
@@ -1330,7 +1329,6 @@ const staticStyleUtils = {
     getSearchPageNarrowHeaderStyles,
     getOpacityStyle,
     getMultiGestureCanvasContainerStyle,
-    getSignInBgStyles,
     getIconWidthAndHeightStyle,
     getButtonStyleWithIcon,
     getCharacterWidth,