One Code to Rule Them All

What's up, React Summit, and welcome to my talk, One Code to Rule Them All. In this talk, I'm going to show you how you can go all in with React Native and not only build mobile applications, but also have a great web output.

So let's start by quick introduction. I'm Simon. You might have seen me someplace on the Internet before. I run a platform called galaxies.dev. I live here in beautiful Münster, Germany with my wife and my daughter, and when I'm not coding, I'm definitely running or working out in the garden.

But in this presentation, I want to take you on a journey. So let's dream. What if we could build for all platforms? That means for iOS, for Android, for the web and do it from the same code base. There's also a little star here because there's something we have to know, and that is if we want to build for all platforms, we also want to respect the platforms. We don't want to compromise what's making these platforms great in the beginning.

This has always been the dream of cross-platform applications, of universal applications. And of course, there are some solutions out there for years by now. So the most popular is probably also Flutter. There are mixed opinions about Flutter, but the basic problem is that Flutter usually renders your application and basically draws it pixel by pixel, and it's not really using what's making these platforms great. It's not using the actual native features of those platforms. Then we have other solutions. I've been a big fan of Ionic in the past with Capacitor. If you don't know about this, this is basically wrapping your web application in a web view and putting it in an app. This sounds worse than it actually is. So this is a legit solution in many cases, but you're running in a web view, so not really displaying anything that's native.

Then we got other solutions like Kotlin multiplatform. In the .NET world there's Maui, there's Tori coming up with Rust. There are many different solutions, but they all lack in some areas. And then of course, we got React Native, but with React Native, the main focus in the past was doing a great iOS and a great Android application. But what if you also wanted to have a web application? Well, at some point they introduced React Native Web, but it never really worked out in the way we wanted it. So there are, by now, new ways. And this is what I want to show you. So you can now use React Native with Expo, which is also anyway a great recommendation, but the Expo router.

And with the Expo router, we got tons of new options to build our applications. And the dream that we talked about, what if we could build for all these platforms from one code base, is actually becoming a reality. So let me show you a few features of Expo router.

So why should you actually consider Expo router? Let's start with a high level view with this great picture from the introduction of Expo router version 2. By the way, did you know that this is called a Bento style? I learned this from my designer. Like these things, you've seen this from Vercel, Next.js all the time. I think it's called Bento style.

So why Expo router? Expo router introduces many cool things into a React Native application. Maybe the most important one is file-based routing here. Because with file-based routing, you can get the same URL on the web if you built your app for the web, and you can use that scheme as well for your native applications to navigate around. It works really, really great. But beyond that, there are many other interesting things that we're going to get into. CSS support, type routes, async routes. And on top of that, this was just Expo router version 2. At this point, we've also seen Expo router version 3, which introduced API routes. So you can have API routes next to your React Native application code, which is a super interesting concept and kind of ties into this whole concept of everything is becoming one again. So we've seen this, for example, with Next.js, with server components, the API routes. Everything is kind of going full circle back to the old days of PHP, but in a better way, of course. This is also happening for React Native. We can see it here that we could have API routes in our project as well with Expo router. These were just version 2 and version 3.

At this point at React Summit, probably Expo router version 4 is out with new features and really stable version that we can use in our application. More on how we can use Expo router in a second. So let's take a closer look at these features. For example, the first one I gave you is file-based routing. File-based routing is probably popular to everyone who has used Next.js, Swellkit, any kind of popular full stack framework these days. And it works exactly the same for native applications with React Native. We can have a folder, then we have a home TSX and then we have a stack definition and we have this post file with brackets, which means this is a dynamic URL. We can pass an ID or a post ID to that page and it is just amazing in how it works. It is a complete mindset shift for native developers because we usually think in screens and pages, but if we adopt this concept, we can easily also build for the web because all these things would turn into slash home, slash home, slash new and we can use that to our advantage.

