React Native Shared Element Transitions with Reanimated 3

hey everyone what's up this is Simon from galaxies.dev and in today's video you will learn how to make your react native applications at least a hundred times more Epic we're gonna add reanimated three and we're gonna learn how to animate the appearance of different elements like a text or a view in our application and we will also use the reanimated three new feature of shared element transitions so we will be able to transition from one screen to the next screen in a fading model which comes from the Expo router and then also animate between elements on different screens it's gonna be epic and you definitely want to add this to your own applications alright so let's get started with our app I already created the new project using Create Expo app and we're using the Expo router with file based routing then I installed the latest version of react native reanimated which gives us a version 3 so if you're using npx Expo install it won't give you version 3 right now make sure you install really the latest version and then I also added the Expo blur package which will help us to make a nice little bird background additionally we will later have to talk about pre-build or in a second because right now with the Expo what are we using 48 right and react native reanimated three it won't work with the Expo go client so hopefully this will work in the future uh for now we have to use a pre-built also we need to make sure that the Babel config is updated correctly but usually it should already look like this so react native reanimated plugin is included Now to create our pre-built we can simply run npx Expo pre-build and this will create our own Dev client that we can then use so what would you like to use yes I'm going to use this as the bundle name I don't really care about it updated metro config updated whatever and I think this should hopefully work so we can already let this run in the background um maybe maybe we can already try the first part actually without using our custom client but I want to just let this run uh so yeah here we go here's the iOS project the Android project there might be a problem with reanimated 3 on Android devices I haven't tested this extensively but here we go let's try and open this Jim wasn't there like an option to open this directly in in visual in in xcode huh that's crazy um anyway uh we can also just when I go to the Expo No it should work automatically uh well reveal in finder and open the workspace should do exactly the same for us so here we go I'm going to run this on my simulator and once I'm running this it should also automatically open a new terminal which is then serving our application so I'm going to put this to the side and we can continue with the actual application now as we're using filebase routing let's create a new folder called app in which we're going to put all of our routes thanks again Visual Studio code for not being very supportive today so a new file index.tsx and we can already create the other files that we need as well so we're going to have a modal let's call this modal.tsx and we will also need a layout to define the different routes of our application now in the index what we're going to do is we're going to first of all create react native functional export index and this one will be a very simple view um you cannot be used as a jsx component yeah this is a problem by lightly head um so really not looking uh forward to that problem usually it meant I usually it meant we had some typescript issues uh I think this should be fixed if I just run npx Expo the first time uh yes yes I want to install typescript please do so yes nice uh ooh what was that something dependency comparable Ink Spot Expo was near react native rearmation your project may not work correctly so uh yes in that case I do have to do it differently thanks for the information but now the error is gone and also xcode opened my terminal running Metro and also my simulator and we already I think we can see there is an index up there I think we can already see our app that's good so we're ready to build out that app uh let me quickly bring in a few Styles those are just gonna be basic styles for that view they're not really related to reanimated I just want to make sure that we got everything in place here so let's set this to Styles dot container and then we should already see yeah there's the index coming up a bit small but at least we see it and now we're gonna add a few things to our app so let's start by adding a link and with that link uh by the way link should come from Expo router um do you understand that uh the link should actually open our modal page by the way we haven't defined anything inside here so let's quickly add modal in here uh there we go and then we're gonna add a pressable inside of the link so if you want to have something with the Expo router like a button a pressable or text in here you have to add as child here and now just wraps that component in that link so I'm going to use a pressable um I don't know we're gonna make an image in here so let's add an image the source for my image will be oh that looks oh no I don't want to use it like that so let's resolve the image in a kind of different way um I do have an image in my assets folder here so I just uploaded this you can use whatever you want and I'm gonna add the following so loading my image from acids image and then getting the image using resolve asset Source this also requires us to add image from react native and usually typescript will complain about this so in order to fix that what you can do is simply add a new file and call it something like declaration dot t s and then declare module and then whatever your images I think mine is a PNG or is it a PNG yeah it's a PNG so declare module star PNG close this and then your page is going to be happy about this so I can now set my source to Yuri the actual image and then we see yes the image is coming up nice uh only thing is that um oh what was that oh yeah I clicked on it and it opened the model that was actually pretty good that was actually pretty good nice uh so can we go back yes there we go so let's focus on the layout quickly right now interface I'm going to call this a stack layout so I just want to have the default stack layout here for the app so I'm adding the stack from the Expo router um closing it and then we can Define the different screens for our app so stack screen name index is the first one we usually don't really have to Define that one but for the index page for the index page right there we go I wanted to set the header so I can say something like options header title header title home instead of index so that looks better um additionally we want to have our model displayed as a modal so in order to do that so right now it will just push that page of course uh we're gonna set the options here to presentation and then we're going to use uh we can use card contain form sheet full screen model modal or transparent modal and that's what we're going to use actually let's try with modal first so that will give us this effect uh quite nice this is by the way not really related to reanimated this is just the Expo router so transparent model and the transparent model will look like this so of course it is horrible now uh but we're gonna fix that it is saying uh additionally I want to add the animation fade so if I do Fade um it would just fade in the model of course how can I try this now there we go it just fades in and also I don't want to have a header so I'm going to say header shown faults so that's the first step now we've configured our model and on my model page I'm gonna wrap everything inside the blur view that we installed initially so I'm going to use the blur view from Expo blur and I'm going to set the intensity to 40 feel free to play around with that and we also need some some styles again so let me already add those Styles we're going to talk about them in a second uh and of course you can find all of the code on galaxies.dev if you want to check it out so let's finish the blur View and let's see uh okay we got this one up here there's not really any content that we already also not using this style yet so let's use Styles dot container and there we go first part now as we can see the model fades in and uses this blur background that's already cool in its help so the the share any the share transition we're going to add from reanimate is actually just an additional cool thing to make this even more awesome this is already a pretty nice start now I'm gonna wrap everything in here in a pressable and on press what I'm going to do is I wanna not use window history back but I want to use the router uh so therefore I'm gonna get the router use router from Expo router and then simply say hey router dot back exactly and I'm gonna close the pressable and I'm gonna add my text in here again so if I now press somewhere it should close the model so we have already achieved the first part uh fade in modal which is pretty cool by the way I should have made this just a tutorial it would have been enough for one day wouldn't it uh anyway let's go back and um do actually some some animations well the reanimated so we can do a bunch of different things we can do the share element transition but maybe let's try uh something easy first and that is I want to animate the text so let's say I have some text react native shared transition let's call this shared element transition and to make this animated we can say animated dot text and we can import this from react native reanimated and we can now Define different things on this element so react native reanimated there are a few um elements that we can use can I bring this quickly up no of course I can't find this anywhere so like text view scroll view button those can be animated or otherwise you can use with reanimated uh create component and then animate any styles of any other react native component okay entering animation uh we can use something like fade in left right you can choose whatever you want I'm going to also add a duration of 400 okay so let's see and this fades in nicely from the left hand side um also do we need some styling yeah let's give that text a bit bigger font size so let's add style styles dot text okay nice that looks good so this fades in from the side we can also give this a little delay if we wanted to so that's way you can build up your whole UI with different things so if I wanted to do this I could now also add another one using fade in down for example and a bit bigger delay and as a result this now comes in like this so this comes in from the side and a tiny bit later we get this card at the bottom coming in am I creating this we already can make that we pretty epic like we have this blur View and stuff coming in I think this is this is already pretty awesome but we want to take this of course a step further and now talk about shared element Transitions and you're gonna be surprised how easy that part actually is so let's add the same image we had in the index page to our model I'm gonna add this here in the pressable that also means I need the image stuff from our index page and I need to have the image from react native there we go so okay of course this model looks kind of horrible like it bumps uh the rest look pretty cool but that part is really like not really good at all so how can we fix this it is unbelievable easy we just have to use the shared element transition tag so let's scroll into this a bit uh this is actually the old documentation they have a new documentation so just add the share transition tag to the different elements and they're gonna be animate it's a react native reanimate it finds those different elements and creates the transition between them you can of course also create your own custom animation which you could Supply with a shared transition style but let's just do it for this simple example let's go to the index page on that index page to my image I'm gonna add um first of all also making this an animated image so once again adding this from oh not react native brick native reanimated police there we go then using the shared transition Tech I'm going to set this to Shared tag doesn't really matter and I'm just copying this over actually I could just copy the whole element to my model to the image here set this to the same thing and let's try and oh I just crashed my application how did I do that oh I assume I just made it some kind of transition and during the transition I reloaded the app or something anyway let's try again oh so smooth have you seen this oh and it even works backwards like it's going from the blur back to being normal this is so nice and we could do this with basically everything we could have like a header or something it's just crazy let's see I'm gonna give my image resend mode contain Flex one how do we actually get some how do we get like the margin in here who added margin to this uh it wasn't me well it's also not really a lot better also I just once again crashed my application that's interesting I've been able to crash my application with this anyway um we can also make by the way the background dark if you want to so we can use something like tint and then call it dark so then it looks even more epic uh it looks like it's just crashing all the time when I press the background um runtime reanimated is my runtime actually still working I feel like I messed up something because previously this definitely used to work so here's my Metro if I click this it opens if I click this it closes maybe it was just too fast with some stuff because it seems to work reliable good and this is exactly what we wanted to achieve so now we have a shared element transition of our image using the Expo file based routing so it doesn't really matter what kind of routing we're using it works with a new Expo router as well as we can see here with the modal effect we do get that model effect basically because our model has the presentation transparent model and the animation fade so of course we could now play around with this and I don't know fade from bottom I actually don't know how that will look oh no actually I think our fade was already pretty dope so go ahead play around with this and hopefully you're gonna have some epic share transition between the different screens in your react native app all right so that's it for today's tutorial I hope you enjoyed this quick introduction to Shell element transitions with react native and reanimated 3. if you want to see more about this leave a comment and let me know what you would like to see because there's a whole lot more to discover with the reanimated package and I'll love to create more tutorials because this stuff is just epic so hope you enjoyed this and of course until next time happy coding Simon

Channel: Simon Grimm

Views: 15,808

Keywords: react native, reactjs, reanimated 3, reanimated, animations, react native tutorial, react native for beginners, react native ui design, react tutorial, javascript, react native animations, shared element transition, ui design, react native ui, react native live coding, react native tutorial for beginners, react native app, react native app tutorial, react native project, react native expo, react native course, reanimated 3.0, galaxies.dev, ionic academy

Id: tsleLxbvxe0

Length: 18min 10sec (1090 seconds)

Published: Tue Jun 06 2023