Building Cross-Platform Apps with React Native + Next.js | Fernando Rojo | App.js Conf 2022

[Applause] thank you uh before we start let's take a quick group selfie so i can get all you guys in this all right uh look your best put your arms up or something awesome so let's talk about shipping to production with react native and xjs so my name is fernando rojo and like i mentioned i'm the co-founder and cto at beekig so we're a marketplace for

booking artists you can think of it like airbnb for live music our product is live in production and processing millions of dollars worth of bookings we have a website and we have an app but we don't have a web team and a native team and a design team in fact we don't have a front end team at all the front end for the website and the native app was built and designed by one person with one code base and that's all thanks to using react

native with next.js i first spoke about react native with nexjs at nexconf in 2021 some of you might have seen that and in that talk i discussed the many challenges i faced including navigation animations responsive design systems platform specific features and mono repos and i walked through how i built a few libraries to solve the problems such as dripsy modi solido uh looks like one of them might be missing

maybe you'll find out at the end of the talk and the reception of the talk surprised me a bit i thought that react native with nexjs would be pretty niche but it turns out that there is a real appetite among react developers to be less constrained when shipping product and little by little a sizable community started growing around the stack could it be that the promise of cross platform without compromising user experience or avoiding the best frameworks like next.js was finally coming true

people started trying it out and there was a lot of excitement but there was a pretty big elephant in the room how do i handle navigation my dms were flooded with this question all over github everyone's asking how do i do this and navigation is by far the hardest part of cross-platform development so in my next talk i discussed a library i made called exponext react navigation and as the name implies this library lets you share code between expo and nexjs with react navigation on the

native side so why were people still getting stuck the reality is that the apis offered by this library were pretty bad and didn't solve the issue so this is what it looked like to use exponex react navigation and you can already see like where is this taking you on native we have a route name and on web we have a path and these might not match and it's just pretty unclear where you're going to end up from this the difference in abstractions between screen names and urls

is already enough to confuse you next gs uses a pages folder with file system routing whereas react navigation uses component-based stacks tabs drawers and other forms of navigation that all go through a single app.tsx file and overall web and native just have very different patterns and a key component of the library that was missing was just documenting how you should deal with these so if you go down the rabbit hole you'll find that i worked with axel and a lot of other people on a pull request in an

example app trying to solve this problem for months basically from november when i gave the talk until the day i released toledo and here at the top you can see a comment from someone who saw the talk i was really excited they had a web development background and the first thing they're wondering is like how do i get navigation working and this slowly became one of those pull requests that had a ton of activity after all like the most basic thing of any product just like how do you get from screen to screen remained very unclear