Shared Element Transitions with React Navigation

what's up folks Spencer here with another lesson of react native school in today's lesson I want to talk to you about shared element transitions what that means is basically taking one element say in this example the image here and taking that from one screen and using that same element on the next screen or making it appear as such to do this we're actually going to be using react navigation which is my navigation library of choice and before I actually dive into it let's do a quick rundown of what we're starting with you can see here I've just got a list of little cards and it's all all the same data but when we click on it it's going to go to another screen very similar information we've got this same image we've got the same San Francisco Airport International Airport 40 miles away and then we've got some lorem ipsum down here and when we click on that text and I'll actually bring us back so what we want to be doing here is using shared element transitions to use the image and then this information about the airport and basically instead of this transition where we see both of the pieces of information on each screen we're going to go ahead and basically carry that from this list screen to our detail screen to actually accomplish this we're going to like I said use react navigation and we're going to be using a another navigator on top of react native react navigation called fluid transitions and basically it's a navigator that you're going to use just like a stack navigator it's built on top of the stack navigator and it's going to allow us to use that shared element transitions really easily so in this project you're obviously going to need to have react navigation installed to go through that process and then to actually install fluid transitions just need to say yarn add or NPM install react navigation fluid transitions and then let's go ahead and actually start implementing this so what we've got here we've got our index screen we're set up our navigator we've got our lift screen which just is our cards we render each one of those out it does have an index I'll note why that's important in a little bit but you can see here just all of our static information it's all just hard-coded in there and then we've also got a detail screen again very simple just rendering an image rendering some text so let's get to the actual fluid transition so what I'm going to do is import create fluid navigator from react navigation fluid transitions basically all we need to do is take this create fluid navigator and replace create stack navigator with it I'm also going to delete these options because it doesn't matter here a fluid navigator doesn't have a header by default that's something you'll need to add so now when we click through it's bringing us over obviously the transitions not there but you can see all of our navigation logic is working the same we're still using navigation navigate and navigation navigation dot pop so you can see API is going to be exactly the same now to actually get things to transition the way we want it to we're going to need to go into the screens and basically what we need to do is tell fluid navigator which elements we want to transition so what we'll do you can see I've got it here already is import transition from react navigation fluid transitions just like how are importing create fluid navigator from react navigation we need to import this transition component to use this what we want to do is wrap the elements that we want to be shared in this component so let's just do the image first so we'll wrap it with transition wrap all the items we want to pass and then we need to pass the shared prop and give it a name we'll just say this is the image okay and then we need to go to the detail screen and do the exact same thing we're going to import transition from react navigation fluid transitions we'll go down to our details we see we've got the image here we're going to go ahead and wrap that in our transition component and just like before we need to give it a name we're gonna give it the name of shared equals image these names matter that's telling us which property is going to be transitioned over so with doing that now when I press this you can see the item just kind of carries over from one screen to the other and it works going backwards as well now it is important to note how this is working a little bit and obviously the documentation is going to go into this with more detail but basically you're limited on the properties you can change so you can see here I'm changing the width height and the border radius basically the image size is 50% of the screen on the details screen and then it's 25% on the list screen so you want to make sure basically usually you can only scale images or transition them so basically things you would be doing in the translate property in your styles now this may not be working the way I would want it to and using native animations in the animated library which fluid navigators actually using to implement this because I'm actually changing the image size so that's something you might want to note is basically things that happen in the translate property so something like a scale I'd say translate alright sorry I'm saying trance translate I meant to say transform in which you can do different translation things so for example you could say scale it by 1.2 or 12 point 3 and you can see here it's going to be this huge image and when you use properties in transform you can actually use the native driver for those animations which is something you'll want to note especially if there's a lot going on on-screen but anyways let's take another look at this detail screen let's go ahead and do the same thing for the this actual info block we're sharing the same Styles because you're doing a transition from one element to another on two different screens they should look the same obviously and if they don't look the same then that transitions gonna kind of glitch out for you but since it's a shared element transition it should look the same between those two screens so it kind of it works out that way so let's do the text again we'll wrap our little view down here in a transition I'll put a shared element on here called info we're going to go down to the bottom of this view and then when we click it well obviously it's not going to work because we haven't added this shared info to the details screen so if I go over there wrap my info container I apologize for the crazy indentations here but if I put transition down there success okay now if I go and click over you can see the text is kind of working and transitioning over as well you can see the text is going down the image is going up it's transitioning over but there is a bit of a glitch like I was talking about before because I think my font sizes are actually different here so to fix this little glitch we'll go to the panel title here and the panel subtitle here and if we look at what we initially have you can see we've got different font sizes in some different styling obviously if you're using the same components this makes it much easier I'm not here just cuz it's a little example but if I go and copy those styles over and now we do it you can see we don't have that glitch so these styles are really really important to make sure you are using the same ones I'd even like works here where the text is wrapping on two lines you can see I'll go ahead and transition that perfectly for us now we do have one issue if I choose something other than the first one we're using the elements from the first thing still to do with that transition so that's where this index is coming into play basically each one of these where we set the shared property on a component it needs to be unique to make it to work so what I'm going to do is actually change this where it's going to be straight interpolation in which we can then go ahead and make it unique by passing an index and down here you can see each one has a unique index we're then going ahead and actually passing that with our navigation parameters into the detail screen so that we can actually access them over here and again we want to do the same thing we're going to go ahead use string interpolation to make each one of these shared keys unique and matching the previous screen so now when I choose the first one works just like it has been if I choose a third one you can see the images coming all the way up from the bottom fourth one a same deal because each one of these keys is now unique now in transition you can actually do more stuff with it say all of our text here we want to animate how obviously the image and the header tag start coming in from the previous screen if we want to animate in this lorem ipsum text but it doesn't have a previous element we can say how we want it to come in so again I'll wrap the element with a transition component gotta go all the way to the bottom this time instead of saying a transition of shared equals something we can say a appear property okay and then there's a handful of different properties that this library actually supports which is outlined it outlined in the documentation and you could say we can we want it to scale in and now when we go here it kind of scales in there's also a flip for example you can specify how it comes in all kinds of different things so for this one let's say we want it to come from the right okay so it comes in from the right you can also do the same for disappear if you want it to do something different we can say it should disappear to the left so now when we go here it's gonna go and the text will come in from the right and I'll go out to the right as well with these different properties so this is a really really cool library if a shared element transition makes sense for whatever you're building if you're using react navigation you kind of get this for free it it works it just built is built right in you just swap out your stack navigator with a fluid navigator and you're good to go so I hope you found this valuable maybe you'll try it in one of your projects and I'll see you in the next lesson of react native school

Channel: React Native School

Views: 10,712

Keywords:

Id: AfHnvGb_fw0

Length: 11min 27sec (687 seconds)

Published: Tue Jul 28 2020