React Native Shared Element Transition React Navigation V5 - Episode 1

hey guys and welcome back to my channel this video is the starting point for a series about shared element transition in react native i was inspired by ahmed he created this beautiful shared element transition plus a two-way binding type of slider and i'll show you my way of doing it in react native by using the react navigation v5 react navigation shared element and animated api this is going to be a long tutorial but is the groundwork for the upcoming videos which i've prepared for you i'll show you how to get started with react shared element transition in react navigation v5 and how to create this type of animation using the reactive type of animation which are already walk you through plus multiple types of tips and tricks here and there before jumping into vs code i'd like to thank you all for supporting this channel especially to design the code kiselev nikita karaf amman and violina for becoming patreons and supporting me on a monthly basis and the special thanks to violina because she took the one-on-one tire like the private help and i was able to help her out with a pro with some issues that she encountered during a reagnative app development so thank you once again for supporting me it means a lot to me i also created a discord server if you'd like to join it the link to it it's also in the description of this video and now without further ado let's jump into vs code and start building the shared element transition and the groundwork for the upcoming videos all righty so we are in vs code here and i've created a project using expo and i also built couple of screens components and whatsoever so let me walk you through what we have so far before jumping into the navigation system so we have an icon here that's basically a view wrapping an image and i'm passing the uri as a property and it's going to apply some styles we also have a back icon that will use for the navigation system that's using the ant design and with the arrow left and apply some styles again we also have a marketing slider and if i'm going to the application here and render the list component this is the marketing slider right i have some data here inside the the config and i have four different slides this slide will contain a title and a color and i'm rendering a flat list and i'm making it horizontal i'm snapping to a particular interval and applying some different styles so this is the the slider and the screens i i have two different screens one is the list screen and one is the detail screen and for the list screen i'm rendering this marketing slider plus a list of different icons and the icons i grabbed them from the travel config here so i have an image uri a title and an id and the icons are grabbed from the flat icon the link is here but you can also find it in the description of this video so i'm rendering a view that's uh having a flex direction of row and i'm wrapping the items and in this way i'm creating this kind of list with different columns and inside it i have i'm wrapping the icon into a touchable opacity so you can press on it after integrating the navigation will also go to the details screen and in the detail screen if i'm rendering the detail so detail this is the detail i have here um a flat list so first of all it's the back icon rendered then i have a view that contains the same list of icons here right with the touchable opacity attached to it and each one will will do something on press and below i have a flat list i'm for each item i'm rendering a dummy uh a dummy scroll view with a field of special text based on the selected item and i'm also grabbing the selected item from from the data so this is what we have so far and for the navigation system in order to make this shared element transition work we will use a couple of packages here so we will need the react navigation shared element package and react navigation v5 and in order to make this shared element transition work for in order to make this package work for react navigation v5 we need to go to the repository and there is a branch called navigation v5 again again by the time i'm recording this tutorial react navigation v5 in its is still in development and is not fully ready for you to play around but i thought that i'll give it a try and see how we are gonna create multiple types of transitions using it right and here it says that we need to install couple of dependencies so in order to to we need to get the the last latest react navigation shared element and react native shared element so let me open up here the terminal and copy this this line here and for the navigation system we need to install some fixed dependencies so for react navigation native we need five zero nine and react navigation stack five one one so let me copy those dependencies here paste them and while this is installing let's go ahead to the react navigation documentation site and we also need to install uh extra dependencies and since i'm using expo in the getting started page there is dependencies for expo managed project so we need react native gesture handler reanimated screens and safe area view and now if i paste those dependencies let's install them and the first thing to to make this work let's go to the application and instead of rendering the details here do the following so we just need to install a dummy view here okay and we will need to grab a couple of properties so now that we have all the packages installed right and we'll need the from react native screens will need the enable screens we'll also need from react navigation shared we'll need a create shared stack element and we also need from the native we need the navigation so only the navigation container from rear navigation native create shared elements stack navigator from react navigation shared element and enable screens so let's enable screens and also create the stack and in order to create this shared element transition it comes with its own stack navigation and we can create the stack by calling the create shared element stack navigator and inside this view we need to first wrap everything into a navigation container and inside we'll have from the stack will have the navigator so instead of using the stack navigator from uh react navigation v5 we'll use the navigator that comes from the shared element navigation and down below inside we'll create multiple screens so we'll have a screen for the list with component component the component that i've showed you earlier so the list component and we also have details detail with detail component right and now if i hit refresh you see because this is the first screen is going to also be the initial one but we can specify the initial right right here and first thing that i would like to do is remove the header we don't need it for our example so header mode is going to be none so so far everything's looking pretty nice we have a navigation system in place and now if i'm going to the list in order to so now because i've wrapped everything all the the screens into this navigator system they will receive the navigation as a property and here inside the list i have the navigation as a property as a prop and whenever the user will press on this button i would like to go to the details screen so here on press i'll say navigation push then i'll specify the name of the screen and then the item so this is the param that i would like to send to the route and this is the screen name so if i hit save now whenever i'm pressing on a button is going to go to the details and let's do the same for the back so inside the detail screen for the back i will need to grab the navigation and navigation go back whenever the back icon is pressed so now it should go back as well and for the shared element transition in order to work we will need to to wrap whatever element we would like to move from a screen to another into a shared element pass a unique id in both screens in the first or the initial screen and also on the next screen and in order to do that we need to first import the shared element so in my case i would like to transition this icon from the list screen to the detail screen so let's wrap this into a shared element so shared element shared element is coming from the react navigation shared element so if i grab this and wrap we need to specify an id and this is really important because this id should be unique and in my case i would like to have an item item dot id and then icon so this is going to be the for for each particular item this is going to be the unique shared element id and now if i hit save and refresh nothing has changed because the next screen is not aware of this shared element so if i copy this guy here and inside the shared element wrap the same the same icon with a shared element and import shared element now we have access to the to this id but during the transition we also need to inform the navigator hey this is the id that you should be aware of and you should perform the transition from the initial screen to the next screen and to do that if we go to the github repository down below there is a static you can do in two different ways you can either in uh in where you specify the stack screen you can create here shared elements config and return either a list of unique ids or a collection of ids so in this case this is a list of unique ids basically the shared element id or you can specify a collection if you if you have multiple elements that you like to transition you can also specify uh in this format with an object where you'll have an id uh an animation type a resize and a line but you can also specify a list of of ids unique ids and react native shared element will perform the transition using the default properties and this shared elements config can be specified into a stack screen or you can specify as a static property and i'll be using the static property so let me grab this static property and go to the to the component and here i have the detail component and down below i'm exporting it and before exporting i can create this shared elements as a static as a static config here so shared elements is uh it's attached now to the details component and now the navigator will be aware uh what things to move from a screen to another or what is going to be mapped between the screens right and in my case i don't need the route params because i would like to map all the items from the previous screen to the next screen so in my case i'll go i'll return data i'll map through the data i'll get the item and return here the item [Music] item item.id and then icon so grab all the data so this data right get the id and make the list with all the ids and details is not defined okay and also commented out so now if i hit refresh this navigation will be aware of all the ids that i would like to transition from screen to another and based on the next position it's going to animate and this is working so far but it's really fast and we cannot do anything and also you'll notice that we have this uh push navigation system which we don't want in our case so in order to to fix this let's go to the application and for the detail screen we would like to change the options for the screen so options options it's a method that's required to return a set of configs which is an object right and we would like to first so options we would like to first disable the gestures so we don't want to have any gestures enabled then we would like to create a different interpolator so the card interpolator right now if if you'll see it's like it's a transition interpolator and we would like to create a fade in out so we will place the opacity based on the progress of the navigation and in order to do that we can specify here a card style interpolator and this card style interpolator will return a card style and here we'll play with opacity and to get the progress of the navigation here the card style interpolator will receive the progress as a as an argument so from the current we'll get the progress and this progress is already an animated value so we can directly apply the progress to the card style interpolator and now if i hit refresh you'll notice that the screen will fade in and fade out which is more like the expected behavior for a shared element transition in general and here we can also play with the transition spec so transition spec it's saying for the open and the close of the navigation what uh type of animation should perform so we will have an open here and inside the open will have an animation of either spring or timing i'll be using the timing and you can also specify a config and the config can have a duration delay whatever the animated timing property accepts from real native and i'll have a duration of 1000 just to make things clear and apply the same for the close animation as well now if i hit refresh you'll notice that it's going to take one second to move from a screen to another the items so the react native shared element transition it's aware of the transition spec that we are passing to the react navigation and is going to perform that transition based on whatever we specified as animation okay so now that we've created this whole navigation system right i like to go to the details and start working on the slider itself plus doing some little animations what we are going to do is two different things so once this is this flat list has a different uh has a different selected in slide i like to animate the the list from above and also vice versa so if you press on an item i like to scroll to that particular slide and make it enabled right so now because we received this this item from so from this list i received the item we can now grab the uh active item from the route so we'll take here the route and we'll get the item from route params now if i hit save and go to this item you'll notice that the initial selected its bikini because this is the name of the item if i'm going to the second one it's to the third one also the banana so everything it's working as expected now what i would like to do is to [Music] first create this reactive type of animation in order to change the uh position of this view uh but also mounted animation so i would like to show this list whenever the transition has finished and let's start by creating here a couple of animations and i'll say mounted animation animated it's it's mounted animated it's a react use ref new animated value we are starting from zero get the current all right we all also going to have an active index which is equal to the selected item index here and we will also have an animated index which is also starting from this the reason for that is because we will change the active index and make the animated index reactive if you don't know exactly what i'm talking about a link to the reactive type of animations will appear here i've already walked you through i think there are three or four videos now explaining how a reactive type of animation works in react native so please follow up the link if you would like to see how this is actually working and for now when i'll be using the use fx so whenever the component will be mounted so when the component will mount i would like to first listen to the active index changes so i'll have two different animations so i'll have animated parallel so let me import animated here it wasn't we don't need to animate it from reanimated but instead from animated react native and we'll have a parallel and here we will do the animated timing and we'll animate the animated index and we'll go to value the active index with a duration of let's say 300 and we'll use the native driver for it so this is the basically whenever we are going to modify this scroll we will set the active index and the we will set the active index and because this is reactive animated index will be animated so i think the timing that naming it's not good so i'll say active index animation let's say right and also i like to start the mounting so i'll do here an animation i'll specify a two value and here i'll return an animated timing and i'll animate the mount mounted animation i'll go to value to value a duration of let's say 500 a delay of a delay that i can specify as a param and i'll also use the native driver for it and the reason for that is passing a delay i would like to initially wait until the the whole navigation uh transition finished and uh that's why i'm passing the delay so here in the parallel i like to call the animation method apply a value to 1 and i'll wait let's say 1000 because for now this is the transition timing for the navigation and also start so now we have this animation and to make to make it visible let's create here let's make this flat list an animated flat list and we can start by animating the opacity so the style of the animation will apply an opacity of mounted animated so initially it's going to be zero and then it's going to be one so let's see now it should start the animation right and i'll also like to transition on y-axis and if i apply here a transform of translate y and create the translate wise or const translate y it's equal to we will interpolate the mounting animation specify an input range of zero and one and an output range of when it's zero is not visible i would like to make it let's say 50 pixels and then zero now if i hit refresh it should start from bottom just a slightly animation value and this is how you actually can animate the the components after the transition has finished and you can also specify you can also remove the items and then go back and in order to do that because we have here an animation method we can we can go here where we have the back icon so on press if you'd like to wait for the animation we can call animation pass the zero there is no delay and start the animation and when this animation is finished we can go back so this uh we we basically call this method right so now if i hit refresh go to the screen and go back it's going to animate and whenever this is finished apply the navigation go back so now i can also play around with the timing and i think it's faster right so the duration of the animation let's wait 500 here all right and let me apply a different is easing method to this so we'll have using it's easing using i'll start importing easing from react native and i'll have easing in out by easing ease this is just applying a different type of easing function so this is a more like it's faster in and out right now let's uh let's do the the animation of the items based on the active scroll so how we are doing this we first watch for the changes inside this scrollable list and we'll do on momentum scroll and we'll get here the event and based on the position of the content offset x we know the active index and set the active index with the value right so we'll say new index it's equal to event native event content offset and the x and we'll do here a math floor divided by the width of the screen so in this way because we know each slide is going to be the screen width we can divide it and get the active index and here we will do active index we will set the value with a new index and now to animate this icon this item we need to first make the entire animation the entire view on animated view an animated view the problem now which i see the problem which i see now is that is not starting from the middle so in order to make that happen we can apply a different margin left of width divided by two so half of the screen but then we also need to subtract subtract half of the item plus the spacing so minus icon size divide divided by two minus spacing so this will start from the middle of the screen and now in order to animate it we can apply here translate x it's equal to how it is so it's the active animation will interpolate it will have an input range of minus 1 0 and 1 because we know that we will increment or decrement by 1 so this is the index and for the output range we would like to move it with the icon size plus spacing right so we will have here let me create a size which is icon size plus spacing first we would like to move it with size so we will go to the left zero and then minus size so for the next item current item and previous item and apply this translate x to the navigation uh to the to this view so we will do transform translate x and then the active slide right and now if it should work if whenever i'm moving the item this is positioned properly and i see that we're not transitioning correctly because we forgot to multiply the item size with with to the spacing and if i go to the to this item to the tropical bar is going to be automatically scrolled because of the active index modification in the first place and then whenever i'm moving the item it should also animate now i would also like to make here a small adjustment and apply a special text of item.title and a style of font size 10 pixels so we have this visible and also align the items items to the center okay so we have turtle we have swimming pool and i'll also like to apply a different different opacity based on the active slide right so here inside the item i can say instead of returning directly the item based on the index i would like to apply a different a different opacity so i'll get the item and the index and i'll create here an input range which is index minus 1 multiplied with the size index and then index plus one multiplied the size and i'll get the opacity so opacity we will interpolate the animation the active index animation we will interpolate it pass the input range and for the output range we'll like to have it let's say 0.5 and 0.5 and we have here like this all right and also apply here and i did hear a mistake uh because i forgot that we are actually incrementing and decrementing with index it should be index it should be without the multiplied to the size and now the item everything it's uh transparent so only the active item it's uh visible and now let's do the vice versa so whenever you press on this item it should uh it should scroll uh to to this particular index and also make it active so if i go here where we render the item here we will do the set active with the index right so whenever we press we move but now we also need to change the index of the flat list so in order to do that we have the reference of the flat list and we can scroll to index specify the index and animate it is true hit save now if i go to the turtle you'll see this is animated go to swimming pool and so on and also vice versa this is working both ways and the reason why this scroll to index it's actually working is because here inside the flat list i have a get item layout so in order to have scroll to index working you need to specify a get item layout where you'll have for each item and with an offset and the length right and you can also specify an initial scroll index and now if i go back this is animated this is animated and if i select for example turtle is going to make this active right and then also scroll into the the place that was it it was a pretty long video but is the groundwork for the upcoming videos that i've prepared for you around shared element transition hopefully you learned how to create this type of animation using the react navigation v5 and how to create this two two-way binding slider animation in react native by using only the animated api plus the reactive type of animation and if you like this video don't forget to subscribe and like it and share it with your friends on social media and also don't forget to join the discord community which i've created the link to it is down in the description so enjoy it and see you next time bye bye

Channel: Catalin Miron

Views: 35,974

Keywords: react native shared element react navigation 5, react native shared element navigation, react native shared element github, react native shared element example, react native shared element transition, react native shared element expo, shared element transition, react navigation v5, react native animated api, react native carousel animation, catalin miron, custom react navigation animation, Animated flatlist react native, react native flatlist animation

Id: C2Q_MPxqLMI

Length: 39min 4sec (2344 seconds)

Published: Wed Sep 09 2020

Reddit Comments

[u/mrousavy]

Great video. Though the issue with using react navigation is that animations are run on the JS thread (layout animations) which turns out to be really slow and laggy in a real world example. I've switched to wix/react-native-navigation because of this exact reason, and we're currently working on implementing shared element transitions as smoothly as possible. If anyone is interested in helping out with some Objective-C/Java, take a look at some issues over there such as this one.

[u/hadiy13]

Awesome videos!

[u/marius4896]

foarte tare ! felicitari

[u/jonaHillsAnus]

This came at a great time, I needed a video tut on this package. The examples on github are very lacking. Will watch this later!

On an unrelated note, what font are you using in vscode there?