React Native Shared Element Transition React Navigation V5 - Episode 1

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.

---
Video series:
---

For this tutorial we'll use:


Want to support me?


You can find me on:


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

[trungtri]

This video actually is my startup video approaching to RN, and now I watching it again ..

[youtubehelge]

Man this is so amazing. I’m working on react native for 6 month now, but there were no time for animations yet. Your tutorials are extremely helpful 😃👌

[khalidkhan]

OMG - this is the next level of tutorials - You are a genius. Thank you so much

[lordbooyaka]

you made like its so simple like you talking an english language, my mind blown up, shiitt i have alot to learn to get to this level !!!
keep up the work !

[jaxthedisintegrator]

Just here to say that your tutorials are *EXCELLENT* !!!
I'm actually learning React Native at school right now.
Your vids helped a lot.
Keep up the good work 👍.
AND GO BE TEACHER !!! ☝️😠

[piyushvostro]

Just one word for you....


U are fantabulous👌

[ravi.rupareliya]

It's just amazing man, keep sharing and we will keep supporting you.

[MuhammadUsman-xiou]

Once again great lectures, keep it up.

[reactninja]

Great tuts mate really appreciate your work! but in android after navigation it flickers for a second. any solution for that?

[veermetri]

It would be useful if you provide the project getting started git link so that we can follow along with the tutorial

[AbdulRehmanSiddiquii]

wow man really awesome animation you created so helpful in my new project

[shriganeshholebagil]

This is awesome man, learnt a lot👍🏼👍🏼👍🏼

[artmosphereID]

woahhh this channel is a GEM in youtube, subscribed!

[dev_front]

Um video mais top que o outro, como pode.

[hadiyakhni]

This was awesome.. Man all your videos are awesome! Thank you

[sumanparajuli]

Thank you sir for your effort. please go with full functional app with good UI... good animation.. with database... so we could understand all from ground level..

[AbhishekKumar-cvdh]

I've wrapped the icons inside SharedElement component in List component and in Detail screen, defined the sharedElements function on Detail screen, and am returning the list of ids exactly as you have specified. But I'm still unable to achieve the shared item animation as seen on 17:02. Could you please help me out? Awesome tutorial btw :)

[Timur]

Hi Catalin, Thank you so much for this. My problem is I have a stack (created using in a tab screen (created using createBottomTabNavigator).. I want the tab bar to show on the first screen but want to hide the tabbar once I transition to a detail screen (to emulate a modal).. I can't figure out how to hide the tabbar from a nested stack screen.

[test]

Catalin fantastic job on this series. you mentioned Ahmed's example that inspired you. where can I find that example?

[EQuimper]

Really really good. Awesome stuff here thank you !!