I want to show you how to do consistent screen animations with a new package called React Native Screen Transitions. React Native defaults to each platform specific screen animation. And let me show you an example of what I mean by that. Here on iOS, the push, you are probably familiar with this. If you have like Apple Notes, you get this same animation here. On Android, you can do the same push, but it looks very different. In terms of modal, you get this animation where it comes up from the bottom, but Android does not have that. iOS, we have full screen modal, which comes up from the bottom. On Android, I actually had to give it a custom property animation called slide in from the bottom, and it still doesn't look the same. Then we have form sheet, which is the fan favorite on iOS, where you get these detents here. You can kind of pull up, pull back down. At the bottom it is liquid glass. When you press on this you kind of get a faster animation. But the thing is that they are not consistent. And this is where React Native screen transitions comes into play. So I have this example up showing these new screen transitions with this package. And I actually have a few that I made. And this one is called Flow. here in Flow, you can kind of see how each one's going to look the same on each platform and they're consistent. So, if I drag down, you can kind of see it scale back up. And on Android, it actually does the same exact thing. And that's so cool. So, let me actually continue. If I press on next, inside this stack, we're actually translating X a new screen on top. So, we have screen two, screen three, screen four, and we're back to the root. And the same thing for Android, which I've always had issues with is just making sure each screen is the same. And back to the root. Another animation that actually recently came out was the sheet. So, sheets, this is not using Warhol or any other package. This is using screen transitions. So here I can snap to zero, snap to one, snap to two. Then you can customize this screen exactly how you want it. So this is actually an entire screen. So when you're calling form sheet on expo router, this is the exact same thing. Animations also don't have to be that complex. So, I made a simple iOS slide and this looks like the native animation, but you also get it on Android where you get to slide it back and you get the same animation. When it comes to consistency, I think React Native Screen Transitions does really well at making your apps look the same in terms of branding, in terms of just making the animations look the exact same per platform. So, let me show you how to get started. This package actually behaves just like expo router. And if you see the file we're in, we're inside underscore layout. And here inside this stack, we see stack and stack.creen. So we can actually go to the definition here of stack. And you get this file here where you get create blank stack navigator and you also get react native screen transitions/blank stack. So you can actually copy paste this from the documentation. And this gives you the options available to make custom animations. So looking at the documentation, the documentation actually has a few presets available and you just have to call it in with transition then transition.presets slide from the bottom. But in this case, I'm going to show you how to make custom animations because you get a lot more control on what you do with these screens. And honestly, it's a lot easier than you might think. I'm gonna go to the definition of the sheet scale and this would be this screen here. So you can kind of see how we scale it down and then this this screen goes on top. Inside this function you actually get to use these functions automatically. So here we have gesture enabled and actually let me bring this sheet up here inside flow. I can actually use the gestures here. I can turn it off and put false. Save here. If I try to drag now I I can't. Another one is gesture direction. This is turning on gesture enabled. And actually I can do horizontal. And if I do this, I can actually dismiss going horizontally, which I don't know why you would want to do this, but I mean it's possible. Like you get full control over these animations. We have the two most important properties to reacting to screen transitions, which is transition spec and screen style interoperator. Going into transition spec, you actually get to define the actual animations. So this is if you want it to be bouncy or if you want it to be fast. So in this case, the flow, it's a little bit fast. So you can kind of see how fast it kind of goes up. And it's not bouncy. I really don't like bouncy on applications, but if you want to do that, you definitely could. So let me show you snappy spring. It has a few properties inside of it. So, it has stiffness, damping, mass, and overshoot clamping. So, let me show you my current config. And honestly, play with this. Uh, I think you can make any animation you really want with this. Now, we're left with the most important property in React Native Screen transitions, which is screen style and if I bring this down, it might seem a little complex to start with, but uh let's get through this. So we start off with the actual properties. Uh in the properties we get the actual insets. So you can actually use the top, bottom, left and right. So this is the save area instance that you have available. Then you get the layouts which is the screen layout. You get the height and width property that you can use within your function. And finally you have the progress property. Progress is how you define all these screen animations. So it goes from 0 to two and zero is when the screen is entering, one is when the screen is visible and two is when the screen is exiting. And actually I can actually show you how it works with the actual simulator running to show you how this progress property works. You actually bring it into entropulate or whatever function you want to define. And in this case we have scale. So we have this animation here called flow. And when I press on flow, we have the zero which is entering which is one. We have one which is when the screen is there which is also one. And then we have 0.5 for when the screen is exiting. So you're going to see this animation now. And you can actually see how we scale that down all the way to 0.5. So I actually had before this 96. Now that I put 0.96 in the exit animation, you can actually see that it's not as defined as before with the scale and it's a lot cleaner. So the last animation we have is translate Y. Translate Y has the progress just like we have with the scale and we define zero for entering, one for when the screen is there and two for when the screen is exiting. So of course zero is height and what does that mean? So if I press on flow zero starts off down here. It's actually full height and we're passing in the height prop that we get from screen style inp like I said starts all the way down here at the very bottom and then it goes to one. So when we start off the animation it goes from here it goes all the way back up and it goes to zero. So this is when the screen is there. It's actually one and then the exiting actually pass in top minus 14 because the bottom screen also translates y. So let me put zero here so you can see what I mean with the zero. Now at the exit animation now when I drag down for the exit you can kind of see that it doesn't go underneath the notch like we had it before. So that's why I put top minus 14. And I use 14 just as like a number. Uh it kind of just fit perfectly. And now when I try it again and I try to drag down, you kind of see it's underneath the notch. Here's the last part. We're actually returning the functions. And here we have content style and backdrop style. And I'll show you what they actually do. So here in content style, we have transform with scale and we have translate Y. So to show you what it looks like, I can actually put in a background color to red. And you can actually see what it does here. So if I reload, when I press on flow, you can kind of see that each screen has a background color of red. And the same thing for backdrop style. If I put in background color to red, you can see that the background is entirely red. And I let go and it's back to nothing. With this backdrop style, you can actually set any animation you want. You can actually maybe do transparent white where it's like almost white and you can animate it for when the screen is entirely there and do the same progress property that we're doing there. So, you can honestly do any animation to any of these screens and AI is actually very good at making these types of animations. So, let me show you a few more. So actually going into the actual flow stack and here inside this flow stack screen you can actually see this directory we have parenthesis flow and we have screen one screen two screen three screen four and we have the actual animation called get flow options and I'll explain what flow meta does here in a second but if I go inside the animation we can actually see it does the same thing with the progress prop that we were doing before and we use the width property as well inside the layout and all we do is translate X with the content style. So here it goes to zero and then it goes to two which is minus full width. So we just have this simple next screen where it just is translating X and it's super simple. It's just translate X and that's all we're returning and we're reusing that transition spec that we were talking about earlier. I just simplified the stack a little bit just so it's easier to kind of visualize what is going on. And here we have the meta property. Inside meta, you can actually define what a function does. So here I have different on presses and what happens at each screen. So here on screen one, I want to navigate to screen two. On screen two, I want to navigate to screen three. And on screen four, I want to navigate to screen I want to go back to tabs once I'm done. And you can see this meta property, we can actually use it inside our floating overlay. So if I go into the actual overlay. Okay. So now we're on the actual overlay. So to show you that this is actually on the entire screen, I guess I can kind of do BG black. So you can see this is the overlay. And let me delete this. So this flow overlay has progress and this is not the same progress as what we had on the actual screen navigation. This is stack progress. So this is um the actual number of stacks that you have on a screen. And then we have the meta. The meta is what we were talking about before where on each screen you can define what a function does or you can maybe like do like a label and you can name it like red two and then you can have a text string that changes every time that a screen comes in the text changes. So because this is overlaid now we have this on press inside the button. So let me go to the on press. So the onress we're using meta onpress. So on every screen, so on screen one, when I press on this, let me scroll back up. It does on press navigate to screen two. So then on screen two, you actually get navigate to screen three and then screen three, navigate to screen four. Then screen four, navigate to I guess dismiss to tabs. So the meta property actually allows you to have that button overlaid. So here in this example, we actually use a lot of the meta property. And you can see how the keyboard stays up, then it continues and it stays at the very bottom. It's overlaid over the the entire screen, but the screen is still available to be pressed. And with this, you can actually do a lot more. You can do loading states or like if you have to call the API and you can also do like loading somewhere maybe in the root or you can have like a context provider wrap the whole thing and do some loading states and use the context inside here and do a bunch of complex stack navigation animations. So with this you get a lot more control over what's happening screen to screen. So quickly we're going to go over the actual sheet property. And I'm not going to spend a lot of time on this because the actual docs does go into detail on how to use the sheet. Just to quickly go over here, when I press on sheet, we get a bunch of options like snap to 0 1 2 and close. So let me go inside here. And it is the exact same as the other screen options like we had with the scale here we were talking about earlier but we get a few more options like snap point. It works just like expo router. So let me go to the definition here. We get sheet snap point and it goes from 0 to one. And in this case it just the same exact behavior. Then we actually can define the initial snap index. So when we first snap it goes to two. So it goes 0 1 2. So this is two. And you get a bunch of more options that you can actually use. We also use screen style and we're actually defining the translate Y and doing a bunch of the actual border radius. So you can kind of see the border radius kind of animate a little bit as we go down and up. And we get two more options for transition spec and that is expand and collapse and that's mainly for the sheet. So here are the docs and you can actually see what options we have available. And here it looks like he already has the presets for slide from bottom. So I didn't even have to make my own animation with screen style and you could have just used transition presets slide from bottom. And like I said, there's a bunch of just presets that you can use for screen animations. And I'm pretty sure he's adding more. He's a good friend of mine. So now for shared element transitions, just to kind of go over really quickly on how this works. So I press on this and it scales up and down here inside the discover page. This is the discover page. I have a flat list and I'm using transition.pressible. This is from React Native Screen transitions. And mainly we are passing the shared bound tag and we have the shared bound tag set inside the pressible. And when I go to the box screen, so when I press on it, this is the box screen. I have transition.view also from react native screen transitions. And you pass in that same ID. And we're actually doing that with the params. They kind of go together. So I kind of just define what the height is here. and they try to match each other to what each screen is doing. So, one kind of goes bigger and then it kind of like animates to the second screen. And I don't know how he does it. To me, this is really cool. Inside the docs, it's actually really simple on how to get started. Here we have the shared bound tag, which we were talking about before. And here you can, it doesn't have to be an ID. You can do avatar. And then you can navigate to the destination with also avatar. And it should just animate into that with the actual screen style interpolator. I honestly need to spend a lot more time using this because I know you can actually have it do gestures. So like if you with your finger kind of drag out and back, it kind of like snaps into place which I haven't been able to do yet. We lastly left off with the very simple iOS slide animation. And with this iOS slide, it is just doing translate X just a tad. And you can see we're not doing an entire translate X because the bottom screen is also navigating. So let me show you what we're doing here. Here just like we had before with screen style and we have the props. So splitting it up into parts. We have the worklet and then we have the content style. So uh you can see we also have border radius here if we're kind of breaking this into pieces. But the transform for translate X we're interropolating. So remember zero is entering. So we're doing width. So this starts out all the way at full width and we're grabbing that from the props. Then we have zero goes all the way to zero. But then also for exiting we're doing minus width * 30.3 which is 30%. So you can kind of see we're only going over 30% of the entire width. And that's kind of how iOS does it. And you can kind of just test just to see how this works. So here I can actually maybe just do maybe I'll do minus width and then we can try again. And you can see we're just doing a a basic slide here like we were doing before. So you can honestly just experiment experiment with these. So here, let me try it again. And you can kind of see we have the iOS slide. And then lastly, I actually just had AI build me just a basic stack. So, if I go back with the stack test, you can kind of see what I was doing here with the stack test. I was um making this bottom one kind of scale down and up and then just spamming it. Just trying to see what it would look like to have a bunch of cards. And like I said, you can have AI do a lot of this. Just do a bunch of testing because um I don't think a lot of people are actually experimenting with this package. Honestly, I have a bunch of ideas that I can use with this package that I just have to spend some time testing. So, I encourage you to download this package and just to try it and make sure to give it a star on GitHub. Showing you this package, React Native Screen Transitions by Ed. He is actually a good friend of mine. And I'm sorry, Ed, I haven't started. I'm going to start it now. If you have any money to give this dude, he has spent so much time actually working on this package. uh he always talks about it and he's always spending time just trying to make it better. So if you care about open source and care about this work on making cross-platform development with screen transitions and just crossplatform animations, I do suggest downloading this package and starting it. So I really don't have anything left. I wish you guys the best and I hope you make something with React Native screen transitions. All right, take care.