React Native Shared Element Transition React Navigation V5 - Episode 3

hey welcome back to my channel friends this is the third part of a series about shared element transition and how to do it in react native by using the react navigation v5 and react navigation shared element i was inspired by eugene galota he created this beautiful carousel animation plus a shared element transition and i will show you my way of doing it react native by using the animated api react navigation and fling gesture handler from react native gesture handler before jumping into vs code i'd like to thank you all for supporting this channel it means a lot to me and especially to jaiman moy alvera adrian carballo leonel daniel s colin vran simon chadrahar hermant and eric for becoming patreons and supporting me on a monthly base i've already coded all the challenges and to get access to the source code you need to also become a patreon so the link to what we are going to build and how to become a patron is down in the description so thank you all once again for the whole help that you give and now let's play the intro jump straight into vs code and start building the third part of shared element transition in react native shall we all righty guys so we are in vs code here and i've created a project um like i've created the screens for tutorial number three so we have an entry point here and it's going to transition to the to the list itself and then we have a button that's going to the details and i've already styled the details uh basically we have a view here and with three different uh two different components so let me go and walk you through it so we have the height component which is this component here displaying a title and then a number and the distance component which is uh basically the same but it's displaying a small number four kilometers and then the avatars which is a view and inside i map through some dummy avatars which i've created here in the travel up list so i have here some dummy avatars created with faker and i'm of iterating over this list of avatars and i'm displaying image and uh what i'm doing here i'm basically inverting uh the the set index so the first the first one will have a bigger z index compared to the last one so because how this is working is as deeper as you go into the tree as bigger does it index is so without this uh decrement of the z index uh actually this is avatar's length so without this this hack basically the the if i remove this the first one will have a lower z index compared to the to the last one and we wanna uh vice ver we wanna invert or reverse this order now i can uh i can hit refresh here go to the app itself where we have the the navigation and the initial route should be travel up list so we will start from the from the first one let's see if i misspelled it so it's actually it's tutorial number three okay so tutorial number three is the default route and what i would like to do is first create the carousel with that really nice animation i already walk you through how to create this stack type of animation but we will do it again and by the way the link to to the previous video will appear somewhere on the screen so you can check it out and follow it out but let me close this one and also the navigation because we don't need it and and here in the in the list itself so here on on this screen we would like to start by doing uh creating a flat list so remove this touchable and use the flat list so we will import flat list the data is going to be the trivial updater and the triple up data let me show you here is this data here basically i'm mapping through all the unsplash images which i grabbed and i'm rendering i'm returning a key an image and the name the name of the mountains are here and i'm taking one by one right and here if i hit resa save it's uh okay now we should be good to go okay nothing is visible so now we have the data we would like to pass a key extractor item and then item key and then we'll like to display the item so take the item return a view and containing an image and maybe a text right so text so we'll have here a source of uri item image and the style of styles image and here inside i'll have a stylus name and then the name of the monitor so item item.name and view it's not defined so let me import the view from react native and okay great so we have those uh those names here and we need to create the styles for the image so image and then the name for the image will have a width of item width or image with height of image height we will apply a resize mode of cover and then a border radius of 16. so we will have this and the image with an image height it's uh the width it's 86 percent of the screen width and the height it's uh that value multiplied to 1.5 so we can create this this pretty nice effect and for the name i'll do text transform uppercase we'll apply a color of white a font size of 36 and a font weight of 900 okay now let's wrap this into a touchable opacity uh we know that we would like to move to to the to a to the next screen right so we'll have here on press is just a dummy on press for now and now let's style the items so in order to make this positioned absolute we need to modify the cell renderer item so we will have here a cell renderer component right we will get the index item children style and the rest of the props and here we will return the view containing the children we'll pass the index index the props and the style will have a new style and for the new style why we are doing this because we will position all the items absolute and we would like to reverse the z index so the new style is going to be the style right so the new style is going to be an array and here we will do a z index is data minus data length minus index so basically we will decrement the z index and then we also need to align the image to the center so we'll shift it by half of his width and height so left is going to be image width divided by 2 and top is going to be image height divided by 2. and now in in this way we modified the cell renderer component which is basically the wrapper for our render item and this is complaining because we need to do the travel up all right and now inside the renderer we need to say the position is going to be absolute and for the content container style we'll do a flex one we will align items to the center and justify the content to the center as well so we will make this full width and height right and position them absolute and i think that this absolute position it's it's doing the trick so without it you'll notice we don't have anything basically visible and now the the text should be contained into a view and we'll position this absolute as well we'll go bottom let's say 20 and left 20. great and now you see we since this is everything inside the flat list we we can't actually move to another item to do that we will use the flink gesture handler and also create the stack effect so the whole safe area view here should be wrapped into two different fling gesture handlers one is going to be for direction up and one for direction down and inside it we will uh save everything right and now now we also would like to disable the scroll for the flat list because we don't care about it right and for the fling gesture handler we have a key of up we'll have a direction of directions up and we'll have on handler state event change we'll get the event we will do if event native event state it's equal to states and would like to um so if you move upwards we would like to increment the index right so increment index and we'll apply the same for the down but now let's let's create the animations and also the state so we will keep track of what's actually happening right and for the state we'll use the active index and set active index which is a react use state starting from zero and for the animations we will use the reactive type of animation so we will need two different animations so let's create them so set active animated animated index it's equal to a react use ref and the new animated value starting from zero and get the current and we'll say reactive animated is the same thing so basically we will modify the animated index based on the reactive animated so we'll say here in when component is mounted it's mounted and we will like to have no dependencies or run this only once we like to say animated and animated i think it's it should be from uh react native right we'll say animated timing we would like to change the animated index and go to value whatever value is the reactive animated with a duration of let's say 300 and we'll use the native driver for this example and we'll start the animation that's it so now when we set the value for the reactive animated animated index is going to change and actually we can do animated value without any complications and now here inside we also want to increase the index from the state and also set the value for the animated and to do that we can use the use callback hook from react so set active slide it's equal to a react use callback we'll get the new index and we will do set active index with the new index and we will also like to set the value with a new index right great and now here inside the end method we'll like to call the set active index with the index plus one so basically moving up we'll increment it but first we would like to check if the index is equal to travel up length minus one so basically we are at the end of the list we don't want to do anything just just return right otherwise increase the index and now we have everything and we can apply the same thing for the down this time so down and instead of checking if the index is equal to the length minus one we check if the if it's the first one and if it's the first one we return otherwise we decrement it so if i hit save now and with this uh with this set active index it's set active slide sorry for that uh with this uh animated value being changed whenever we if they're fling up or down we can animate the slides so let's uh go here inside the render item also get the index and here you create the translate y and also the input range so the input range in our case is going to be index minus one index and index plus one and for the output range like the translate is going to be the animated value we will interpolate it past the input range and for the output range is going to be -30 0 and 30. so if we can convert this view into an animated view and apply the transform so transform translate y and hit save now we have a typo here now you see the items are moved up so if i swipe to the swipe to the top index is not defined and that's because it's index actually and set index actually it's what i did it's here i need to check for the active index instead so active plus one and the same here so now if i i hit refresh if i move my finger up and down you'll see the list will move as well and now we we also need to cap the visible items so let's let's create here we have created here a visible item so this is the number of items that we would like to show so with this number in mind we can apply a different opacity for each item based on the active index so to create this if we go here where we define the translate y and apply an opacity it's going to be animated value we'll interpolate it as the same input range and for the output range we will have calculate the number of like the opacity so one will start from one but we will decrease it by one divided by visible items then going to be one and zero so basically what this is saying is uh decrease the opacity if you're going further away from the active index so we can apply this opacity as well to the main container and in this way we create this beautiful effect right and now if i move up the next item will will be here zero opacity and so on so we move this really really really nice and we also need to scale the cards so scale scale is going to be let's say 0.92 1 and 1.2 so we can apply again the scale to the transform so now the active will have a scale 1 and the rest further away will have a smaller size and because we didn't clamp the interpolation they will continue to scale so now they they will also scale okay so the next thing is to actually now that we have the car cell let's apply the shared element transition and we would like to transition the image and the text right so the only thing that is left is to wrap this into a shared element transition so shared element pass and unique id so id is going to be item item key and then image and apply the same styles so styles.image and also import the shared element transition and copy this and wrap the text as well right into a shared element transition and this time the id is going to be name and also remove this so now we have both text and image are shared element transitions and we need to inform the details screen hey those are the ids that you need to transition so if we go to the travel lab details and scroll down before exporting this if i go to detail let's go to the list and copy those properties here and go here and do travel travel up details and apply the shared elements we'll get from the route params the item that will pass while pressing on the button and based on it will transition the image it was yeah it was image right and name and now the missing part is to actually send the yeah it happens now the missing now the missing part is to actually send uh what is the actual active slide right and the problem now which you'll see in a minute is that because all the items are positioned absolute and they are not removed from the view you'll play press on the same item no matter what but let's let's stick with it for now and you'll see in a minute what i'm talking about so we'll get navigation and we'll navigate to travel up details and pass the item right and now if i if i go to the to the item like going up item right this is working seamlessly but now if i go to the to the travel of details we need to also render the item and the name so from the route here we'll get the item from route params and we can display here the shared element so shared element is this imported yes and an image so the source of the image is going to be actually let me copy this uh exact thing so we have the uh the image right it's going to have a width a height and a resize mode of cover so we have this shared element here so if i hit save the image will fit or stretch the entire screen and now if i go back hit refresh if i move if i move to the detail screen we will transition the image right so we have this this pretty nice effect but you see it's even though i'm on fuji if i press on it it's going to be the first image and in order to fix that instead of passing the item we need to get the item instead of sending the item pass the travel up by the selected index so active index now if i hit save if i go to the the second one it should transition the second one and so on so we know which one is active even though all the items are visible right now let's also transition the text so if i go here copy this text and put it here inside so we'll have this fuji and i think that i can also create here a style of padding horizontal of 20. so we'll get this nice effect all right and now if i hit refresh you see that the text is like really stretching and the reason for that is because this view from the detail screen doesn't have the same styles and the position of the text it's kind of centered right so we need to align the items to the flex start and now if i hit save now this is going on the same direction and another trick here is for the text to be scalable so if this let me go to a bigger mountain so kilimanjaro for example you see it doesn't fit and in order to fit it into a single line on the text here you can assign a number of lines one and adjusts font size to fit and now if i hit save this will fit into one line no matter what so it's going to shrink down the size and we created this beautiful effect and of course we can create we can apply the same style to the to the to the slide itself so this is also scaled uh we can also increase the size of this uh but the the remain part is to actually animate because you see now it's like a glitchy effect so we would like to animate everything uh like from the team distance and height and arrow after the transition has finished and we will use the animatable for that so if we go here and import animatable from react native animatable we would like to animate everything from inside this like this view which contains the the icon and also the linear gradient i would like to animate it so we'll have an animatable view and again an animatable view here and the list which contains your team distance and height should also be animatable so this one is the view right and for the bottom we can create an animation of fading with a duration of 800 and the delay of 700 and also pass the ref here you'll see in a minute y so bottom ref and apply the same for the top view basically right the its top ref the animation is going to be fading with a duration of 800 but the delay it's going to be like 600 let's say right and top ref and bottom ref are not created so top ref oops so top ref is going to be a react user f and the same for bottom ref so bottom ref right now we have those elements and they will uh be displayed and this this initial animation is going to work out of the box no matter what the thing here is that i would like to um fade out and then move back if you press on this button i like to fade everything and then go back and in order to do that we needed those uh those references and what's nice about this so navigation go back when we go back we can take the top ref and current and fade out and here this is an animatable method right and we can pass let's say one second and this is a promise and we will also like to animate the we would also like to fade out the bottom one so again one thousand and those two are promises so we need to wait for all right both bottom and top right and then we can navigate back so watch out what this is going to happen so it's going to fade out both top and bottom and then it's going to transition to the to the previous scene you see but because this is like really a fade out animation we can move it faster so this will create this uh this effect right and i think that we can move it even uh faster or you can avoid waiting for the animation and just directly do navigation go but there are ways to wait for all the animations now this is async so it doesn't matter uh is not going to wait for anything but it's it's just creating this beautiful effect so if i revert everything i can do here 300 and then go back right so wait 300 fade out 300 and then go back so that was it guys it was again a long tutorial i hope that you've learned something new and you can apply it in your existing projects also don't forget to check the link to the patreon page in the description if you'd like to become a patreon it's going to also help me out a lot if you have any issues don't forget or don't hesitate to leave a comment here in the comment section i'll do my best to answer all of them and help you out as much as i can don't forget to subscribe smash the like button and without further ado see you in the next video enjoy it bye

Channel: Catalin Miron

Views: 18,910

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

Id: xVBTiR8gLJE

Length: 32min 22sec (1942 seconds)

Published: Wed Sep 23 2020