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

Видео Build an Animated Onboarding Flow in React Native | DEVember Day 2 канала notJust․dev