App
App copied to clipboard
Expensify
[New Feature] Animate Native SplashScreen
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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?
- [x] Android / native
- [x] Android / Chrome
- [x] iOS / native
- [x] iOS / Safari
- [x] MacOS / Chrome / Safari
- [x] 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
This is only assigned to me in the interim, but I plan to pass this off to @mrousavy ASAP (see the slack thread)
Someone that's passionate is welcome to pick it up, though adding the not a priority label for clarity.
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!
@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.
+1 to that. Also CCing @Szymon20000 since he's handling the weekly updates.
Here's an example on how it could look like: https://twitter.com/mrousavy/status/1323305326473551874
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.
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.
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.
📣 @zoontek! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:
- Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
- Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
- Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01be4595436d743968
✅ Contributor details stored successfully. Thank you for contributing to Expensify!
@zoontek 🟢 to upgrade E/App to use the Android 12+ SplashScreen API (just the migration for now) 👍🏼
Here we go: https://github.com/Expensify/App/pull/16863 I added some explanations about why not using AndroidX core package for that.
(sorry about https://github.com/Expensify/App/pull/16862, my GPG key was expired, I tried to rewrite the commit, but signed and I guess you have a security against force pushs 😄)
Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.
Bug0 Triage Checklist (Main S/O)
- [ ] This "bug" occurs on a supported platform (ensure
Platformsin OP are ✅) - [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
- [ ] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
- [ ] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
- [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync
https://www.upwork.com/jobs/~01549123d6c6b140cc - hiring contract has been sent to you @zoontek!
@shawnborton @roryabraham And here it is: https://github.com/Expensify/App/pull/17477. It was a bit more work than planned since your app has opaque system bars (see Android edge to edge mode), but I applied the good old negative system bars margins trick.
Feel free to tweak the animations later, you'll just have to update the AnimatedSplashScreen component to do so.
iOS (development):
https://user-images.githubusercontent.com/1902323/232309491-5d249376-b1c1-4d17-833e-a810f8ca5c7d.mp4
Android 13 (release, Pixel 4a, high-end device):
https://user-images.githubusercontent.com/1902323/232309509-38e1be71-5dd0-4646-9a0a-94ff42fbf15b.mp4
Android 10 (release, Xiaomi A2, low-end device):
https://user-images.githubusercontent.com/1902323/232309564-2c47b2ab-7146-4c8f-9c66-b8ced28eee0f.mp4
I like it, but it does feel like it's kind of a rip off of how Twitter launches their app. Can you think of a different way to end the splash animation? Maybe it just fades out, or maybe the E icon shrinks instead of grows, etc.
Yeah, I reused @mrousavy example. I will dig for another ideas, but the possibilities are many.
We can also use Lottie to animate parts of the logo (maybe with https://www.haikuanimator.com, I'm not familiar with After Effect). If you have ideas, don't hesitate to submit them!
@shawnborton A quick test with easing back (slightly bigger, then shrinking) + fade. It's a little more subtle.
Timings are fully customizables: for example, we can fade for longer to see the logo shrink a bit more, or keep the same speed but starts the fade with a delay.
https://user-images.githubusercontent.com/1902323/232348959-8c147cb9-bb41-4192-a366-f74aba4523e3.mp4