React Native Shared Element Transition React Navigation V5 - Episode 5

🔥 Getting started with React Navigation v5 and Shared Element transition in React Native + create a cars list using React Native 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 beautiful cars list in React Native using 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.

---
Video series:
---

Want to support me?

You can find me on:

Timeline
TBD

#react-native #react-navigation-v5 #shared-element-transition #react-navigation-shared-element #animated-api #advanced-carousel-animation #react-native-flatlist-parallax-animation

[makc]

Привет. Недавно попал на это видео. Круто! Сделал!

[shriganeshholebagil]

Great job man, you've shared a lot of reference for shared element transition, Keep up the good work.

[selvamania]

This is what i exactly needed, thanks a lot

[darshanponikar]

Again! this was so helpful! Thank you, bro! Love from India 🇮🇳

[mirzairshad]

cool, awesome i have learned a lot from your videos thanks

[talhashabbir]

Great job bro, I have learned a lot from your videos. But I also want to learn how to give color to car with animation. Can you please guide or share something related to my query. Thanks.

[syedmoamberraza]

Amazing brother i tried many times to learn animation but failed. then i found you :) ... by following same as you did in video. shared animation doesn't work with flatlist proper as if i have horizontal list and onPress any item to view shared Element works as expect but view image after like right to left after perform navigations.

[dhaouadikassem]

we appreciate your job, how about talking a lil' bit about the skype architecture is it built with 100% react-native or most of it was built with native Api and thnx in advance

[ahmedadebisi]

Great Job man! I have a question. when should i use a scroll view vs a flat list.

[saadsheikh]

Thanak for great tutorials.
Every time I download the v5 navigation native and stack dependency for shared element transition its deleted some files of react navigation
Anyone who encountered the same problem? 🇵🇰

[khalidkhan]

Great as always - i have a question why u put the status bar hidden inside useEffect hook ??

[jerryjohnthomas]

hi thankyou soo much for your videos, have 2 doubts d1. the images are flickering for a second after reaching the final position and d2. when going back the images are not properly being overflow hidden it is reducing in size and fflicker happens and suddenly the overflow comes into place instatneously not animating . Any fix for the above wud be very helpful.Thank you sir

[adarshjaiswal]

What version of shared element are you using ?

[youtubehelge]

Oh no you left the key at the ButtonRow in the Scrollview. I think it belongs to the Animatable.View, correct? 😄

[musthafakhan]

shared Element not working for can you give any solution for that

[jey]

I like your video. Currently watching in non-English speaking countries. The editor font is not readable. It would be good if you could change it to a font that can be read well.

[yashodeepchikte]

I cannot afford patron and I need the source code