🔥 Getting started with React Navigation v5 and Shared Element transition in React Native + create a parallax carousel animation using React Native Animated API and FlatList.
This is the second video tutorial from a series about react native shared element transition using react navigation v5 and react-navigation-shared-element package and other animation libraries.
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 create a parallax carousel in React Native using Animated API and FlatList
👉 how to use React Native Animatable in order to create an on-mount animations after transitioning to a different screen.
This is an advanced carousel animation done really easy with just a few lines on code.
➡ GitHub Source Code access: https://www.patreon.com/posts/41446571
Video series:
🎥 Episode 1️⃣ : https://youtu.be/C2Q_MPxqLMI
🎥 Episode 2️⃣: https://youtu.be/Zol6ivicuo8
🎥 Episode 3️⃣: https://youtu.be/xVBTiR8gLJE
🎥 Episode 4️⃣: https://youtu.be/fiAdt9-wNJo
🎥 Episode 5️⃣: https://youtu.be/nEntsYyCbLM
🎥 Episode 6️⃣: https://youtu.be/pq0mAv4y0Nw
🎥 Episode 7️⃣: https://youtu.be/dFEHETyuXWY
🎥 Episode 8️⃣:https://youtu.be/tC7egqnpYSY
🎥 Episode 9️⃣:https://youtu.be/6XxpUhQqpjY
👉Join Discord: discord.gg/vg7hUDU
Want to support me?
- Patreon https://patreon.com/catalinmiron
- BuyMeACoffee: https://www.buymeacoffee.com/catalinmiron
- Paypal: https://paypal.me/catalinmiron
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: http://twitter.com/mironcatalin
- Website: http://batman.codes
Timeline
00:00 Intro
1:40 Project boilerplate
3:18 Create the parallax carousel with FlatList
10:27 Animate the FlatList parallax carousel
11:45 Change text position based on scrollX
13:34 Scale animations based on scrollX
15:30 Style Details screen
18:00 Start SharedElement transition
20:00 SharedElement Image preview
20:40 SharedElement for Text
21:04 ShareElement Text preview
21:50 Style FlatList from the details screen
28:00 Animate the FlatList from details using React Native Animatable
29:40 Custom React Native Animatable animation
30:42 Final words and thank you!
#react-native #react-navigation-v5 #shared-element-transition #react-navigation-shared-element #animated-api #advanced-carousel-animation #react-native-flatlist-parallax-animation
#react navigation v5 #react native
