[HOLD for payment 2024-02-22] [$500] iOS - Login - The splash screen glitches and flashes on launch

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.26.1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open the iOS app
2. Kill the app and launch it again

Expected Result:

The splash screen transition should be smooth on launch

Actual Result:

The splash screen glitches and flashes on launch

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6345929_1705533269315.Splash_screen_2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01782ced06468ec4f5
• Upwork Job ID: 1747794137711603712
• Last Price Increase: 2024-01-18
• Automatic offers:
• aimane-chnaif | Reviewer | 28121977
• ikevin127 | Contributor | 28121978

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01782ced06468ec4f5

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)

[lanitochka17]

#wave9-collect-signup

[ikevin127]

Proposal

Please re-state the problem that we are trying to solve in this issue

The splash screen hide animation glitches on app launch.

What is the root cause of that problem?

PR #30905 implemented expo-image for rendering of the SVG background image which made the loading process heavier than before when we used react-native-fast-image.

On this issue there are 2 things on the SignInPageLayout which cause the splash screen hide animation glitch - I will list them in order of severity:

1. The BackgroundImage which on iOS .../BackgroundImage/index.ios.js uses Image from expo-image to load the background image - a large SVG file of ~800kb.

home-background--mobile-new.svg

2. The .../SignInPageContent/SignInHeroImage.js which is the Lottie Hands animation.

Both of these are being rendered while the .../SplashScreenHider/index.native.tsx component's onLayout calls the splash screen hide function and the callback animates out 2 properties (opacity and scale) of the splash screen background and expensify logo.

What changes do you think we should make in order to solve the problem?

TLDR: Use isSplashHidden from SplashScreenHiddenContext to prevent the rendering of both iOS BackgroundImage and SignInHeroImage Lottie animation until the splash screen is hidden.

Pseudo code:

1. For .../BackgroundImage/index.ios.js we will show it with a smooth 750ms animation as soon as the splash hides:

• check if !isSplashHidden is true and return; in order to prevent the Image rendering (which causes the issue)
• below, wrap the Image with Reanimated.View, passing the same styles as Image + animatedStyle
• add onLoadEnd prop to the Image where we pass the function that will trigger the animation

this way when isSplashHidden becomes true and the SVG finished loading, it will animate-in nicely.

2. For .../SplashScreenHider/index.native.tsx we will render an empty View with the Lottie component's styles so that the layout doesn't jump when the actual Lottie component is rendered:

• check if !isSplashHidden is true and return the empty View with the Lottie component's styles - by doing this we prevent the rendering of the Lottie component (which causes the issue)

this way when isSplashHidden becomes true only then we render the Lottie component that will display the Hands animation.

Videos (included slow motion)

iOS: Native

Screen.Recording.2024-01-19.at.02.03.38.mov

• slow motion

Screen.Recording.2024-01-19.at.02.03.38.mp4

[garrettmknight]

@0xmiroslav what do you think of this first proposal?