React Native Shared Element Transition React Navigation V5 - Episode 1

Getting started with React Navigation v5 and Shared Element transition in React Native + create an advanced carousel animation using React Native Animated API.

This video is the ground work for a series about react native shared element transition using react navigation v5 and react-navigation-shared-element package.

In this tutorial we're going to create the navigation system using react navigation v5 and shared-element transition.
I'll teach you
-how to use SharedElement component to properly animation or transition between the screen
how to change the Card interpolation to create the fade in and fade out animation while doing the shared element transition
how to use reactive type of animation from React Native Animated API in order to create a two way binding carousel that will also animate from the header and viceversa. This is an advanced carousel animation done really easy with just a few lines on code.

👉👉👉 GitHub Source Code access: https://www.animatereactnative.com/ 👈👈👈

---
Video series:
🎥 Episode 1️⃣ :    • React Native Shared Element Transition Rea...  
🎥 Episode 2️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 3️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 4️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 5️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 6️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 7️⃣:    • React Native Shared Element Transition Rea...  
🎥 Episode 8️⃣:   • React Native Shared Element Transition Rea...  
🎥 Episode 9️⃣:   • React Native Shared Element Transition Rea...  
---

For this tutorial we'll use:

👉 Join Discord:   / discord  

Want to support me?

Patreon:   / catalinmiron  
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron

You can find me on:

Github: http://github.com/catalinmiron
Twitter:   / mironcatalin  
Website: http://batman.codes

Timeline:
00:00 Intro
01:34 Discord channel announcement
02:00 Project description
05:35 Packages used for shared elements transition and install dependencies
07:57 Create the Navigation using react-navigation v5
11:23 Navigate to Details list
12:35 How SharedElement actually works
14:10 SharedElementConfig
16:58 Initial shared element (PREVIEW)
17:30 Change navigation default transition
18:20 cardStyleInterpolator react navigation v5
19:20 transitionSpec for custom animation config
20:28 working on the details slider
22:31 Mounted animation when transitioning to details
26:25 Animated FlatList at mount
28:00 Animate in reverse before navigation
30:10 Sync FlatList with the view from above
33:10 Showcase the FlatList and View sync
36:00 Output of the sync
36:10 Sync FlatList from the View (scrollToIndex)
38:05 Final thoughts and final words

#react-native #react-navigation-v5 #shared-element-transition #react-navigation-shared-element #animated-api #advanced-carousel-animation