React Native Shared Element Transition React Navigation V5 - Episode 2

Published: 16 September 2020
on channel: Catalin Miron

35,281

🔥 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.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...
---

👉Join Discord: discord.gg/vg7hUDU

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
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

On this page of the site you can watch the video online React Native Shared Element Transition React Navigation V5 - Episode 2 with a duration of hours minute second in good quality, which was uploaded by the user Catalin Miron 16 September 2020, share the link with friends and acquaintances, this video has already been watched 35,281 times on youtube and it was liked by 1 thousand viewers. Enjoy your viewing!

576