Animate splash screen #17477

zoontek · 2023-04-16T12:15:01Z

Details

This PR adds support for animated splash screen , instead of a simple fade out.

A few things:

The bootsplash module has been updated to handle promises, in the exact same way as react-native-bootsplash v4. This is important to wait that the native splash screen is hidden before firing the animation.
This PR does not rely on react-native-reanimated. As it's only scale and opacity, it's already 100% native animations (I also tried with reanimated, the behaviour / smoothness were identical)
On the web, I kept a simple fade as it's not a common pattern to have an animated splash screen on this platform (same I tried it, it felt weird 😅)
I removed the fallback prop on NavigationContainer, which was responsible for this ugly loading screen just after the splash screen hide. It appears their documentation say: "If you have a native splash screen, please use onReady instead of fallback prop.", so this is the way to go (Link)
I set the status bar to BaseAppTheme android:statusBarColor on Android, at start. Before, it was the color of the splash screen: it worked since we faded the native splash screen as a whole, making the system bars fade with it. It doesn't work with this new approach since the system bars cannot just switch from splash screen background color to app status bar color when removing the native splash screen (without fade). So instead, I immediately apply the app status bar color. It continues to "blink" in development on Android >= 12 (system thread splash screen uses transparent system bars, app thread splash screen does not), but it's not an issue on release as it's nearly immediate (check videos)
I added a navigationBarHeight constant to be able to center the logo on window height (including system bars). It uses a logic 100% identical to react-native StatusBar module.
I re-generated the assets since they were 1px off compared to the SVG (use Github Swipe view to see the small difference)

Fixed Issues

$ #14151
PROPOSAL: #14151 (comment)

$ #18172

Tests

Compiles and starts the app on a device with iOS or Android
Verify that the splash screen is animated and dismissed
Check that there is no intermediate spinner between the splash screen an the login form (like in those videos)

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Web

No changes (still a simple fade):

Desktop.Safari.mp4

Mobile Web - Chrome

No changes, similar to Web version.

Mobile Web - Safari

No changes, similar to Web version.

Desktop

No changes, similar to Web version.

iOS

iOS.simulator.mp4

Android

Android 13 (release, Pixel 4a, high-end device):

Pixel.4a.mp4

Android 10 (release, Xiaomi A2, low-end device):

Xiaomi.A2.mp4

MelvinBot · 2023-04-16T12:15:41Z

@Gonals Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

Gonals · 2023-04-18T10:53:45Z

rerolling pullerbear, as I'm OOO on parental leave

MelvinBot · 2023-04-18T10:54:06Z

@marcochavezf Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

marcochavezf · 2023-04-21T01:23:14Z

Hi @zoontek! Could you fix the conflict?

zoontek · 2023-04-21T08:06:07Z

@marcochavezf Done

0xmiros · 2023-04-21T09:02:50Z

reviewing today

zoontek · 2023-04-25T10:46:10Z

@0xmiroslav Any news?

0xmiros · 2023-04-25T10:54:04Z

iOS looks good. I am currently testing on various android devices including lower OS versions. will update soon

0xmiros

Android animation doesn't work at all for me. Tested on Android 13
NOTE: I merged main into this branch locally before testing

bug1.mov

src/Expensify.js

src/components/AnimatedSplashScreen/index.js

0xmiros · 2023-04-27T11:49:28Z

@marcochavezf can you please add Ready To Build label, so we can test release build?

marcochavezf · 2023-04-27T18:26:37Z

@marcochavezf can you please add Ready To Build label, so we can test release build?

Done

0xmiros · 2023-04-28T08:38:27Z

@zoontek is it ready for another review?

zoontek · 2023-04-28T09:02:20Z

@0xmiroslav Not yet. I published the updated animation (link) and removed Platform usage in the Expensify.js file, but there's still an issue with the new home screen and I continue to investigate.

zoontek · 2023-04-28T11:03:40Z

@0xmiroslav I fixed the issue! It appears that the bootsplash module can be faster to hide the native splash screen than Animated.View to render.

So I updated the logic, renamed AnimatedSplashScreen to SplashScreenHider, which is responsible to hide the native splash screen and animate the JS one when onLayout is triggered (instead of using useEffect in this case)

I restarted the app a dozen of times, I cannot reproduce it anymore 🎉
So it's ready for a second review.

0xmiros · 2023-04-28T11:06:22Z

