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 Transitio...
🎥 Episode 2️⃣: • React Native Shared Element Transitio...
🎥 Episode 3️⃣: • React Native Shared Element Transitio...
🎥 Episode 4️⃣: • React Native Shared Element Transitio...
🎥 Episode 5️⃣: • React Native Shared Element Transitio...
🎥 Episode 6️⃣: • React Native Shared Element Transitio...
🎥 Episode 7️⃣: • React Native Shared Element Transitio...
🎥 Episode 8️⃣: • React Native Shared Element Transitio...
🎥 Episode 9️⃣: • React Native Shared Element Transitio...
---
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
Watch video React Native Shared Element Transition React Navigation V5 - Episode 1 online without registration, duration hours minute second in high quality. This video was added by user Catalin Miron 09 September 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 61,929 once and liked it 1.6 thousand people.