Also if we later would talk about universal links that can directly jump into your applications. Another thing is web layouts because you don't want to just write one code that looks the same on web and like mobile. It's just not good. So instead of that, we can have layout files where we define if a platform is the web, then we can use some different code. If the platform we're running on is iOS, Android or other native platform, we use a native implementation and that gives us a chance to build from one code base but still respect the platforms. We can still have a native tab bar, a native stack or draw navigation and on the web we can have a menu at the top or whatever you want to have. You already see this in this picture that we're actually using CSS. This is a real code from a React native application because with Expo Router we actually have CSS support. We're a bit limited here yet but it's getting better and it's just amazing to see that we can bring this into React native projects. If we stop a moment here and think about this, this also means that in the future we will be able to bring in stuff like Tailwind CSS which is probably the most popular library on the web right now. In fact, it's already working right now. There's a library called Native Win that we can use which allows us to use Tailwind CSS exactly as it is in React native. Everything's coming together in this one place. I don't want to get too excited about CSS because there are many more things.

Of course, if you have a framework and you're not only building a mobile application, you need to talk about SEO, about meta information and, of course, that is included with Expo Router as well. You can, for certain pages, define head tags. You can have meta information. You can make a static export from your pages. All of this usually works great.

On top, of course, we have API routes. This is just an easy example of what's possible but in many cases you need a simple way to hide your API key. Let's say you want to talk to the OpenAI API. You don't want to put your API key in a React native application because all the keys you have in your application are basically public. Treat your native application as it is a website, as a public application. With API routes, we can have our key in a safe server-side environment. It is still in the React native project but it won't get bundled into your actual mobile app. This is only in this edge function that you can then deploy somewhere.

This is super interesting and there's so much more. You probably saw it on the Bento screen. We had static types. We have aliases. We have async routes and bundle splitting and so much more. We just wanted to focus on these few things right here. Let me give you an example of how this could look in reality. I used this in one of my workshops and we created an application that has a tab bar. It has a draw navigation on mobile and on the web a completely different picture. You can reuse all the pages you have in that mobile application, but on the web, you usually want to have hover effects, buttons. You want to have a menu at the top. All of this is possible with the things I've shown you before. Custom layouts. You can have custom component files using the extensions. You can have a file with .web, .native and different files and components would be used. It just works great with ExpoRouter. This is probably not the most exciting demo.

More exciting is actually what the creator of ExpoRouter has done. Evan Bacon is the creator of ExpoRouter with his team. His blog is actually using ExpoRouter. You can check it out at evanbacon.dev. If you look at a full screen, you're going to see a regular website. It looks great, works great. If you then go into a smaller version or browse to it from your device, from a mobile device, you're going to see it turns into a tab bar because he is also using these different web native layouts. Of course, this is not yet a native layout, but inside an app, it would use a regular tab bar.

The probably greatest thing about this year is that you can also get all the code of this. If you're interested in seeing what's possible with ExpoRouter, I highly recommend you check out the repository on GitHub for evanbacon.dev, where he shared all of this. He is also using API routes, I think for OG image generation, a really smart way of dogfooding everything they're doing with ExpoRouter in this project. I think it's really fair to say that all in with React Native is definitely possible. You can use ExpoRouter and get a really, really great outcome, a great result for your website. It's not like your focus is on native and then web is an afterthought. No, what you get with ExpoRouter, if you follow these mechanisms, if you use the layout routes, the meta tags, and all of the new things with ExpoRouter, it is definitely possible to build a great website from your one code base as well. You can share most of the code, which is really the dream we talked about in the beginning, and especially because React Native is respecting the underlying platforms, is respecting the web platform as well as Android and iOS and rendering the native controls.

With that, it's only fair to say that there's also an alternative way. ExpoRouter and building for all platforms is not yet the standard in most applications. For example, the probably most popular approach is using a monorepository with Next and Expo or React Native next to each other. That means you're using Next.js for your website, for your marketing, whatever it might be, and then you have a React Native application that's targeting iOS, Android and maybe other native platforms. It is also a good approach because you're kind of using the best of these platforms and there are ways to still unify and share code. For example, there's a great library from Fernando Rojo called Soleto, which allows you to use this link component that either uses the Next link or the ExpoRouter link component, and therefore you have the same routing. That also means you can have components that are shared across web and native, and it just helps you to reuse some of your code. If you're then really fancy, you could also top this off with Tamagui. Tamagui is a UI library which really allows you to use high-performing components on iOS and the web that look great on every platform.

This already brings us kind of to the end of this presentation. We should probably spend a little moment to talk about the future, because ExpoRouter is already great, it's becoming even better. Version 4, as I said, is around the corner or maybe already released when React Summit happens. What else is there? There is a library called ReactStrictDOM, which we should definitely mention.

