Animate Splash Screens in React Native using Lottie | DEVember Day 4

This is the fourth day of #DEVember and this episode is all about bringing your app's first impression to life! Learn how to configure the default splash screen, implement a custom design, and integrate mesmerizing Lottie animations!

If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:

📚 Today's Agenda:
- Overview of Splash Screens in Apps
- Setting Up the Default Splash Screen
- Designing a Custom Splash Screen
- Integrating Lottie Animations
- Configuring Lottie with React Native and Expo
- Best Practices for Splash Screen Animations
- Live Q&A Session

❗Try our FREE 4-day Masterclass on notJust.Academy:

📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:

💬 Join the notJust Development gang and let's build together:

Timecodes:
0:00 Introduction and Overview of DEVember Event
3:30 Recap of Previous DEVember Days and Projects
4:53 Setting up the Project for Day 4
7:52 Introduction to Lottie Animations in React Native
9:15 Installing and Setting Up Lottie in React Native
10:59 Implementing Lottie Animation in the Project
13:41 Programmatically Managing Lottie Animation
16:40 Exploring Lottie Files and Optimizing Animation Size
19:31 Customizing Metro Config for Lottie Files
25:48 Using the JSON Format for Lottie Animations
26:54 Preparing for Animated Splash Screen Implementation
29:30 Adjusting Lottie Animation Size and Aspect Ratio
31:03 Tricks for Creating an Animated Splash Screen
32:23 Editing Static Image for Splash Screen
35:06 Configuring Splash Screen in the App
38:37 Transitioning from Static to Animated Splash Screen
41:17 Managing App Readiness and Animation Completion
44:19 Debugging and Improving the Animation Transition
49:51 Handling Animation Completion and App Readiness
53:54 Optimizing Animation Finish Callback
58:29 Loading Assets and Ensuring Smooth Animation
1:00:23 Adding Exiting Animation to Splash Screen
1:05:07 Finalizing Exiting Animation Implementation
1:08:16 Wrapping Up and Final Adjustments to the Animation
1:11:48 Additional Tips for Animating Custom Components
1:14:48 Reviewing and Finalizing Project Changes
1:15:47 Closing Remarks and Outro

Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

[kuti]

This is really great learned so much from it! One thing though, I had this problem that on an Android emulator running on Linux, I was seeing a split second flash when my custom Splash Screen component was rendered and the default splash screen image disappeared. I also saw this happening in Expo Go running on a real Android device. It didn't happen on macOS iPhone Simulator and I also didn't see it on your video. When I built an APK from the demo and installed it on a real phone it worked. Guess it was the network latency, cause in dev mode everything is served up over HTTP. I wasted a whole day trying to debug it before I had the idea to check in an actual build and think about how the development mode works :) Just leaving this is in case anyone else encounters this "issue".

[mabdurrafeyahmed]

Needed this genuine guide to remove that tricky dead splash screen. Hope I won't see that again after bearing for 6 months. Next step remove expo starting screen to choose expo endpoint.

[arikmosfor]

amaizing work.what vscode theme are you using?

[davidgrammatico]

splash.png show correctly (in splash screen) in iOS, but not in android ? why ?

[DuyBùiQuang-xj]

do you have a video resolve upload image to mongodb ? i trying to use multer but not working!! Tks vrm!!!

[harveerSingh-iyxz]

Thanks Vadmin you teach me how to add some beauty to my horrible app😅😅

[omilkhouseo]

I am having the same issue with exiting animation, lol, thats why i watched this video

[vannyaofficial]

why Lottie run on android not working sir

[exary]

Man it looks great but 1h16 is really too much