Summary
Keywords
Full Transcript
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/devember/day4 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/notJust-dev/DEVember/discussions/categories/ideas 📚 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: https://assets.notjust.dev/masterclass/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 📚 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: https://academy.notjust.dev/?utm_source=youtube&utm_medium=livestream&utm_content=DEVember 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 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
