Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Animate Splash Screens in React Native using Lottie | DEVember Day 4
Play lesson

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

5.0 (4)
42 learners

What you'll learn

This course includes

  • 537.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

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

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere