And so going back to the example I mentioned before, where are we now with our 95 plus percent code sharing journey? So if Tamagui mentions that they give 40% of that, composing that upwards into screens or pages maybe brings us to 60%, another 80% is maybe provided by a data layer, but then what's remaining in that bottom section there? Like, what's left to bring us to 95 plus percent? And really that's the next tier of what we're kind of figuring out right now within the React Native space, and that's navigation.
Navigation has been historically difficult and challenging to solve across every single platform, because fundamentally there's internal navigation, and what I mean by that is where you navigate using the UI itself. The actual navigational experience is internal to the UI, and that's what you'll find on like a mobile experience, you'll tap a button and you'll navigate to a new page, you'll tap a back button, within the UI you'll navigate backwards. The main exception to that is Android's back button, of course, which is external to the UI, but I won't spend a lot of time getting into that one. Then, of course, there's external navigation, like what we find on the web, and so if you use a browser before, you're familiar that there's a back button, a forward button, a refresh button and a URL bar, as well as tabs, all external to the UI of the application you're building. All of these manipulate the navigational state of the application, entirely external to the application itself, of course. So I don't have to explain how a browser works, but the main thing is the URL bar, and so that's fundamentally different and lacking on an internal navigation experience, but it's present on an external navigation experience. You should be able to copy that URL into a new tab, and it should just load that same page for you. It should all just work. And to demonstrate an example of that, I have a recording of my cat's Instagram page. She's too adorable, isn't she? If we navigate using the UI, like internally to that experience, you can see a modal opens It opens up contextually over what's behind it because it knows what's behind it because all of that application state is handled by the application itself. This is similar to how mobile and desktop navigation could work. But as you can see, copying that URL into a new tab opens the same page but it doesn't know what to put behind it, so it renders that as an entirely full page. This is, again, like external navigation working on the web. So really to build in every platform navigational solution, we need to support both. External navigation and external navigation all within the same experience. And this has been historically very challenging to do, especially in React Native. So how do we get building on this? Well, there's React router, of course, which advertises support for browser-based DOM routing as well as React Native. And while this works very well, it lacks the native bindings on mobile to do things like dragging from the side of the screen to navigate backwards. It just doesn't feel native. The state management works but it doesn't feel native on those platforms. Then there's React navigation, which is a full on mobile-first navigational experience. If you worked with React Native before, you've likely used React navigation. It uses React Native screens from Software Mansion to provide that drag from the edge of the screen to go back functionality. And on mobile, it works great. In recent years, they've also shipped web support, as I'm showing here, and so we ended up trying this at Guild and it just didn't quite feel proper on the web. While it technically works, a bunch of things just felt off. Things like incremental loading of routes, which you obviously want on the web, you don't want to ship everything in one massive payload. It would also rewrite the URL bar incrementally as well, so you see the URL bar rewriting itself as you waited for the rest of the page to load, which just felt odd. And if you press the back and forward buttons, it would put the app into a weird state where it just couldn't recover, so you would go and refresh it again and the URL bar would rewrite itself again, so it just felt entirely off.
Comments