![]() ![]() We subsequently came up with a couple of utils and components which aim at a universal navigation strategy: utils/navigation Both have evolved a lot and now they seem to share a few goals which I consider to be key for properly doing navigation/routing in React: Our new solution was based on abstracting on top of the most recent releases of react-router-dom4 and react-navigation5. Twitter, Uber Eats and all the others mentioned here) do the navigation, and how they deal with challenges like the ones I mentioned above. ![]() When we started this journey, I admit one of the most puzzling things was not being able to figure out how exactly popular apps using React Native for Web (e.g. ![]() The code from this post is available on GitHub: ythecombinator/react-native-web-monorepo-navigation Also, it lacks TypeScript typings-which made me write part of the definitions on my own, since TypeScript was a must-have for the project.Īnd this brings us to the next part! THINKING OF A SOLUTION It's very likely you're going to face a few issues3 related to history and query parameters. React-navigation suits mobile very well, but given its web support, it is still considered to be experimental and has not yet been widely used in production. React-router is a great option for the web, but when on mobile, it lacks screen transitions, modals, navbar, back-button support and other essential navigation primitives. But they all ended up not fully serving our needs. ![]() is one example of web solutions that have opted not to face the challenges of supporting both environments.Īs of now (February 2020), however, we have a few universal web/native formulas ready. Some popular routing solutions on the React.js ecosystem were not meant to support both DOM and native environments s are different from s, s are different from s and most of the web primitives are different from the mobile ones-which makes it difficult to come up with a universal solution. Long story short, after checking out some technical blog posts and talks, we ended up going with ReactNative for Web.Īfter a bit of digging into articles and trying to implement each environment in its own realm, I found that for me, the best starting point was a great template called react-native-web-monorepo2, which brings support for universal apps and gets a little help from Yarn Workspaces.īefore starting to implement this approach into your project, though, I suggest reviewing your requirements and checking whether these tools solve all of your needs. No time here to cover the differences between these two. ReactXP is a layer that sits on top of React Native and React, whereas React Native for Web is a parallel implementation of React Native - a sibling to React Native for iOS and Android. As the official documentation for ReactXP states: Both share similar goals but have different approaches. I then heard of two other initiatives on Github: ReactNative for Web and ReactXP. I want to be able to customize the installation, install custom versions of modules and have more control over project dependencies. So when I joined this project, I didn’t actually know that much about React Native.įirst thing I came across was Expo and its experimental web support1, but I decided not to go for it mostly because I enjoy having control over the project stack and being aware of what's happening. I had only worked on an example React Native app before (uncompiled and unpublished). This article focuses on a very important part of this journey: Building a navigation solution. I ended up facing a variety of challenges-like a lack of real-world-scenarios content related to React Native Web, an unexpected lack of documentation on popular projects and struggling to build some platform-specific modules. Since I’m a frontend developer who loves exploring new territory, I jumped at the opportunity. When I joined STRV, they had a specific request ready for me: Build a frontend app for iOS, Android and Web, with shared component and business logic amongst all the platforms. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |