You know those moments when you're building a React Native app and suddenly explorer feels like magical, but at the same time, maybe there's also a whole lot more magic that you're not using yet. So, in today's video, we're diving into 10 Expo Router facts that will level up your app, whether you've never used Expo Router or you've already built an application with a bunch of screens. And these aren't just random did you know things. These are practical tips that will help you to build APIs in your expo project or protect pages without writing spaghetti code. We're also talking about SSD and RSC and even touch a topic related to deep links. Some of these are kind of brand new, some are like hidden gems and some will make you think expo router can do that. So stick around until the end because I think the later points are the most fun and they might just change how you build your React Native application. Let's dive into it. Tip number one, use API routes. If you haven't used this before, then I don't know why because since this feature came out, I've pretty much used it in every expo project that I generated. Essentially, you can create API routes like cloud server functions inside of your Expo application. I usually recommend to put this into an API folder and you have a little like plus API in the name of your file and then you can do everything you want in there. Get post patch update and this code runs on the server. This is not running in your application. So you can use something like EAS hosting in the end for your API routes which is absolutely easy to deploy from your expo project. Now if you don't know for what you could use API routes, let me give you some examples. This is of course a very simple example. You can just reach these endpoints directly from your running instance and will return the time of your call. But uh the cool thing is also that in your application's code if you want to fetch these it's pretty easy to fetch the API since you have in your API route simply a fetch call that is all you need. You can then later define the origin in your app JSON if you're for example hosting this with EAS hosting and it is just super convenient to use. So examples beyond just getting the time are in one of my tutorials I used a website parser. So in that cloud function I actually parsed a website using a little setup here created by AI of course but that's one of the things you can do but most importantly what I usually do is things with AI asking for completion for anything from those routes because in your API routes you can use server keys in a safe environment in your application. So you can talk to AI from those. You can use the AI versel SDK or in this one I was using instant DB to build an app builder and actually inst uh integrate an SDK with admin tokens and platform tokens because it's safe to do this from an API route. So if you haven't used API routes, do it in your next project. The second tip is about bottom sheets in your application. In the past, I usually used something like Gorhome bottom sheet or other packages and they still have some value. But in my application, in most cases, I currently simply reach for presentation form sheet whenever I need a bottom sheet. With presentation set to form sheet, you get some additional options like the uh detents you can specify. So where the sheet should be stuck, the corner radius, should there be a grabber or something like that. and it just turns into this unbelievable smooth native bottom sheet component. There's nothing else you need to specify. So pushing a page is cool, but the bottom sheet is probably even cooler. In many cases, it works really reliable without any problems. It should at this point work for both iOS and Android. And all you have to set is your presentation to form sheet. While you're at this, if you didn't know about this, check out all the other ways how you can present pages here from the TypeScript interface. Pretty cool to check out, especially transparent modal uh is something I use quite often or the full screen model as well, which is covering your page, but form sheet still relies my favorite way to present cool pages. Groups and reusing files with explorer is a powerful pattern. Let me show you how this looks. So, I've used this in many applications. You can group features with using parenthesis here. And that simply creates a URL pretty much without this. So if I wouldn't use that, this part would still end up in the URL in the routing to that page, which on mobile is probably not a problem. On the web, it might look ugly. But overall, you usually want to group your related files together like this. However, there's one additional thing that's probably something you haven't heard about, and that's array syntax. So you can even have an array syntax in your groups and it is really cool to reuse pages. For example, in this group, there's a file here and that file will be accessible both with a route profile and home. So I can have both of these here in the group name. As a result, if I go into my groups, so there's a tap bar above it. I'm now here on the page ID with the user groups. And let's see if I change this. Here I'm on home. Here I'm on profile. So watch how this segment changes. I'm trying to catch the segments. I'm just logging them out on the page. So it is essentially the same page, but I'm able to reach it from different pages. And you can think about this like a profile page that you reach to access from multiple path in your application. So uh groups and especially arrays for reusing pages is a powerful pattern that most people probably don't know about. Protecting the routes in your Expo application is a key feature of most apps that have any kind of login or even guest user authentication. In the past, usually we use something with a layout file and in that layout file we checked for if the user is signed in and if there's no sign in, we redirect and otherwise we have a slot and that resulted in nested layouts and then you had problems if the top layout wasn't rendering. So there was a lot of confusion around how we use this. Since Expo Router version five, there's actually a way easier uh way to do this. So, what you can do is now to use protected groups in your application. With this, protecting pages becomes incredibly easy. All you need to do is specify a guard for a protected group that evaluates against a certain condition. So if this is my inside area and you could have a group or you could have multiple screens here then I could simply say if the user is not authenticated then this area pretty much doesn't exist for the user. Likewise I can also use the opposite way. So that's something you see down here. Um if we don't have a user or if we do have a user actually I think I don't I messed up my not user and user. I don't know. Um, if we do have a user, I don't want to show my login anymore. So, you can do pretty cool guards with this. And this is all you need. No more checking in the layout files and redirecting and getting into any kind of trouble. This automatically evaluates. So, if your state here changes at any point, this will be re-evaluated and it jumps back to the screen that the user can access. Quick additional tip, you can not only use this for uh user authentication. A great example is also to check if a user has seen your intro already. If the user has not seen an intro, you can just display that screen instead. And when the intro is finished, the other pages of your app would become visible. Since Expo Router version 6, there is something called link preview. And this is especially interesting for iOS developers. So, this is probably not working great on Android. I don't think it's working at all. But on iOS, this enables you to show a preview of your link on sort of like a long press or force touch on an element with the preview of the destination. Let me show you this. Uh we have a details page here. We have an index page and a details page. And if I now long press this link, look what happens. I see this custom preview. It is the native dialogue. And I even have a little context menu with icons down here. I can completely affect how this link preview looks inside my application. So within your explorator link command, you have now a link trigger which is essentially the view we see here. But then you can also define a link menu with buttons or a specific link preview. So this is the place where I could now change any variables and it would turn out into a different preview. Additionally, there's a little uh hook that you can use called is preview. So right now in this preview you can see custom preview content rendered instead of the destination screen. So we see the bottom so it's uh is preview is true. If I would now simply go to that page we see rendered as full screen after navigation which is the text down here which means is preview is false. So with that you have the chance to build truly native functionality in your application and I think this is an incredible feature and it just hints at what the future of expo router will look like. For years I used the default implementation for a tap bar with expo router or react native in general. Only recently I learned that there's actually a native tap bar component that really uses the underlying features of the platform. And now this becomes even more important with iOS 26 and the liquid glass features. Let me show you how you can easily get this. So right now you can get the native tabs from expo router unstable native tabs. That will probably change in the future, but this will give you native tap bar on both iOS and Android. And the native tap bar just looks amazing. You got this glass effect here. And on Android, you also get a better native effect. Screens gently appear and fade in. It is a very gentle thing. you will notice and it is different to how JavaScript tabs work. On top of that, you can just use the SF icons, you can include badges in your application or you can even have uh search implemented. Although I really don't like how search works with iOS 26, but it is possible here. You get this quick search bar and you can even quickly go back to my application. Yeah, I'm not a big fan of the native tab search here, but of the rest of the native tabs, I'm absolutely a big fan. And if you're working on an app, you should include native tabs as soon as possible to use the native platform uh primitives and the underlying features because otherwise very soon your apps will look very off especially on iOS 26. Maybe you've heard about this before, maybe not, but you can use React server components in React Native since Expo SDK 53 uh 52 and later this is possible. It is still in beta version so there might be breaking changes but overall the usage at this point is fairly straightforward and there are a few cool examples out there. So getting started with this is actually pretty easy in your application. All you need is to create a file which exports a function and you can use the userver directive. This makes sure including the import server only that this code only ever runs on the server. That brings me back to the API route we had initially. This is sort of uh different or the API rods were like a precursor to now enabling RSC and they can also be hosted with EIS hosting in your um RSC. You can then do whatever you want. This is of course a very simple example in which we just render a simple quote. Integrating this in your application now feels very straightforward as you can use react suspense and then just access your server function in here in the application that will look like this. So we have a little loading and then my server rendered quote would appear. So I could change this now on the fly here and it will load my preload again and you see it changes the color. Now this example just shows a very basic usage of how it's possible. A better example and seeing this in action is definitely from Evan Bacon his expo router RSC movies repository which is public on GitHub. In this repository, you're going to find everything you need to understand about RSC and what makes them so powerful. Especially if you check out a function like the render movie details here, you're going to see that in here, uh, Evan, is it the details or is it another one? Well, there are a couple of these, but pretty much in all of them, he's using secret keys. And just like with the API routes, this is safe to do. This is something you couldn't do in your React Native front-end application. You can only do this in a server environment because you don't want to have that access token public in your application. And then you can do pretty much everything you want in or on the server and stream it back to your client. And that makes your final pages. So this is from Evans example like the movie details page. probably the actual display of that movie page is just here render media for the ID and the movie and everything is coming from the server function that he created and that we've seen before. So this is really the powerful stuff about RSC's. You could later update that without going through the app store. So you can have like dynamic content in your application at least to some degree. Many people left comments before that RSC is really not helpful and they don't have no idea why they should use it. But just seeing this I think um shows the potential of it. You can have a serverside environment, you can have secret keys, you can update that stuff later and you can make your pages in your application actually a lot easier. So if you haven't tried it, give Expo RSC a chance in your next app. If for whatever reason you don't enjoy the JavaScript types and you also don't enjoy the native tabs, then Expo has you covered as well. With Expo Router, since version SDK 52, you can also have a custom tab layout. And essentially that means you have a headless UI for tabs that you can style in the way you want it. The setup would look like this with tabs, a tab slot, and then the tab list, which actually triggers the different tabs. Now you can take this and style this entirely to your needs. So in my case I have my tab slot up here which essentially renders the whole page. And then at the bottom you have the tab list which is this part here. And that renders this little tap bar down here. In there I have my tap triggers. I've also added some headless tap buttons which use the is focus prop. So I can now switch around the different tabs here. still benefit in general from Expo router filebased routing and the whole logic behind expert router but I can now also build my absolutely custom tap bar so even with any kind of floating animation images in there anything that's absolutely crazy and not really possible with the JavaScript or the native tabs and it would just break that you can just go to the headless UI and implement a 100% custom tap bar solution for your application a couple of years static site generation was pretty popular. Things like Yugo or 11T or Gatsby were in fashion, but they've kind of fallen out of that by now. But you can still get steady rendering with Expo Router today. And it's pretty easy to set this up. If you're coming from Nex.js, you will feel that this is very familiar because you can also have things like dynamic routes. So I just want to quickly show you that if you have pages in your application and you've seen before that this is usually passing an ID to a page. But if you have a genic generate static params function here and in our case it's just using the topic facts and these keys. So SSG and RSC you can still have dynamic pages and static site generation combined. All you need to do is simply after you're done run the export for the platform web and that should create a disc folder in your project with all the pages of your application. And in this case also if we correctly check this out and find the static folder. We should see that we have both the dynamic topic page and the index page, but also the two pages SSG and R uh SSG and RSC that we defined before with their according content included. That means this is probably something most people don't really know about, but you can it'll basically but you can basically also build cool marketing websites with static site generation and expo router because you get the full benefits of SEO and you can have the generate static params function if you have any kind of dynamic content in your application. One of the great things about expo router is that you get deep linking or universal link support out of the box. That means if you've correctly configured this, users can open yourapp.com/ something and if they have the app installed, it will automatically dive into the application. One a bit overlooked fact is that you can actually rewrite these incoming links in your application with a cool native intent file. So in one of my applications I'm using this behavior because we have invite codes for friends in the tiny harvest app and they go to a website but otherwise if the app opens I also directly want to go to a specific page and if you create a plus native intent file in the root of your project this file will be called when people come with an incoming uh with a native intent pretty much to your application. And it can be more than just a deep link. Could also be from a share extension or something. And in here you have access to the path and you can do everything you want like rewriting that URL, triggering a specific action, showing a toast, a mobile or going to a completely different page. So you get the cool out of the box behavior of expo router and universal links because everything in your app, every page becomes a link in the routing scheme. But you also can dive deeper and hook into this native functionality and define what should happen when users trigger your app with a native intent. To me, this is one of the coolest things because it shows that Expo Router gives you many things right out of the box cool functionality that just works. And when you need this little extra on top, like, yeah, I need to rewrite this or do some transformation, then there's always like not an escape hatch, but an actual good solution for most problems that you will encounter in your React Native application. All right, and that's it. 10 Expo router facts that most people aren't using, but you absolutely should. If even one of those gave you a little aha moment, hit that like button and stay subscribed so I know I should make more of these in the future. If you learned something new, drop a comment. below with your favorite feature. I'm genuinely curious which of these surprised you the most. And if you want to level up your React Native skills, go check out galaxies.dev. I'd love to help you build your next app. I'll catch you in the next one. So until then, stay subscribed and happy coding. Simon.