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!
DEVember Day 4: https://www.notjust.dev/projects/deve...
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:
https://github.com/notJustdev/DEVemb...
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 4day Masterclass on notJust.Academy:
https://assets.notjust.dev/masterclas...
Enroll NOW in The FullStack Mobile Developer course and don’t miss out on your chance to become a 6figure dev! Check out what our successful students are saying about their experience:
https://academy.notjust.dev/?utm_sour...
Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
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