ok, will review again.
Meanwhile, @marcochavezf can you please trigger release build again?

zoontek · 2023-05-17T12:38:54Z

@0xmiroslav Done ✅

src/components/SplashScreenHider/index.native.js

OSBotify · 2023-05-17T22:33:42Z

🧪🧪 Use the links below to test this build in android and iOS. Happy testing! 🧪🧪

android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/17477/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/17477/index.html

desktop 💻	web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/17477/NewExpensify.dmg	https://17477.pr-testing.expensify.com

roryabraham · 2023-05-18T23:46:57Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

screen-20230518-165238.mp4

Mobile Web - Safari

RPReplay_Final1684454049.MP4

Desktop

iOS

RPReplay_Final1684453577.MP4

Android

screen-20230518-164902.mp4

melvin-bot · 2023-05-18T23:56:46Z

Congrats, that’s your 5th PR merged! 🎉 Do you know about the ContributorPlus role? It’s an opportunity to earn more in the Expensify Open Source community. Keep up the great work - thanks!

OSBotify · 2023-05-19T00:04:31Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

roryabraham · 2023-05-19T05:58:40Z

Hmmm I had the ad-hoc build from this branch installed and noticed that the ReportActionContextMenu wasn't working. Let's monitor and see if the bug also exists on staging once this is deployed

0xmiros · 2023-05-19T07:11:38Z

ReportActionContextMenu isn't working

This caused by this PR. I think it came from Expensify.js
@zoontek please check this urgently and raise follow-up PR. Otherwise we need to revert this PR

src/Expensify.js

0xmiros · 2023-05-19T11:26:52Z

Hmmm I had the ad-hoc build from this branch installed and noticed that the ReportActionContextMenu wasn't working. Let's monitor and see if the bug also exists on staging once this is deployed

This is now fixed in #19244 and merged

OSBotify · 2023-05-22T23:51:30Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 1.3.17-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	failure ❌
🕸 web 🕸	success ✅

OSBotify · 2023-05-25T00:23:22Z

🚀 Deployed to production by https://github.com/chiragsalian in version: 1.3.17-5 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

fedirjh · 2023-06-14T02:36:23Z

config/webpack/webpack.common.js