What else is there? There is a library called ReactStrictDOM, which we should definitely mention. This was open sourced by Matter a few months ago, and it was actually a really, really interesting concept into what could be possible. Everything I show you here is kind of like very experimental, very early days. Don't be afraid of what you see next. This is the idea of ReactStrictDOM, which means we have a separation here between ReactStrictDOM native on the left and web on the right. But we would kind of write the same code, and we just get, well, displayed differently on these platforms.

Let me give you a clear example, because explaining this might take a bit too long today. This is how it could look in reality. We're importing these HTML elements or the div element from the ReactStrictDOM library, and then use it like this. We could also have our own stuff like an example block or combine it with some other elements like a scroll view. This might look a bit terrible to you, and I agree that it's probably not the best way, because no template, no code snippet that you're going to find on the internet will work if you do it like this. But as I said, it's really early days for stuff like this. And just seeing that it could be possible is super interesting, because if you build this app, which works, this is not a theory. This is actual code that I tried in a video as well. If you build this, you can build a website from this, which shows the usual div tags, the usual span or p tags. But if you deploy it as a native application to your device, it is actually rendering React native views. It is using the UI view, the UI label on iOS and the according elements on Android. So it's not rendering, it's not doing the thing that Capacitor or Ionic is doing. It is actually, from HTML code, rendering to native elements, which is completely mind blowing, just like a glimpse into the future.

Then, besides that, we of course have to mention React server components, and we just have to say that, yes, this is also possible for React native, especially Shiman Ripshak has done a great job of showing different cases of using React server components. It is still, again, very early days, but it should be possible later this year to use React server components with React native. Once again, this is kind of blowing my mind in what's possible in that we are loading native applications, then bring in the server components, but this could be unbelievable beneficial for many, many applications. So all of this just brings me to the point that we have really, really exciting times ahead of us. The first thing that I've shown you so far in this talk is definitely a possibility, and it's happening right now. It's not like we're dreaming about something that might or might not happen at some point in the future. So to be very clear, Expo Router v4 is right around the corner. It's probably already released, maybe in beta, maybe in stable, and after version four, as I've talked with Evan Bacon, we're going to see a rebranding, renaming around Expo Router, and then it's becoming more the standard for Expo applications. So this is definitely here to stay. Then we got React server components, which is already taking place a lot in Next.js, but this is also coming to React native. As I've seen, or as we've seen with the examples from Shiman, there's a lot going on.

It will definitely be possible to use React server components with React native later this year, which once again makes it easier to combine our code. And then on top of that, we just barely touched on this concept, but the whole topic of bringing Tailwind-CSS to React native is fascinating. I talked with Mark Lawlor about this, the creator of NativeWin, and there's so much more to this than just having Tailwind in React native. Because if you think about this, if you look at the NPM installed from Tailwind, it's massive. It has taken over the web, and if web developers can reuse their existing skills, not only the web stuff, which we've seen worked with React strict DOM, but also the styling stuff, which they've now learned with Tailwind, and use exactly the same syntax for React native, it opens up a whole new gate of people coming to React native, and then in turn building universal apps based on these technologies.

And finally, just like the icing on the cake, Skia, a very popular library, and also Reanimated have web support. So we can also use the same code we use for native usually with these libraries on the web, which means we have a fascinating variety of tools available to build our web application with React native. To conclude it, I just want to use the words from Kasper Kapusiak, who concluded the state of React native survey with, it's hard not to say that we're living in the best years of React native so far, and I definitely couldn't agree more. It's just exciting to be here. It's exciting to see the players in the space, innovating, making progress on all the libraries, and the flair in the community is just really, really great.

This brings me to the end. Again, I'm the creator of galaxies.dev, so if you want to get more into React native, check it out. I also have a podcast called Rocket Ship, where I talk to all these people and try to explain the concepts in an easy, digestible way. To end this, I just want to give you one thing on the way. Please, get your hands dirty. We can talk about Expo router and universal apps and monorepositors, but just do something. Give it a try. Bring up a new application. See how it works. See how it feels, and you want to pretty quickly notice that yes, it is possible that one code, one React code, rules all the platforms, not just web, but also native. Thanks for attending this, and I will catch you in one of the places where you can find me.