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
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • Sonar - Write Clean JavaScript Code. Always.
  • ONLYOFFICE ONLYOFFICE Docs — document collaboration in your environment
  • InfluxDB - Access the most powerful time series database as a service
  • 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?)

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • 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, Fast and Extensible Build System

    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.

  • Klotho

    AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

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