@@ -73,11 +72,9 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
        new HtmlWebpackPlugin({
            template: 'web/index.html',
            filename: 'index.html',
+            splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),


This line caused a bug to arise, resulting in a regression in #19777. We should have verified that the storybook builds and runs successfully.

zoontek requested a review from a team as a code owner April 16, 2023 12:15

melvin-bot bot requested review from Gonals and removed request for a team April 16, 2023 12:15

zoontek mentioned this pull request Apr 16, 2023

[HOLD for payment 2023-06-01] [New Feature] Animate Native SplashScreen #14151

Closed

6 tasks

Gonals requested review from a team and removed request for Gonals April 18, 2023 10:53

melvin-bot bot requested review from marcochavezf and removed request for a team April 18, 2023 10:54

zoontek force-pushed the animate-splash-screen branch from a9331ac to 0b649e9 Compare April 18, 2023 13:09

marcochavezf requested a review from 0xmiros April 19, 2023 17:59

marcochavezf assigned zoontek Apr 19, 2023

zoontek force-pushed the animate-splash-screen branch from 0b649e9 to 7974701 Compare April 21, 2023 08:05

0xmiros reviewed Apr 27, 2023

View reviewed changes

src/Expensify.js Outdated Show resolved Hide resolved

src/components/AnimatedSplashScreen/index.js Outdated Show resolved Hide resolved

zoontek force-pushed the animate-splash-screen branch from 7974701 to cb63f80 Compare April 27, 2023 16:16

marcochavezf added the Ready To Build label Apr 27, 2023

zoontek force-pushed the animate-splash-screen branch from 6632c7d to 151f4c3 Compare April 28, 2023 09:02

Merge branch 'main' into animate-splash-screen

2b892bf

0xmiros previously approved these changes May 17, 2023

View reviewed changes

roryabraham requested changes May 17, 2023

View reviewed changes

src/components/SplashScreenHider/index.native.js Outdated Show resolved Hide resolved

Switch to reanimated

3edb908

zoontek dismissed 0xmiros’s stale review via 3edb908 May 17, 2023 21:36

roryabraham approved these changes May 18, 2023

View reviewed changes

roryabraham merged commit 1381237 into Expensify:main May 18, 2023

0xmiros reviewed May 19, 2023

View reviewed changes

src/Expensify.js Show resolved Hide resolved

0xmiros mentioned this pull request May 19, 2023

fix wrong condition of splash hidden #19244

Merged

57 tasks

s77rt mentioned this pull request May 19, 2023

DEV: message remains highlighted and does not opens options menu on right click of message #19286

Closed

6 tasks

aimane-chnaif mentioned this pull request May 22, 2023

Make status bar transparent on android #15778

Merged

59 tasks

OSBotify mentioned this pull request May 22, 2023

Deploy Checklist: New Expensify 2023-05-22 #19422

Closed

62 tasks

This was referenced May 29, 2023

clean up the deep link code #17452

Merged

[HOLD for payment 2023-06-05] [$1000] Desktop - Sign in - User can not validate an account #17724

Closed

Login - Infinity loading is displayed for open deep link on Desktop App #19860

Closed

fedirjh reviewed Jun 14, 2023

View reviewed changes

fedirjh mentioned this pull request Jun 14, 2023

[HOLD for payment 2023-06-13] [$1000] Dev: Not able to run storybook #19777

Closed

6 tasks

hoangzinh mentioned this pull request Jun 23, 2023

[$1000] Sign In - Logo is displayed instead Abracadabra page #20999

Closed

6 tasks

zoontek deleted the animate-splash-screen branch September 29, 2023 07:34

ahmedGaber93 mentioned this pull request Jul 23, 2024

[HOLD for payment 2024-07-26] [$250] mWeb splash screen displays the iconmark logo at a very small size #44624

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Animate splash screen #17477

Animate splash screen #17477

zoontek commented Apr 16, 2023 •

edited

Loading

MelvinBot commented Apr 16, 2023

Gonals commented Apr 18, 2023

MelvinBot commented Apr 18, 2023

marcochavezf commented Apr 21, 2023

zoontek commented Apr 21, 2023

0xmiros commented Apr 21, 2023

zoontek commented Apr 25, 2023

0xmiros commented Apr 25, 2023

0xmiros left a comment •

edited

Loading

0xmiros commented Apr 27, 2023

marcochavezf commented Apr 27, 2023

0xmiros commented Apr 28, 2023

zoontek commented Apr 28, 2023

zoontek commented Apr 28, 2023 •

edited

Loading

0xmiros commented Apr 28, 2023

zoontek commented May 17, 2023

OSBotify commented May 17, 2023

roryabraham commented May 18, 2023 •

edited

Loading

melvin-bot bot commented May 18, 2023

OSBotify commented May 19, 2023

roryabraham commented May 19, 2023

0xmiros commented May 19, 2023

0xmiros commented May 19, 2023

OSBotify commented May 22, 2023

OSBotify commented May 25, 2023

fedirjh Jun 14, 2023

Animate splash screen #17477

Animate splash screen #17477

Conversation

zoontek commented Apr 16, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

MelvinBot commented Apr 16, 2023

Gonals commented Apr 18, 2023

MelvinBot commented Apr 18, 2023

marcochavezf commented Apr 21, 2023

zoontek commented Apr 21, 2023

0xmiros commented Apr 21, 2023

zoontek commented Apr 25, 2023

0xmiros commented Apr 25, 2023

0xmiros left a comment • edited Loading

Choose a reason for hiding this comment

0xmiros commented Apr 27, 2023

marcochavezf commented Apr 27, 2023

0xmiros commented Apr 28, 2023

zoontek commented Apr 28, 2023

zoontek commented Apr 28, 2023 • edited Loading

0xmiros commented Apr 28, 2023

zoontek commented May 17, 2023

OSBotify commented May 17, 2023

roryabraham commented May 18, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

melvin-bot bot commented May 18, 2023

OSBotify commented May 19, 2023

roryabraham commented May 19, 2023

0xmiros commented May 19, 2023

0xmiros commented May 19, 2023

OSBotify commented May 22, 2023

OSBotify commented May 25, 2023

fedirjh Jun 14, 2023

Choose a reason for hiding this comment

zoontek commented Apr 16, 2023 •

edited

Loading

0xmiros left a comment •

edited

Loading

zoontek commented Apr 28, 2023 •

edited

Loading

roryabraham commented May 18, 2023 •

edited

Loading