React Native for beginners - Build an Animated Onboarding Flow in React Native | DEVember Day 2

This is the second day of #DEVember and this session is all about creating that perfect first impression with your app. We're going to discover how to create an animated onboarding flow that will not only look good, but also work smoothly and keep users interested. We'll explore layout animations with Reanimated, making sure your React Native onboarding screens are visually striking. 🌟DEVember Day 2: https://www.notjust.dev/projects/devember/day2 💡Submit your idea on our Idea Board: https://github.com/notJust-dev/DEVember/discussions/categories/ideas 📚 Today's Agenda: - Introduction to Onboarding Flows - Design Principles for Onboarding Screens - Exploring Reanimated Library - Building Your First Animated Onboarding Screen - Enhancing User Experience with Layout Animations - Wrap-Up and Demo 💬 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 and Today's Tutorial 3:38 Starting the Project for Day 2 4:16 Setting Up the Development Environment 5:05 Preparing the Onboarding Screen 6:30 Implementing Button for Onboarding Screen 7:30 Designing the Onboarding Screen 10:03 Hiding Header and Styling the Screen 11:50 Implementing Icons and Titles for Onboarding 16:12 Choosing Colors and Styling Text 17:09 Adjusting Font Style and Spacing 20:07 Aligning Components and Styling Descriptions 21:19 Fine-Tuning Font and Text Appearance 22:27 Adding and Styling Icons 24:20 Creating Buttons for Onboarding Flow 26:51 Styling and Positioning the Title and Description 28:03 Finalizing Onboarding Screen Design 30:11 Adding and Designing Navigation Buttons 32:04 Creating Responsive Button Layout 34:54 Implementing Skip Functionality 37:44 Setting up Multi-Page Onboarding Flow 40:04 Explaining Different Approaches for Onboarding Flow 41:45 Implementing Onboarding Steps and Data 44:08 Adding Onboarding Content and Icons 46:21 Handling Screen Index and Onboarding Steps 49:03 Implementing 'Continue' Button Functionality 50:23 Handling Last Screen and Navigation 53:30 Adding Step Indicator for Onboarding Flow 57:01 Implementing Step Indicator Design 1:08:11 Adjusting Overall Layout and Status Bar 1:09:15 Discussing Gestures for Onboarding Navigation 1:11:04 React Native Gesture Handler Installation 1:11:57 Configuring Gesture Handler and Entry Point 1:14:22 Implementing Swiping Gestures for Onboarding Flow 1:15:28 Configuring Fling Gestures for Screen Navigation 1:20:45 Simplifying Gesture Handling and Verifying Functionality 1:21:53 Understanding Gesture Event Data for Direction Detection 1:22:58 Implementing Begin and End Events for Gestures 1:23:44 Utilizing Native Event Attributes for Gesture Control 1:24:59 Exploring Options for Detecting Swipe Directions 1:26:11 Investigating Gesture Handler API for Swipe Detection 1:27:26 Implementing Composed Gestures for Swipe Navigation 1:29:34 Enhancing Onboarding Flow with Backward Navigation Gesture 1:30:42 Completing Gesture Setup and Testing Swiping Functionality 1:31:30 Streamlining Gesture Handling Code 1:33:01 Introducing Layout Animations with Reanimated 1:33:42 Setting Up Reanimated for Layout Animations 1:34:37 Implementing Simple Layout Animations 1:35:33 Configuring Reanimated and Adding Bounce Animations 1:36:38 Adjusting Animation Settings for Onboarding Screens 1:37:46 Applying Layout Animations to Individual Components 1:38:50 Using Unique Keys for Triggering Entering and Exiting Animations 1:39:32 Fine-Tuning Animations for Smooth Transitions Between Screens 1:40:51 Enhancing Text Slide Animations with Reanimated 1:45:06 Optimizing Animation Speed and Synchronization 1:47:10 Recap and Final Adjustments 1:48:14 Ensuring Smooth Directional Animations for Text Components 1:49:20 Final Touches to Animated Onboarding Screens 1:54:24 Demo of Completed Animated Onboarding Screens 1:55:02 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