Running React Native everywhere: Yarn Workspaces monorepo

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • metro

    ๐Ÿš‡ The JavaScript bundler for React Native

  • Second, sharing code with other projects (e.g., backend code, web apps) may get complicated. Out-of-the-box, React Native's metro bundler cannot reference code outside of the project's root directory. You can configure it to do so (and we'll do it as well later on). Still, once you do it, you'll also need to ensure dependencies resolution works correctly (to avoid loading two different versions of the same library, for example); which might not be as easy as it may sound.

  • ordinary-puzzles-app

    Mobile and web puzzle game built with React-Native

  • Last, because you're supporting multiple platforms in a single directory, it's easy to end up with confusing indirections and branches in platform-specific files. This may be just a "me" thing, but I find it hard to navigate around configuration files of projects that support multiple platforms. At first glance, it may look like all platforms use the same configuration files. But once you dig a bit deeper, you realize that each platform requires some ad-hoc tweaks to the configuration files (for Metro, Babel, Webpack, etc.). Want an example from a codebase I wrote? Check out Ordinary Puzzles, which is a mobile, web, and Electron app. It's not easy to understand what files are used by which platform (e.g., what platform build phase is using babel.config.js?)

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • minimatch

    a glob matcher in javascript

  • This nohoist section will tell Yarn that the listed dependencies (specified as glob patterns) should be installed in the node_modules directory of each package instead of the root project's one. For now, I just added react, react-dom, and react-native:

  • React

    The library for web and native user interfaces.

  • react and react-dom because once we start supporting the React Native for Web, it will be easy to get into a state where the app crashes because different versions of React are loaded on the page.

  • nx

    Smart Monorepos ยท Fast CI

  • Please notice that I'm focusing on Yarn Workspaces just because it's the tool I'm most familiar with. You can achieve similar results with pnpm and nx.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts