Fernando Rojo: Is React Native + Next.js production-ready?

Last year, I spoke at Next.js Conf about how we use React Native with Next.js to build the mobile app and website for BeatGig using a single front end engineer and one code base. And the response surprised me. It turns out I wasn't alone. There were hundreds of developers out there excited by the prospect of using the same code base

to build both websites and apps. We all love React, but the idea of using React Native on the web always felt out of reach. It was nothing but a pipe dream, but finally it was within grasp. Suddenly a whole community got built around this stack. There were many people who were trying to contribute and who wanted to use this in their products, but there was just one problem. Navigation was still unsolved. So I collaborated with dozens of people on this pull request

and after hundreds of comments and months of work, we finally came up with the right solution. The idea would be to use URLs to trigger navigation across both web and native. That eventually turned into a library called Solito. On the night of releasing it, Solito made its way up to number three on Hacker News. Then in June, Charlie Cheever announced that Expo would be treating the web as a first class citizen and would prioritize the Solito stack as its way of doing things for the web.

So let's look at some code. My plan with this talk is to give you an overview of where the React Native-Next.js stack is today to help you decide if it's ready for you to take out for a spin, whether for a side project or a production app that could be used by millions of people. We'll look at the recent innovations in navigation and file system routing, cross platform authentication, drop down in context menus. And finally, the new updates in React native web's

CSS and styling compatibility. Up first is navigation and file system routing. This has historically been the most challenging part of sharing code between websites and apps, and we'll primarily focus on the use of two libraries, Solito and Expo Router. Let's see how they work together. Solito is a library dedicated to pairing together React Native with Next.js, with the primary focus on navigation, it comes with a number of useful starters from a blank one to a Tailwind CSS one, which will touch on a bit later.

Solito has a Link component, which is a drop in replacement for next/link, as well as a useRouter hook, which looks a lot like useRouter from Next.js. It also has some useful things like create param which returns a type safe useParam hook. This lets you read in and update search parameters on both web and native. So the one missing pieces, how to do file system rounding on native. And with that we'll be relying on Expo Router. Expo Router is a new, very exciting project by Evan Bacon and the team over at Expo.

Now keep in mind that what I show you here is still experimental. That said, they're releasing things very quickly and I'm really excited for the the future of this project. All right, let's see how we do file system routing. Here I have a React Native-Next.js app in a monorepo. This is a typical Solito starter, so don't worry about seeing all the code. I'm gonna share this at the end. So first I have a packages folder and this has my different monorepo packages. This is a pretty simple one. In my features folder, I have a home screen. And so this is the same screen that's used to the right on the website and the app, so it's a very basic one.

I'm just gonna add an exclamation point and here it updated in both places. So notice here that we have this component called a TextLink, and this is importing from solito/link instead of next/link. Well, when I click on this page, it opens this different URL, so users just like a normal Next.js app and it does the same thing on the app. So first for Next we have this pages folder, which is very typical and all we need to do is import and then re-export the screen we have. So we have our shared screen that works on both platforms and Next.js just needs to re-export it.