From 2f3292a593b9d825cf45f281b974d7f677532020 Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Thu, 11 Sep 2025 10:32:44 +0200 Subject: [PATCH 1/8] Replace home-background--desktop with optimized version --- assets/images/home-background--desktop.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/images/home-background--desktop.svg b/assets/images/home-background--desktop.svg index 4d1c18fb3ba7..7540be6dc684 100644 --- a/assets/images/home-background--desktop.svg +++ b/assets/images/home-background--desktop.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 05c2d89fa446b0b0616e3114e82c14d517fbdd1c Mon Sep 17 00:00:00 2001 From: Lukasz Modzelewski Date: Tue, 16 Sep 2025 15:24:37 +0200 Subject: [PATCH 2/8] optimize home-background--mobile asset and reuse it --- assets/images/home-background--android.svg | 1 - assets/images/home-background--ios.svg | 1 - assets/images/home-background--mobile.svg | 2 +- assets/images/home-fade-gradient--mobile.svg | 14 +++++- .../BackgroundImage/index.android.tsx | 47 ------------------- .../{index.ios.tsx => index.native.tsx} | 40 +++++++--------- .../BackgroundImage/index.tsx | 14 ++++-- .../SignInPageLayout/BackgroundImage/types.ts | 6 --- src/pages/signin/SignInPageLayout/Footer.tsx | 2 +- src/pages/signin/SignInPageLayout/index.tsx | 14 +----- src/styles/index.ts | 22 +++++++-- .../utils/getSignInBgStyles/index.ios.ts | 7 --- src/styles/utils/getSignInBgStyles/index.ts | 5 -- src/styles/utils/getSignInBgStyles/types.ts | 6 --- src/styles/utils/index.ts | 2 - 15 files changed, 62 insertions(+), 121 deletions(-) delete mode 100644 assets/images/home-background--android.svg delete mode 100644 assets/images/home-background--ios.svg delete mode 100644 src/pages/signin/SignInPageLayout/BackgroundImage/index.android.tsx rename src/pages/signin/SignInPageLayout/BackgroundImage/{index.ios.tsx => index.native.tsx} (57%) delete mode 100644 src/styles/utils/getSignInBgStyles/index.ios.ts delete mode 100644 src/styles/utils/getSignInBgStyles/index.ts delete mode 100644 src/styles/utils/getSignInBgStyles/types.ts diff --git a/assets/images/home-background--android.svg b/assets/images/home-background--android.svg deleted file mode 100644 index 29c8affce1cc..000000000000 --- a/assets/images/home-background--android.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/images/home-background--ios.svg b/assets/images/home-background--ios.svg deleted file mode 100644 index d81f2a18cc78..000000000000 --- a/assets/images/home-background--ios.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/images/home-background--mobile.svg b/assets/images/home-background--mobile.svg index d2fa08475c9d..3d845b5f2a77 100644 --- a/assets/images/home-background--mobile.svg +++ b/assets/images/home-background--mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/home-fade-gradient--mobile.svg b/assets/images/home-fade-gradient--mobile.svg index ad150f3c870c..ab2228a1e59f 100644 --- a/assets/images/home-fade-gradient--mobile.svg +++ b/assets/images/home-fade-gradient--mobile.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.tsx deleted file mode 100644 index e60e50d1a56d..000000000000 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import {Image} from 'expo-image'; -import React, {useEffect, useState} from 'react'; -import {InteractionManager} from 'react-native'; -import type {ImageSourcePropType} from 'react-native'; -import AndroidBackgroundImage from '@assets/images/home-background--android.svg'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {isAnonymousUser} from '@libs/actions/Session'; -import type BackgroundImageProps from './types'; - -function BackgroundImage({pointerEvents, width, transitionDuration}: BackgroundImageProps) { - const styles = useThemeStyles(); - const [isInteractionComplete, setIsInteractionComplete] = useState(false); - const isAnonymous = isAnonymousUser(); - - useEffect(() => { - if (!isAnonymous) { - return; - } - - const interactionTask = InteractionManager.runAfterInteractions(() => { - setIsInteractionComplete(true); - }); - - return () => { - interactionTask.cancel(); - }; - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, []); - - // load the background image and Lottie animation only after user interactions to ensure smooth navigation transitions. - if (!isInteractionComplete && isAnonymous) { - return; - } - - return ( - - ); -} - -BackgroundImage.displayName = 'BackgroundImage'; - -export default BackgroundImage; diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx similarity index 57% rename from src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx rename to src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx index 86ccdfd74ff5..5f682e90364f 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx @@ -1,34 +1,20 @@ import {Image} from 'expo-image'; import React, {useEffect, useState} from 'react'; +import {InteractionManager, View} from 'react-native'; import type {ImageSourcePropType} from 'react-native'; -import {InteractionManager} from 'react-native'; -import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; -import MobileBackgroundImage from '@assets/images/home-background--ios.svg'; -import useStyleUtils from '@hooks/useStyleUtils'; +import MobileBackgroundImage from '@assets/images/home-background--mobile.svg'; +import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg'; +import ImageSVG from '@components/ImageSVG'; 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() { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); const [isInteractionComplete, setIsInteractionComplete] = useState(false); const isAnonymous = isAnonymousUser(); - const opacity = useSharedValue(0); - const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.get()})); - // This sets the opacity animation for the background image once it has loaded. - function setOpacityAnimation() { - opacity.set( - withTiming(1, { - duration: CONST.MICROSECONDS_PER_MS, - easing: Easing.ease, - }), - ); - } - useEffect(() => { if (!isAnonymous) { return; @@ -52,14 +38,20 @@ function BackgroundImage({width, transitionDuration}: BackgroundImageProps) { } return ( - + <> setOpacityAnimation()} - style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]} - transition={transitionDuration} + pointerEvents="none" + style={styles.signInBackgroundNative} + transition={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION} /> - + + + + ); } diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx index 35de4837654e..548b4aa191bf 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx @@ -1,8 +1,11 @@ import React, {lazy, Suspense, useEffect, useMemo, useState} from 'react'; -import {InteractionManager} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import Animated, {FadeIn} from 'react-native-reanimated'; +import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg'; +import ImageSVG from '@components/ImageSVG'; 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 +19,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(); @@ -51,10 +54,15 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac + {isSmallScreen && ( + + + + )} ); } diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/types.ts b/src/pages/signin/SignInPageLayout/BackgroundImage/types.ts index 72e7a42c0d33..e158a43e7bef 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/types.ts +++ b/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; diff --git a/src/pages/signin/SignInPageLayout/Footer.tsx b/src/pages/signin/SignInPageLayout/Footer.tsx index a764f2224965..6f0359862d73 100644 --- a/src/pages/signin/SignInPageLayout/Footer.tsx +++ b/src/pages/signin/SignInPageLayout/Footer.tsx @@ -161,7 +161,7 @@ function Footer({navigateFocus}: FooterProps) { {isVertical ? ( - + @@ -156,20 +154,12 @@ function SignInPageLayout({ ref={scrollViewRef} > - + left: 0, }, - signInPageGradientMobile: { - height: 300, - width: 800, + signInPageGradientBottomMobile: { + height: 200, + width: '100%', position: 'absolute', top: 0, left: 0, }, + signInPageGradientTopMobile: { + height: 500, + width: '100%', + position: 'absolute', + bottom: 0, + transform: [{rotate: '180deg'}], + }, + signInBackground: { position: 'absolute', bottom: 0, left: 0, - minHeight: 700, + }, + signInBackgroundNative: { + position: 'absolute', + bottom: 0, + left: 0, + minHeight: 600, + width: variables.signInHeroBackgroundWidthMobile, }, signInPageInner: { diff --git a/src/styles/utils/getSignInBgStyles/index.ios.ts b/src/styles/utils/getSignInBgStyles/index.ios.ts deleted file mode 100644 index 84c50cfa42bd..000000000000 --- a/src/styles/utils/getSignInBgStyles/index.ios.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type GetSignInBgStyles from './types'; - -const getSignInBgStyles: GetSignInBgStyles = (theme) => ({ - backgroundColor: theme.signInPage, -}); - -export default getSignInBgStyles; diff --git a/src/styles/utils/getSignInBgStyles/index.ts b/src/styles/utils/getSignInBgStyles/index.ts deleted file mode 100644 index 10c2e5783207..000000000000 --- a/src/styles/utils/getSignInBgStyles/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type GetSignInBgStyles from './types'; - -const getSignInBgStyles: GetSignInBgStyles = () => ({}); - -export default getSignInBgStyles; diff --git a/src/styles/utils/getSignInBgStyles/types.ts b/src/styles/utils/getSignInBgStyles/types.ts deleted file mode 100644 index 4d3ddbe6153d..000000000000 --- a/src/styles/utils/getSignInBgStyles/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type {ViewStyle} from 'react-native'; -import type {ThemeColors} from '@styles/theme/types'; - -type GetSignInBgStyles = (theme: ThemeColors) => ViewStyle; - -export default GetSignInBgStyles; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 4b3cfaebbde2..c96ee84e7ca0 100644 --- a/src/styles/utils/index.ts +++ b/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, From f55e5be50c16275ab848ff54cbe1aaf1cb3a092f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Thu, 25 Sep 2025 12:28:44 +0100 Subject: [PATCH 3/8] Fix Prettier --- src/pages/signin/SignInPageLayout/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index a84ecb99e002..b650314524d6 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/src/pages/signin/SignInPageLayout/index.tsx @@ -153,9 +153,7 @@ function SignInPageLayout({ keyboardShouldPersistTaps="handled" ref={scrollViewRef} > - + Date: Thu, 25 Sep 2025 14:23:05 +0100 Subject: [PATCH 4/8] Update home-background--mobile.svg --- assets/images/home-background--mobile.svg | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/assets/images/home-background--mobile.svg b/assets/images/home-background--mobile.svg index 6879e8319349..5a11b9ca4592 100644 --- a/assets/images/home-background--mobile.svg +++ b/assets/images/home-background--mobile.svg @@ -1 +1,14 @@ - + + + + + + + + + + + + + + From d3ff8c8a6b2cbe07b7a1d261975e212b85795a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Thu, 25 Sep 2025 20:56:45 +0100 Subject: [PATCH 5/8] Rollback mobile gradient svg --- assets/images/home-fade-gradient--mobile.svg | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/assets/images/home-fade-gradient--mobile.svg b/assets/images/home-fade-gradient--mobile.svg index ec8f7c4e6e25..ac6934062134 100644 --- a/assets/images/home-fade-gradient--mobile.svg +++ b/assets/images/home-fade-gradient--mobile.svg @@ -1,13 +1 @@ - - - - - - - - - + \ No newline at end of file From 5454c47e3860856859155d03ba022d9d176373bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Fri, 26 Sep 2025 08:50:28 +0100 Subject: [PATCH 6/8] Revert changes --- .../BackgroundImage/index.native.tsx | 35 ++++++++++++------- .../BackgroundImage/index.tsx | 9 +---- src/pages/signin/SignInPageLayout/Footer.tsx | 2 +- src/styles/index.ts | 20 ++--------- 4 files changed, 27 insertions(+), 39 deletions(-) diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx index 5f682e90364f..a3705e5bd453 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.native.tsx @@ -1,20 +1,34 @@ import {Image} from 'expo-image'; import React, {useEffect, useState} from 'react'; -import {InteractionManager, View} 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--mobile.svg'; -import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg'; -import ImageSVG from '@components/ImageSVG'; +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() { +function BackgroundImage({width}: BackgroundImageProps) { const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const [isInteractionComplete, setIsInteractionComplete] = useState(false); const isAnonymous = isAnonymousUser(); + const opacity = useSharedValue(0); + const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.get()})); + // This sets the opacity animation for the background image once it has loaded. + function setOpacityAnimation() { + opacity.set( + withTiming(1, { + duration: CONST.MICROSECONDS_PER_MS, + easing: Easing.ease, + }), + ); + } + useEffect(() => { if (!isAnonymous) { return; @@ -38,20 +52,15 @@ function BackgroundImage() { } return ( - <> + setOpacityAnimation()} pointerEvents="none" - style={styles.signInBackgroundNative} + style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]} transition={CONST.BACKGROUND_IMAGE_TRANSITION_DURATION} /> - - - - + ); } diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx index 548b4aa191bf..8189c9bda635 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx @@ -1,8 +1,6 @@ import React, {lazy, Suspense, useEffect, useMemo, useState} from 'react'; -import {InteractionManager, View} from 'react-native'; +import {InteractionManager} from 'react-native'; import Animated, {FadeIn} from 'react-native-reanimated'; -import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg'; -import ImageSVG from '@components/ImageSVG'; import useThemeStyles from '@hooks/useThemeStyles'; import {isAnonymousUser} from '@libs/actions/Session'; import CONST from '@src/CONST'; @@ -58,11 +56,6 @@ function BackgroundImage({width, isSmallScreen = false}: BackgroundImageProps) { > - {isSmallScreen && ( - - - - )} ); } diff --git a/src/pages/signin/SignInPageLayout/Footer.tsx b/src/pages/signin/SignInPageLayout/Footer.tsx index 6f0359862d73..c0ced49a3d23 100644 --- a/src/pages/signin/SignInPageLayout/Footer.tsx +++ b/src/pages/signin/SignInPageLayout/Footer.tsx @@ -161,7 +161,7 @@ function Footer({navigateFocus}: FooterProps) { {isVertical ? ( - + left: 0, }, - signInPageGradientBottomMobile: { - height: 200, + signInPageGradientMobile: { + height: 300, width: '100%', position: 'absolute', top: 0, left: 0, }, - signInPageGradientTopMobile: { - height: 500, - width: '100%', - position: 'absolute', - bottom: 0, - transform: [{rotate: '180deg'}], - }, - signInBackground: { position: 'absolute', bottom: 0, left: 0, - }, - signInBackgroundNative: { - position: 'absolute', - bottom: 0, - left: 0, - minHeight: 600, - width: variables.signInHeroBackgroundWidthMobile, + minHeight: 700, }, signInPageInner: { From 33a33c2e540b5b9297783b5e58d19e4b5881b1aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Mon, 29 Sep 2025 07:47:35 +0100 Subject: [PATCH 7/8] Change mobile SVG --- assets/images/home-background--mobile.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/images/home-background--mobile.svg b/assets/images/home-background--mobile.svg index 5a11b9ca4592..feec091720c1 100644 --- a/assets/images/home-background--mobile.svg +++ b/assets/images/home-background--mobile.svg @@ -1,10 +1,10 @@ - + - + From 428ddaea48eb57950f08b5f902c049a7ab252ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Henriques?= Date: Thu, 2 Oct 2025 11:52:37 +0100 Subject: [PATCH 8/8] Compress SVGs --- assets/images/home-background--desktop.svg | 2 +- assets/images/home-background--mobile.svg | 15 +-------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/assets/images/home-background--desktop.svg b/assets/images/home-background--desktop.svg index 66a065650ca7..7540be6dc684 100644 --- a/assets/images/home-background--desktop.svg +++ b/assets/images/home-background--desktop.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/assets/images/home-background--mobile.svg b/assets/images/home-background--mobile.svg index feec091720c1..a5f1baad93bb 100644 --- a/assets/images/home-background--mobile.svg +++ b/assets/images/home-background--mobile.svg @@ -1,14 +1 @@ - - - - - - - - - - - - - - + \ No newline at end of file