React Native Shared Element Transition React Navigation V5 - Episode 2

Veröffentlicht am: 16 September 2020
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video React Native Shared Element Transition React Navigation V5 - Episode 2 mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Catalin Miron 16 September 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 35,281 Mal angesehen und es wurde von 1 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

257