☂️ React Native Monorepo

Hey all, I’m opening this task to keep track of the effort to implement the React Native Monorepo RFC:

• https://github.com/react-native-community/discussions-and-proposals/pull/480

In this first phase of the work, we’re looking into only:

• Renaming the packages under packages/ (i.e. updating the name field) to follow the naming convention suggested in the RFC (@react-native/...)
• Updating the version to be 0.71.0 And the necessary related infra.

At this stage we’re not looking into renaming the folders of such packages.

Here the list of tasks that needs to be handled:

• Setup Verdaccio for local E2E testing of the template.
  • Done by @fortmarek https://github.com/facebook/react-native/pull/34577
• Bump @react-native/babel-plugin-codegen to 0.71.x
  • Done here https://github.com/facebook/react-native/commit/4f6929bb3c4b4d8ba53fa250645b5ae4e297a1b3
• Bump @react-native/eslint-plugin-specs to 0.71.x
  • Done here https://github.com/facebook/react-native/commit/e44150409e1332145274563a5eca37aa3fc4c070
• Rename @react-native-community/eslint-config to @react-native/eslint-config and bump to 0.71.x
  • Assigned to @afoxman https://github.com/facebook/react-native/pull/34581
• Rename @react-native-community/eslint-plugin to @react-native/eslint-plugin and bump to 0.71.x
  • Assigned to @afoxman https://github.com/facebook/react-native/pull/34581
• Rename @react-native/polyfills to @react-native/js-polyfills and bump to 0.71.x
  • Assigned to @Titozzz https://github.com/facebook/react-native/pull/34574
• Rename @react-native/normalize-color to @react-native/normalize-colors and bump to 0.71.x
  • Assigned to @Titozzz https://github.com/facebook/react-native/pull/34571
• Rename @react-native/assets to @react-native/assets-registry and bump to 0.71.x
  • Assigned to @fortmarek https://github.com/facebook/react-native/pull/34572
• Rename react-native-codegen to @react-native/codegen. No bump needed.
  • Assigned to @shivenmian here https://github.com/facebook/react-native/pull/34804
• Rename react-native-gradle-plugin to @react-native/gradle-plugin. No bump needed.
  • Assigned to @rahul3002 here https://github.com/facebook/react-native/pull/34835
• Move ReactCommon/hermes/inspector/tools/msggen/package.json inside packages or remove it.
  • Assigned to @gabrieldonadel here https://github.com/facebook/react-native/pull/34850

All the related PRs/Issues for this effort are labelled as Tech: Monorepo.

When doing one of those tasks, first let’s make sure the CI is green first (specifically the test_js task). Once your PR is green, we’re going to import it internally, and expect some turnaround time as those changes are going to require internal changes on our end as well.

Please comment below if you’re willing to take the stance on any of those task and wait for a confirmation before start working on it.

[hoxyq]

A quick update on this task so far, since I’ve flooded it with the references from my PRs.

Seems like all internal problems (from Meta internal code) are resolved, right now I am working on resolving some problems with CircleCI. I will provide more context and details when I will able fully validate the solution.

The main problem is that Yarn workspaces produce packages as a symlinks inside node_modules, which might not work as expected in some build scripts. This is also relevant for Metro, that’s why I’ve changed absolute paths to relevant in some files. As suggested by @cortinico, I am also using Verdaccio for template app tests on CircleCI, since it depends on eslint-config and codegen packages

[hoxyq]

Hey, all changes are finally merged 🎉

How it works now

We are using Verdaccio as a local npm registry in three different places in our CI:

1. Running e2e tests
2. Building react-native package
3. Building template package

Each package, which is not marked as private, is being published to Verdaccio. This helps us to resolve the issue that all renamed packages are not yet present in npm registry. This approach should also help in release cycle when we will finally migrate to a proper monorepo structure: we might bump versions of some packages (without publishing them to npm), but they should be always available via Verdaccio.

Known problems

We use command yarn --json workspaces info to get a list of all packages that we publish, but at some point in release CI we remove workspaces from react-native’s package.json, so using yarn --json workspaces info results in an error. This was shared by @cipolleschi while working on 0.71.0 release, maybe @kelset can share some details about it.

Next steps

As shared in original proposal, we will be working on setting up CI to automate versions bumping and packages publishing. We have also started a discussions around what to migrate to a separate package and how to make it happen.