I’m going to show you how I was able to build a shared web & mobile app. Below is a step by step guide as well as my reasoning for each choice I made.

Let’s start by creating our monorepo.

$ mkdir react-monorepo $ cd react-monorepo $ yarn init

yarn init

Note that private: true is required if we mean to use yarn workspaces. You can read more about it here!

Before we add more configuration to our monorepo, let’s build our boilerplate:

$ mkdir packages $ cd packages

Then we should create our mobile app. For this, you will need the CLI, more info here:

$ react-native init app # In case you want to test it (you may need to add some dependencies, read the documentation):

$ react-native run-ios --simulator="iPhone 11"

Now we can create our web app. To do this, you can add a personal project of mine, — react-bootstrap — you can find it here, or if you prefer, create your own.

$ git clone git clone https://github.com/rntdrts/react-bootstrap.git web # remove git references

$ cd web $ rm -rf .git # In case you want to test it (you may need to add some dependencies, read the documentation):

$ yarn --ignore-scripts && yarn start

For now, you should have this structure:

packages/

- app/

- web/

package.json

It’s time to configure our monorepo, so go to the base of your repository, edit your package.json and add our workspaces:

{

"name": "react-monorepo",

"version": "1.0.0",

"description": "React & React Native App",

"main": "index.js",

"license": "MIT",

"private": true,

"workspaces": [

"packages/**"

]

}

Before installing our dependencies, make sure every package.json on each project has the following attributes:

{

"name": "react-monorepo",

"version": "1.0.0",

"private": true,

...

}

Let’s now install our dependencies:

# Before we move forward let's just make sure we have our dependencies clean!

$ rm -rf node_modules && rm -rf packages/**/node_modules $ yarn

Now let’s see if everything works under our projects, let’s start with our web app:

$ cd packages/web $ yarn start

I have my🤞and hope everything went as smoothly for you as it did for me! Now let’s try our mobile app:

$ cd ../app $ react-native run-ios --simulator="iPhone 11"

Did you have this error?

💥💥💥💥💥💥💥💥

So what is happening? Since we are using yarn workspaces our main dependencies are installed under the root of the project and yarn is smart enough to understand this. However, since this build is related to react-native he doesn’t have the same level of understanding.

To fix this, we need to tell yarn not to hoist the react-native dependency. At the end of your package.json add the following:

...

,

"workspaces": {

"nohoist": ["react-native", "react-native/**"]

}

...

Now for this to work, clean your dependencies and run your app again:

# Before we move forward, let's just make sure we have our dependencies clean!

$ rm -rf node_modules && rm -rf packages/**/node_modules $ yarn $ react-native run-ios --simulator="iPhone 11"

Everything should work now 🤞!