React Native Shared Element Transition React Navigation V5 - Episode 1
61.1 هزار بار بازدید -
4 سال پیش
-
Getting started with React Navigation
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: discord
Want to support me?
- Patreon: Patreon: catalinmiron
- BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
- Paypal: https://paypal.me/catalinmiron
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: 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
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: discord
Want to support me?
- Patreon: Patreon: catalinmiron
- BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
- Paypal: https://paypal.me/catalinmiron
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: 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
4 سال پیش
در تاریخ 1399/06/19 منتشر شده
است.
61,150
بـار بازدید شده