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

[roryabraham]

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

---

Action Performed:

Open the app

Expected Result:

The splash screen should appear, and then there should be an animated transition between the splash screen and the homepage of the app.

Actual Result:

The splash screen disappears, and the homepage appears. No animation.

Workaround:

n/a

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

This should apply to all platforms, though it's worth noting that there are currently some problems with the splash screen on web, stemming from both a misconfiguration and the CSP. So for the scope of this issue we can start with the native splash screen and then loop back to web.

Issue reported by: @mrousavvy
Slack conversation: https://expensify.slack.com/archives/C035J5C9FAP/p1673054140778389

View all open jobs on GitHub

[roryabraham]

This is only assigned to me in the interim, but I plan to pass this off to @mrousavy ASAP (see the slack thread)

[roryabraham]

DM'd Marc to ask if he still wants this one. It's not urgent at all.

[JmillsExpensify]

Someone that's passionate is welcome to pick it up, though adding the not a priority label for clarity.

[roryabraham]

Going to drop this since I'm not going to work on it any time soon

[mrousavy]

Cool, I can take a look at this soon (next week-ish)

[MelvinBot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[roryabraham]

@mrousavy assigning to you to keep it on your radar. It's a nice-to-have improvement but we'd welcome it whenever you've got some spare cycles.

[JmillsExpensify]

+1 to that. Also CCing @Szymon20000 since he's handling the weekly updates.

[Szymon20000]

We have it on our list but haven't started working on it yet.

[mrousavy]

Here's an example on how it could look like: https://twitter.com/mrousavy/status/1323305326473551874

[shawnborton]

Love it.

[janicduplessis]

This might be out of scope, but I also noticed we are not using the new splash screen api on android, this causes 2 different splash screens to show on recent android versions. Looks like we currently vendor the splash screen library, I know latest version of https://github.com/zoontek/react-native-bootsplash supports it.

[JmillsExpensify]

Actually I think that's a great point, as we've struggled with the 2 splash screens in a string of bug reports. I think we should address that, either separately or in this same issue. It's probably best practice to mention something in our Slack room so we get more 👀 on this and align.

[zoontek]

Hi folks! If needed, I can help you migrate to Android 12 Splash screen API first and animate the splash screen. We can use Animated, reanimated or even Lottie for that.
But it's probably better to do it in two times: first we migrate, then we add the animated splash screen.

[grgia]

@JmillsExpensify I think we were considering using the coin instead of our in-app loader, so it wouldn't replace the icon mark in the splash screen for this issue.

But instead replace this one:

[zoontek]

@grgia This has been removed in my PR (#17477). The issue was here:

https://github.com/Expensify/App/pull/17477/files#diff-c3d3bf8bc4056d8f2e8ff15f6d72d7e81656cd36c30a202a084c50dda1dff582L55

And has their doc mention here:

If you have a native splash screen, please use onReady instead of fallback prop.

Now the splash screen fade with a small shrinking effect to show the form, no additional loader.

[MelvinBot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[shawnborton]

Out of curiosity @shawnborton, do we want to use this animation instead of keeping the user focused on the logo? I'm not particularly passionate, but I'd be curious to know your thought process versus for the coin at this stage versus later and in an app flow.

@JmillsExpensify I think I was mostly curious to see the coin animation as a placeholder, because I am trying to understand what this could even look like in terms of when the animation can start, how long it might last, etc.

But I agree, my preference for the splash screen would be to just match the E iconmark from the app launcher logo. And that being said, maybe I am overthinking this and we should just go with something super simple for now - we don't need to get crazy for the splash screen because we want it to feel super lightweight and quick. So yeah, maybe we just stick with something similar to this for now, and then separately Georgia can implement the coin loader for in-app loading.

[JmillsExpensify]

Nice, sounds great!

[kadiealexander]

Making a note that we initially agreed to pay @zoontek for this issue here, however @roryabraham and I spoke to @zoontek in Newdot, and since the scope of this issue blew quite far out from the initial agreement, we agreed to the following:

$2000 total (one bounty for each of):

• Android 12 splash compact (Add BootSplash support for Android 12 #16863)
• invert splash asset colors + add an animation (Animate splash screen #17477 & Invert bootsplash colors + fade splash screen on web #16932)

The first payment for the first project has been paid here in a milestone, and I'll retain the same contract to make the second payment as a milestone once both PRs have completed the regression period.

[zoontek]

In this PR, I fixed this issue: #18172 (as @grgia mentioned it here)
This was an old bug since it has been here since you have a native splash screen. It might be more visible lately since the latest changes made the splash screen faster to hide.

Like I said in the description, this was caused by NavigationContainer fallback prop:

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)

@kadiealexander I'm not sure I could apply on Upwork for this one too?

[roryabraham]

Yeah, @zoontek if your PR fixes #18172 then you are eligible for compensation for that one too

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[0xmiros]

Not blocker anymore, Melvin! It was fixed earlier.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.17-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Animate splash screen #17477

If no regressions arise, payment will be issued on 2023-06-01. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[kadiealexander]

Both bounties issued for @zoontek.

[0xmiros]

@kadiealexander I am also eligible for C+ review

[kadiealexander]

Your payment for the review of PR Invert bootsplash colors + fade splash screen on web #16932
should be covered here. Please let me know if you had any issues receiving this payment.

[0xmiros]

@kadiealexander They're different PRs from different requests.
The first PR was requested C+ review here by @neil-marcellini.
The 2nd PR was requested C+ review here by @marcochavezf.
Coincidentally, I raised interests on both PRs and became same C+ 🙂

And from this comment, it makes sense that bounty would be 2k total since this is not internal PR but external (maybe agency).

[kadiealexander]

Thanks for flagging those! I've sent a contract to pay another $1000 to bring the total up to $2k like was paid to @zoontek. :)

[0xmiros]

Thanks @kadiealexander
Accepted offer

[kadiealexander]

Paid! @roryabraham all payments have been issued, if this one is ready to close.

[kadiealexander]

Closing, please reopen if anything was missed.

[melvin-bot]

@roryabraham @kadiealexander Be sure to fill out the Contact List!