Struggling to set up a monorepo with 2 RN apps and a shared package that includes native code

Ask your Question

Sorry for the impending wall of text, and thank you in advance for any help.

I have a monorepo (using yarn workspaces) that has several non-rn apps (a graphql server, 2 different websites, others) and as of now a single react-native ios/android app. This works by just nohoisting everything RN related, and some metro config to make sure it can find the js in the other packages. Everything related I’ve found (mostly issues in this repo, honestly) is more about getting a single RN app to work in a monorepo.

I’m looking for help with configuring everything to make this work. This is rapidly approaching being a blocker for some of my team, so I can definitely dedicate some decent time to working on cli if needed. My native-fu is somewhat weak, but I’m happy to jump in if I can get some some guidance. I am flexible.

Here is my desired project structure:

.
├── package.json
└── packages
    |
    ├── shared (this is shared between everything that wants to use it)
    |   ├── package.json
    |   └── js (does not reference native code)
    |
    ├── shared-browser
    |   ├── package.json
    |   └── js
    |
    ├── shared-mobile
    |   ├── package.json
    |   └── js (references native code)
    |
    ├── mobile-professional (first-mobile-app)
    |   ├── package.json
    |   ├── ios
    |   ├── android
    |   └── js (references native code, shared-mobile, and shared-everywhere)
    |
    ├── mobile-business (second-mobile-app)
    |   ├── package.json
    |   ├── ios
    |   ├── android
    |   └── js (references native code)
    |
    ├── first-web-app
    |   ├── package.json
    |   └── js
    |
    ├── second-web-app
    |   ├── package.json
    |   └── js
    |
    ├── non-js-package
    ├── non-js-package
    └── non-js-package

Currently, it’s basically the same as that except that there is only one mobile app, and the shared-mobile folder doesn’t reference any native code.

We’re trying to add a second RN android/ios app to the mix. Currently we have a single shared folder for stuff accessible everywhere. I’m first trying to get the single app to work with the native code hoisted, since that seems prerequisite to the shared code being able to be hoisted. Assuming that works, I’d be able to get stuff working by not having any shared native code, but this involves a ton of code duplication with tedious reference changes.

Ideally, we’d like to add the majority of the native stuff to our shared-mobile folder. I was able to get IOS to work with a bit of a hack, but I’ve been unable to get android working. I’ve been trying both with what ships with RN 0.61.2, as well as upgrading the cli to the latest 3 alpha (7?).

For the ioS stuff, to get it working, I simply updated the xcode project and podfile to look for stuff at ../../../node_modules instead of ../node_modules, and then I duplicated the .command file that gets opened in a new window and added a step to CD into the packages/mobile-professional folder (otherwise it runs in the wrong directory and metro doesn’t pick up the config that I’ve got inside that folder).

For the android stuff, I first adjusted the build.grade, app/build.gradle and settings.graddle to look up 2 directories more than before, which gets me farther but then i get A problem occurred evaluating settings ... Text must not be null or empty. I’ve tried various react-native.config.js values in both the root and my folder (and pointing the android dir within both to ./android and ./packages/mobile-professional/android) but that does not work with the old cli or the new. If I modify the native_modules.gradle file that gets installed as part of cli, (or the android subcomponent), so that it runs react-native config in the mobile folder rather than the root, I finds what it wants, but then I get some build errors about not being able to find android.support.annotations.nullable in one of the native components, saying more specifically that android.support.annotations doesn’t exist, which feels like a linking issue.

Just to make sure it’s not a hangup, re: react-native.config.js, i’ve also moved the limited rnpm stuff (just assets) in there as well out of the package.json

I’m trying to set up an example repo, as ours is closed and stripping things out has proven time consuming (we have a lot of process going on, everything is built in reasonml and compiled with bucklescript down to JS). In the meantime I’m posting original versions of my build and config files, and new versions.

app-build.gradle-modified.txt app-build.gradle-original.txt build.gradle-modified.txt build.gradle-original.txt metro.config.js.txt mobile-professional-package.json.txt rn-cli.config.js.txt settings.gradle-modified.txt settings.gradle-original.txt

Sorry again for the huge wall of text, but I figured it was better to provide everything relevant rather than too little.

[maxkorp]

Here is an example repo I set up that shows what we’ve done to get things working

https://github.com/maxkorp/codepush-monorepo-example. There are some commits on master that are related to similar issues for codepush, but you can go back to the second commit to see how I got things working.

[Minishlink]

Here’s a probable workaround, make sure you have the same cli and RN version. I don’t give any warranty on this. If you use this, test it thoroughly in debug/release mode on Android/iOS. Also make sure to understand how patch-package work. https://gist.github.com/Minishlink/14fde025b4352d0802e25e098e357046