DEV Community

Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo

Bruno Lemos on March 06, 2019

Let's make our react-native app work in the browser, the right way. This tutorial was made for react-native <= 0.61. If you are using a newer ...

Read full post

bantingGamer • Mar 13 '19

HELP! something changed and i cannot replicate this tutorial anymore. i cannot get past the first time you are testing android studio. I remember something like --version react-native@next that is now missing from this tutorial. and now i cannot replicate it at all some one please help.

this is now the 7th time im following the instructions and i get this error first time i try test in the android simulator after trying to create monorepo

Unable to resolve module `./packages/mobile/index

Bruno Lemos • Mar 13 '19

Hi, I updated the tutorial with the latest changes from react-native@0.59, search for projectRoot to see the updated step involving the file metro.config.js.

bantingGamer • Mar 14 '19

Hey Bruno how are you?

Im still running into a issue. Soon as i complete the web section of the tutorial. my mono repo breaks for mobile. it installs all the modules in packages/mobile/node-modules instead of root/node_modules.

Thus when I run packages/mobile/yarn start i get the following error
"Error: Cannot find module 'E:\2019_PROJECTS\moco-messenger-project\code\repo\test\node_modules\react-native\local-cli\cli.js'"

I dont understand how the web project is affecting the mobile project. Please assist.

kind regards

Bruno Lemos • Mar 14 '19

Make sure you have the correct content inside the root package.json and you used yarn at the root directory to install the dependencies, not inside each package neither npm instead of yarn.

Compare your code with the repository to see if anything is different: github.com/brunolemos/react-native...

bantingGamer • Mar 14 '19

hey bruno,

I just did like you said, I even upgraded react-native to v0.59.0 stable. yet still when i run yarn in the root it still installs packages/mobile/node-modules and not in root/node_modules.

how can i compare an entire project with difference in vs code? are you sure there isnt a step missing? I have tried 3 times now following your exact instructions.

Bruno Lemos • Mar 14 '19

Do you have the latest version of nodejs and yarn? How is your root package.json?

bantingGamer • Mar 14 '19 • Edited

I just checked on my computer, im running yarn 1.130 and node v10.0.0 i believe those are the latest versions.

my root package.json file looks exactly like yours.

{
"name": "myprojectname",
"version": "0.0.1",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
}
}

like i said im extremely confused becasue i dont understand why the monorepo breaks when i add the web

bantingGamer • Mar 14 '19 • Edited

i just downloaded your project at
github.com/brunolemos/react-native... and when i run yarn in the root it is also installing the packages in the wrong places.

Ryan Atkinson • Mar 16 '19 • Edited

Hey everyone, I downloaded the project, followed the updated tutorial and ran into the same exact issue. I got /mobile running again by updating the relative filepath in its package.json to the react-native-cli:

"scripts": {
    "start": "node ./node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },

good luck!

Bruno Lemos • Mar 20 '19 • Edited

Hey, you both were right! React Native started getting installed inside packages/mobile/node_modules, which is wrong. Changing the path is not the right solution though.

I investigated and you need to make sure all your dependencies have the exact same version between the monorepo packages. For example, change your "react" dependency inside the mobile and web's package.json to the exact same version (e.g. 16.8.4).

This will make react-native get installed in the root node_modules again and also prevent multiple instances of react being installed in the same project, which would cause all kinds of bugs.

Updated the tutorial and also the repository: github.com/brunolemos/react-native...

bantingGamer • Mar 13 '19 • Edited

thank you so much for the new changes in the tutorial. i made the changes to the metro.config.js just like you suggested and i can now run it on android. i will continue with the rest of the tutorial in the morning.

Vietnam Travel Bag • May 4 '19

Hi Bruno,

How to use 3rd lib, I want to add react-native-element package.
It's work well on mobile, but when I run web app, it's error below:

Support for the experimental syntax 'classProperties' isn't currently enabled (41:23):

  39 | 
  40 | export default class SwipeRating extends Component {
> 41 |   static defaultProps = {
     |                       ^
  42 |     type: 'star',
  43 |     ratingImage: require('./images/star.png'),
  44 |     ratingColor: '#f1c40f',

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

Here's what I added to config-override.js on packages/web

const appIncludes = [
  ...
  resolveApp('../../node_modules/react-native-elements'),
  resolveApp('../../node_modules/react-native-vector-icons'),
]

module.exports = function override(config, env) { 
  ...
  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve('babel-plugin-react-native-web'),
    require.resolve('@babel/plugin-proposal-class-properties'),
  ].concat(config.module.rules[2].oneOf[1].options.plugins)
  ...
}

In future, I will add react-navigation and some other packages.
Please help, many thanks!

Bruno Lemos • Jun 4 '19

Did you make it work?

I haven't tried your code but yes, changing config-override.js correctly should be enough.

Nishant Koli • Jul 15 '19

Was anyone able to add react-navigation to the project? I got react-native-elements working by following the above comment.

Here's a working example for React-Navigation with web :
github.com/react-native-elements/r...

Thank for documenting all this work thoroughly.
As a React-Native noob, this guide was very easy to follow along ! Cheers!

Nishant Koli • Jul 22 '19

I got react-navigation's drawer working on the web.

The following is my config-override.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

// our packages that will now be included in the CRA build step
const appIncludes = [
  resolveApp('src'),
  resolveApp('../components/src'),
  resolveApp('../../node_modules/@react-navigation'),
  resolveApp('../../node_modules/react-navigation'),
  resolveApp('../../node_modules/react-native-uncompiled'),
  resolveApp('../../node_modules/react-native-elements'),
  resolveApp('../../node_modules/react-native-gesture-handler'),
  resolveApp('../../node_modules/react-native-ratings'),
  resolveApp('../../node_modules/react-native-screens'),
  resolveApp('../../node_modules/react-native-tab-view'),
  resolveApp('../../node_modules/react-native-vector-icons'),
  resolveApp('../components/libraries/MSALAuthLogin'),
  resolveApp('../../node_modules/react-native-vector-icons'),

]

module.exports = function override(config, env) {
  // allow importing from outside of src folder
  config.resolve.plugins = config.resolve.plugins.filter(
    plugin => plugin.constructor.name !== 'ModuleScopePlugin'
  )
  config.module.rules[0].include = appIncludes
  config.module.rules[1] = null
  config.module.rules[2].oneOf[1].include = appIncludes
  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve('babel-plugin-react-native-web'),
    require.resolve('@babel/plugin-proposal-class-properties'),
  ].concat(config.module.rules[2].oneOf[1].options.plugins)
  config.module.rules = config.module.rules.filter(Boolean)
  config.plugins.push(
    new webpack.DefinePlugin({ __DEV__: env !== 'production' })
  )

  return config
}

Oz Shemesh • Aug 6 '19 • Edited

thanks for the input
i am facing similar issue while using GoogleSigninButton from react-native-google-signin.

i tried adding require.resolve('@babel/plugin-proposal-class-properties') as you suggested below.

also tried to update babel.config.js with the following, didnt worked as well...
module.exports = {
plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
[
'@babel/plugin-proposal-class-properties',
{
loose: true,
},
],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: ['@babel/preset-flow', 'module:metro-react-native-babel-preset'],
}

also tried with loose: true
require.resolve('@babel/plugin-proposal-class-properties', {
loose: true,
}),

any suggestion please?

thanks for you time.

Nishant Koli • Aug 15 '19

Hi Oz, were you able to make it run? Did you try with a compatible release (any before 0.60)?

Oz Shemesh • Aug 16 '19

Hi Nishant,

Unfortunately I was not able to solve it.
I am not sure about earlier versions but I went over many possible suggestions, none of them worked...
Any additional idea that I can try?

Thanks for the reply

Rajendran Nadar • Nov 23 '19

Use this config to fix the issue

config.module.rules.push(
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                // Disable reading babel configuration
                babelrc: false,
                configFile: false,

                // The configration for compilation
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react',
                    '@babel/preset-flow'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    '@babel/plugin-proposal-object-rest-spread'                  
               ]
            }
        }
    }
)

Add the above code before the return config line

Oz Shemesh • Dec 5 '19

Thanks Rajendran

i tried adding the above as part of config-overrides.js
it didn't helped.

BTW, i`ve executed 'sudo yarn add @react-native-community/google-signin'

Under the folder 'react-native-web-monorepo/packages/components'
Is that the right location?

Thanks, Oz

Oz Shemesh • Dec 5 '19

An update...
i had to add two more dev dependencies under the web module.
sudo yarn add --dev babel-loader
sudo yarn add --dev @babel/preset-flow

now i am getting different error:
/react-native-web-monorepo/node_modules/@react-native-community/google-signin/src/GoogleSigninButton.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native'.

karvulf • Aug 2 '19 • Edited

With the react-native-version 0.60.4, I have some problems with libhermes.
When starting the android-app, it crashes and I always get the message: E/SoLoader: couldn't find DSO to load: libhermes.so. Any suggestions what to do?

Edit: Fixed my problem. You have to enable hermes, so that it looks like this in your build.gradle in app:
project.ext.react = [
entryFile: "packages/mobile/index.js",
root: "../../../../",
enableHermes: true, // clean and rebuild if changing
]

Rafael Jesus Hernández Vasquez • Jan 9 '20

This works for me thanks!

Daryl Aranha • Dec 8 '21

I am unable to run android app. When I run yarn android I am getting this error.

FAILURE: Build failed with an exception.

* Where:
Script '<Project Path>/monorepo/node_modules/react-native/react.gradle' line: 34

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to notify project evaluation listener.
   > Couldn't determine CLI location. Please set `project.ext.react.cliPath` to the path of the react-native cli.js

How to update project.ext.react.cliPath path?
Can anyone suggest what changes did I miss?

Daryl Aranha • Dec 9 '21

I found it. Thank you. I needed to add cliPath inside project.ext.react in app/build.gradle

Ahmed Eid • Dec 27 '21

how did you do that, could you please add a screenshot or something ?

Daryl Aranha • Jan 23 '22

I apologies for the late response.
Basically what you need to do is go to mobile/android/app/build.gradle and update the file as show below.

...
project.ext.react = [
    ...
    root: "../../../../",
    cliPath: "../../../../node_modules/react-native"
    ...
]
...

If you want to jump right into the code then you can check out my repo, I have updated the setup.

Sergey Pushkin • Mar 26 '19 • Edited

You can run debug session from vscode with React Native Tools extension. But with monorepo its little hacky... btw, read-native run-its --project-path "./packages/mobile/ios" also work

I setup only iOS project with macos: you need to specify "runArguments": ["--project-path", "./packages/mobile/ios"] in debug task in launch.json and symlink with command:

ln -s /Users/proof666/Desktop/Projects/ShopList_new/PaperList/packages/mobile/ios  /Users/proof666/Desktop/Projects/ShopList_new/PaperList/ios

~if somebody already setup android debug, please ping me~
Update:
in vscode task for android add

...
"runArguments": ["--root", "./packages/mobile"]

Bruno Lemos • Mar 27 '19

Thanks for sharing!

Zia Ul Rehman • Jul 23 '19

Hi Bruno, thanks for the awesome detailed tutorial with all the updates. And i can see you are very active in comments also which is awesome!

Its really nice to see react's progress towards PWA and cross platform portability.

I am following this tutorial to convert our old add(on Rn 0.59) over to react-native web. I followed this tutorial and setup everything up.
Than i copied the dependencies from our mobile repo's package json to packages/components/package.json. And all other code respectively in src. Idea was to get everything running on ios in this monorepo setup and than go from there to fix whatever needs to be fixed for web.

But i am getting some errors like first i got:

bundling failed: Error: Unable to resolve module path from /Users/..../projec/node_modules/react-native-dotenv/index.js: Module path does not exist in the Haste module map

Fixed it by adding path explicitly in dev-dependencies. Than started getting error:

bundling failed: Error: While trying to resolve module fs from file /Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package /Users/..../projec/node_modules/fs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files exist

I am not very experienced in react and react-native, i am mainly on Ruby on Rails, so maybe this is something basic which i am getting wrong.
I found: stackoverflow.com/a/39046690/4738391 which suggests omething wrong with node environment or something. But i am a bit confused, i mean i can add these dependencies etc but it should work out of the box for mobile, as it was working fine in previous repo.

Any help will be greatly appreciated. Thanks.

Zia Ul Rehman • Jul 25 '19 • Edited

This was a stupid error, i had forgot to add 'module:react-native-dotenv' in my babel config presets. Adding it solved the problem and i got my mobile app compiled. There were some imports fixes etc in scode needed to be done to run app successfully. But that is done.

But now next errors(on web), i posted this SO question: stackoverflow.com/questions/571953...

If i can get any help, would be great.

Zia Ul Rehman • Jul 23 '19

After cache clean and everything, second error changed to:
error: bundling failed: Error: While trying to resolve module fs from file /Users/..../projec/node_modules/babel-plugin-dotenv/index.js, the package /Users/..../projec/node_modules/fs/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/..../projec/node_modules/fs/index.js. Indeed, none of these files exist

Colter McQuay • Dec 30 '19

I was running into the same issue and I think I figured out the cause of the problem. I unfortunately don't know how to fix it. It seems to be related to react-native-cli not being able to locate the metro and babel configs because it's being run from the root of the repository.

Since they aren't found, when the bundler comes across react-native-dotenv within a source file it will actually import the source file rather than using the replacement provided by the babel plugin.

Bruno Lemos • Jul 23 '19 • Edited

Please remove all node_modules folders and .lock files from your project, clear all caches (xcode, —reset-cache, etc), and try following the steps again. Maybe you missed something.

You shouldn’t remove the dependencies from mobile. Check this repo source code and commit diffs: github.com/brunolemos/react-native...

After running yarn to install dependencies, check the contents of packages/mobile/node_modules, and let me know which folders it has. It shouldn’t have any, all should be in the root node_modules.

If nothing works, maybe they released a new version of the cli that broke something, in that case you can use a previous version or investigate the change.

Zia Ul Rehman • Jul 23 '19 • Edited

I think i was not clear in my comment, actually it did work with barebone setup as described in this post. It was working perfectly, than i started exporting my mobile code, that's when it exploded.

I wanted to just have mobile app running as it is in this architecture. Than move un-convertable code to mobile and write replacement code for only those in web. But my mobile app is not running with these errors.

I did all the cache clear and everything but same issue. mobile repo's node_modules folder have 2 folder, .bin and metro-react-native-babel-preset.

I am pretty sure it is some of my mobile dependency. I don't know if i should share the package json etc and everything here. It will just get annoyingly long here.

Let me know if i should share that here, or i can reach you through some other medium.

I do understand this blog post is like THE go to blog right now for new projects which want to take this route. but porting old projects is a lot more messy. If i do succeed in porting my app on this architecture and support web, i will leave pointers and can also write an extension of this blog post.

Comment deleted

Bruno Lemos • Mar 7 '19

Nice, thanks for the mention in the article!

Were you able to share code between web and mobile using nohoist? I've had problems with this approach in the past but I don't remember exactly why. It has some downsides but it's definitely much simpler to setup. Everything working well for you this way?

Zhigang Fang • Apr 19 '19

No, sry for taking so long to reply.

Our yarn workspace is just set up to include app / backend / website

And they do not share components.

The problem is that metro does not support symbol links. Which is what yarn workspace uses.

github.com/facebook/metro/issues/1

Shubham Sinha • Mar 7 '19 • Edited

scripts: {
  "start": "node ../../node_modules/react-native/local-cli/cli.js start --projectRoot ../../"
}

throws error error: unknown option `--projectRoot'

On modifying --projectRoot to --projectRoots I get following error

Loading dependency graph...jest-haste-map: Watchman crawl failed. Retrying once with node crawler.

Bruno Lemos • Mar 7 '19 • Edited

You mean when trying to use jest? If not please check the repository to see what you made differently.

Shubham Sinha • Mar 7 '19

Sorry, I modified my comment. I am getting an error with --projectRoot. I was trying on my own repo. I'll be cloning your repo and then let you know if the problem persists.

Bruno Lemos • Mar 7 '19

I'm using the unreleased react-native 0.59 in this tutorial, some dependencies got a major bump so maybe there are some differences if you are using an older version.

AsmaGithub • Jul 29 '19

did you find an alternative for --projectRoot please ?

Marc Schipperheyn • Mar 29 '19 • Edited

Having some troubles getting react-native-web hoisted and getting everything to run. It insists on staying inside the web/node_modules together with fbjs and react. I do have some nohoist packages that are linked in the mobile project. I verified all the version numbers. They seem to be aligned

Tried various cleaning actions. I'm getting errors from hoisted elements not being able to find react-native-web shouldn't metro-react-native-babel-preset be implemented as a preset in the web project? This seems to be indicated in react-native-web examples

Bruno Lemos • Mar 29 '19

You need to use the exact same version of react between all package.json that have it.

Marc Schipperheyn • Apr 2 '19

Number of issues here:
Changing jsBundleURLForBundleRoot:@"index" to jsBundleURLForBundleRoot:@"packages/mobile/index" leads to resolution errors
Leaving it as it is, leads to @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map. It looks like the packages/mobile/index reference is the way to go but that the react-native command uses packages/mobile as the ref location instead of the project root. From the root I tried two commands (RN 0.59):

mobile: start => ../../node_modules/.bin/react-native start --reset-cache
root: start => cd ./packages/mobile && yarn start
root: start => yarn workspace mobile start

In both cases, I get "Unable to resolve module ./packages/mobile/index from /Users/me/projects/rnw/packages/mobile/.
[...]
`Indeed, none of these files exist:

/Users/me/projects/rnw/packages/mobile/packages/mobile/index

Notice the duplicate packages/mobile reference

Marc Schipperheyn • Apr 6 '19

Ok, I identified the problem. The packages/mobile/metro.config.js is not processed. The projectRoot remains packages/mobile instead of ``

Anna Fröblom • Apr 13 '19

Hi,

I'm facing the same problem. Did you manage to solve why the metro.config.js wasn't processed?

Bruno Lemos • Apr 15 '19

Current solution is to set --projectRoot ../../ at the package.json start script instead of metro.config.js, like it used to be before. Not sure if it's a bug or not.

Varun Gupta • Dec 9 '20

I am able to run this setup in Dev mode on both ios and android but when I create a releaze, I get an error saying the shared package is not found because it is a symlink and metro bundler doesn't support symlink yet. Were you able to create release builds? If yes, were there any changes required?

Bruno Lemos • Dec 9 '20

ios or android? which react-native version? what's your operating system? try using the latest react-native version and maybe also try using the yarn resolutions feature to force it use the latest version of @react-native-community/cli which as of today is 5.0.1-alpha.0.

Varun Gupta • Dec 10 '20

So, I have a mobile app in production on iOS and Android that we plan to provide over the browser also. To reuse the logic code in the web app, I am putting those in shared packages managed using the yarn workspaces. Initially, I was using react-native 0.63.3 which uses react 16.13.1 for the mobile app. When I created the web app, it was using react 17.0.1. There were a couple of invalid hook call errors which happen due to conflicting versions of react. I tried no-hoisting react and react-native specific packages but that resulted in some packages under root node modules and some under the package node_modules which becomes problematic during auto-linking. So, I ended up upgrading react-native to 0.64.0-rc.1 which uses react 17.0.1. I was able to build and run the app on both iOS and Android but when I created the release build, I got some errors mainly around not able to find the shared packages since they are symlinks and metro doesn't support symlinks. I read about some workaround by providing extraNodeModules and projectRoots in metro.config.js but I kept on getting one error or the other.

I wanted to ask if you made any special changes to create release builds for your app and what are those?

After banging my head for the last few days to convert the existing app to the mono-repo, I started out creating a brand new app in a mono-repo structure, have a dummy shared package and create release builds from it and then port my code over. I am getting the below error on iOS while creating an archive. I am able to run the app in dev mode:

error: Build input file cannot be found: '/Users/varungupta/Projects/galarm-combined/node_modules/react-native/Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm' (in target 'FBReactNativeSpec' from project 'Pods')

This error doesn't appear if I create a new project and create an archive without making it into a mono-repo.

One more thing I wanted to ask is do I need to change the paths in node_modules/react-native/scripts/react_native_pods.rb and react.gradle files as they contain some references to node_modules.

Bruno Lemos • Dec 11 '20 • Edited

Do not use nohoist, this causes many problems like the issue with metro you mentioned
Make sure you use the exact same version of the dependencies between the projects (e.g. react "17.0.1", without "^" or "~")
Make sure that all your "node_modules" are empty inside the packages. The only one with dependencies should be the node_modules in the root folder. If they are not empty, you probably have dependencies with different versions. You can use yarn resolutions to fix that.
Set projectRoot in the metro config and change the entry files to packages/mobile/index as mentioned in the article
RN 0.64 is still in beta and has issues. Of the of the issues is this one about FBReactNativeSpec, you need to run "pod install" again every time after you run "yarn".
Yes you need to change all references of node_modules/react-native. Including on podfile and creating a react-native.config.js file

See this repository: github.com/brunolemos/react-native...

Varun Gupta • Dec 12 '20

Dear Bruno,

Thanks for your response. I am already doing #2 as yarn seem to update the packages without updating package.json if there are minor upgrades available. I was not aware of the yarn resolutions but that is pretty cool I do have some node_modules in my web and mobile folder which I will fix using yarn resolutions.

For setting the project root in metro.config.js, I guess I just need to set it to the dirname like projectRoot: path.resolve(dirname, '.')

For the react-native.config.js file, could you please tell me where and how it is used. I created it based on your blog instructions but I am not sure how it is used.

Also, I checked the devhub repository (great resource btw), it doesn't have a react-native.config.js file or setting a projectRoot in metro.config.js file.

Thanks again for your valuable time.

Pra3t0r5 • Aug 15 '20

Hi man, absolutely amazing tutorial, my dev team managed to get it up an running in no time.
However, we are facing two problems, one is related to babel plugins, no matter what i did, i could not add the @babel/plugin-transform-react-jsx, therefore the web package crashes:

../commons/pages/tabs/tabs.page.js
SyntaxError: /home/praetors/Projects/node/proyectoSembrar/packages/commons/pages/tabs/tabs.page.js: Support for the experimental syntax 'jsx' isn't currently enabled (16:9):

  14 | const dummyTab = () => {
  15 |     return (
> 16 |         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     |         ^
  17 |             <Text>Test</Text>
  18 |         </View>
  19 |     );

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

The other problem comes with react-native-vector-icons: ^7.0.0, we added the:

apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle"

but we could not get them to render in android, instead it shows the crossed box, here is how we implemented it:

import Icon from 'react-native-vector-icons/Ionicons';

export default function Tabs() {
    return (
        <Tab.Navigator
           //...
            screenOptions={({ route }) => ({
                tabBarIcon: ({
                    focused, color, size
                }) => {
                    let iconName;
                    switch (route.name) {
                        case 'Inicio':
                            iconName = focused ? 'ios-home' : 'ios-home-outline';
                            break;
                    //...
                    }
                    return <Icon name={iconName} size={size} color={color} />;
                }
            })}>
            <Tab.Screen name="Inicio" component={Home} />
             //...
        </Tab.Navigator>
    )
}

Andrei Melo • Oct 30 '20

try this, please see the following :
step

npm install @babel/plugin-transform-react-jsx or yarn add @babel/plugin-transform-react-jsx
go to config-overrides.js : Then add the package installed to plugins...
please see below,

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
resolveApp('src'),
resolveApp('../common/src'),
resolveApp('../../node_modules/@react-navigation'),
resolveApp('../../node_modules/react-navigation'),
resolveApp('../../node_modules/react-native-gesture-handler'),
resolveApp('../../node_modules/react-native-screens'),
];

module.exports = function override(config, env){
config.module.rules.push({
test : /.(js|mjs|tsx|ts)$/,
exclude : /@babel(?:\/|\{1,2})runtime/,
use : {
loader : 'babel-loader',
options : {
babelrc : false,
configFile : false,
compact : false,
// The configration for compilation
presets : [
[
'module:metro-react-native-babel-preset',
], // Add this line,
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory : true,
plugins : [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-flow-strip-types',
'@babel/plugin-transform-react-jsx'
[
'module-resolver',
{
alias : {
'^react-native$' : 'react-native-web',
},
},
],
],
},
},
});
return config;
};

thanks

Andrei Melo • Oct 30 '20

paste it to *config-overrides.js

Nitesh Agarwal • Mar 9 '22

This JS is not valid (check module-resolver)

Prakash Ravichandran • Jul 9 '20

Hi Bruno,

Great tutorial. Thanks for sharing.

Is it possible to maintain the each platform code in 3 different repo. Already I am having iOS and Android project. Now i would like to add some modules in react_native and integrate in iOS and Android. The thing is when the iOS and Android are inside the react-native root repo that is working fine. Linking also happening. But when I separate the iOS folder and when try to install the Pod i am getting issue as "cannot find module react_native/cli" in use_native_modules.

Kindly help me.

Horsepowerbank.com • Jun 17 '20

Hey, thanks for your awesome tutorial. Just a quick question, how can we host the web version of the app? Cause it seem like it share the file inside the packages/component/src folder. I using Docker, is it mean that we need to add all files into the server?

Bruno Lemos • Jun 20 '20

The web package has a build command, and the result goes to the packages/web/dist folder. You should deploy only the dist folder.

Horsepowerbank.com • Jun 29 '20

I see.. thanks bro.. thats help a lot

Bruno Lemos • Mar 7 '19

It's possible to have native apps instead of Electron, with the same code. We can use react-native-windows and react-native-macos, for example. In a few days I'll experiment with Marzipan, a secret official Apple project to run iOS apps on the mac.

Hugo Leonardo Gomes de Sousa • Jul 7 '19

Olá bruno, baixei a versão mais recente do monorepo, mas está dando esse erro,
sabe dizer porque? e como resolver?

Loading dependency graph, done.
[1] error: bundling failed: Error: Unable to resolve module ../../../commons/reducers/ from E:\sistemasagv\appwmsmobile\app-rf\packages\components\src\screen-mobile\Reducer\index.js: The module ../../../commons/reducers/ could not be found from E:\sistemasagv\a ppwmsmobile\app-rf\packages\components\src\screen-mobile\Reducer\index.js. Indeed, none of these files exist:
[1] * E:\sistemasagv\appwmsmobile\app-rf\packages\components\commons\reducers(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
[1] * E:\sistemasagv\appwmsmobile\app-rf\packages\components\commons\reducers\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
[1] at ModuleResolver.resolveDependency (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
[1] at ResolutionRequest.resolveDependency (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
[1] at DependencyGraph.resolveDependency (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
[1] at Object.resolve (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\lib\transformHelpers.js:261:42)
[1] at dependencies.map.result (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
[1] at Array.map ()
[1] at resolveDependencies (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
[1] at E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
[1] at Generator.next ()
at asyncGeneratorStep (E:\sistemasagv\appwmsmobile\app-rf\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

Mark Anthony B. Dungo • Jul 1 '19

Hello Bruno,

1.) Now that Expo for Web was released, what would you recommend?
To setup a monorepo for Mobile and Web packages or to use Expo for Web?
There's also a React Native Web CLI called create-react-native-web-app.

2.) And also could you give some guide how to setup Next.js as a package of this monorepo? Upon running yarn create next-app --example with-react-native-web next, here's the response:

PS C:\Users\USERNAME\Documents\Node.js Projects\Samples\myprojectname\packages> yarn create next-app --example with-react-native-web next
yarn create v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@0.5.9" with binaries:
      - create-next-app
- Downloading files for with-react-native-web example[before-after-hook]: "Hook()" repurposing warning, use "Hook.Collection()". Read more: https://git.io/upgrade-before-after-hook-to-1.4
DEPRECATED (@octokit/rest): `repos.getContent()` is deprecated, use `repos.getContents()`
> Success! Downloaded with-react-native-web files for next

  Installing npm modules:
    react
    react-dom
    next

> Error! Failed to install react, react-dom, next, try again.
undefined
(node:12428) UnhandledPromiseRejectionWarning: Error: yarn installation failed
    at C:\Users\USERNAME\AppData\Local\Yarn\Data\global\node_modules\create-next-app\lib\utils\install.js:39:23
    at processTicksAndRejections (internal/process/task_queues.js:82:5)
(node:12428) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:12428) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are
not handled will terminate the Node.js process with a non-zero exit code.
Done in 17.47s.

Thanks for any response!

Bruno Lemos • Jul 2 '19

Expo has it's own set of limitations, e.g. I've been using hooks in production since november 2018 and it only arrived in expo may 2019. If you are ok using expo go for it! They seem to be doing great progress.

About next, I don't know what the issue is, try creating the project separately and copy pasting the folder into the monorepo. Otherwise open an issue with them about monorepo support.

Oz Shemesh • Jul 21 '19

Thanks a lot for this great tutorial.

i`ve probably missing it in the comments but i am not sure what pakage.json i should use for adding additional dependencies.
should i only update the root /package.json
or individually also

packages/components/package.json
packages/mobile/package.json
packages/web/package.json

in addition, only yarn should be used?

Thanks again.

Bruno Lemos • Jul 21 '19

Yes only yarn because npm doesn’t have the “workspaces” feature.

You’ll add the dependencies in the package that’s using them. Most of it will probably be in the components. Don’t add at the root unless it’s things like lint etc.

Secretmapper • Apr 20 '19

Hello Bruno, awesome tutorial as I mentioned!

I have another question though, and it's related to builds. I've set the build phase as Release (so I can run it without a server) but I get an error in Xcode:

File /Users/--/Library/Developer/Xcode/DerivedData/project-name/Build/Products/Release-iphoneos/project-name.app/main.jsbundle does not exist. This must be a bug with'

Is there anything special I need to set here to get Xcode to build it?

Bruno Lemos • Apr 20 '19

No, this error is unrelated to this tutorial. Try cleaning the caches, e.g. Product > Clean and yarn start --reset-cache.

Secretmapper • Apr 21 '19

Thank you cheers! I had thought it was something related to the workspace edits. Turns out there's an issue in react-native about github.com/facebook/react-native/i....

Gabriel Bull • Oct 17 '19

So how did you fix it? I have the same issue. The GitHub issue link you provided is not working for me :-/

Mark Anthony B. Dungo • Aug 14 '19 • Edited

Sir, will createBrowserApp(switchNavigator, { history: 'browser' }) work when I host a React Native Web app on GitHub Pages to have such these URLs:

username.github.io/Home
username.github.io/Links
username.github.io/Settings

Is it possible on GitHub Pages with React Native Web?

Eric Lifs • Jun 20 '20

Thanks Bruno for this awesome post!! It was the only way I was able to make react-native work within a monorepo structure.

Currently I am working on a web + ios + tvos app and I was wondering how should I configure the tvos app since it react-native relies on npm:react-native-tvos@0.62.2-0. Following your tutorial I have:

1) Added 'react-native' and 'react-native/**' into tv package.json noHoist in order to get the react-native stored within the tv package and not use the ios hoisted one.

2) Use your metro.config.js configuration but also added the extraNodeModules in order to override the react-native alias to use the tv package one:

resolver: {
    extraNodeModules: {
      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
    },
  }

3) Change the AppDelegate.m file with your configuration
4) Within the Bundle React Native code and Images section I have added the EXTRA_PACKAGER_ARGS but kept the react-native path as it is in order to use the tv package one:

export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS="--entry-file packages/tv/index.js"
../node_modules/react-native/scripts/react-native-xcode.sh

Is this okay? Am I missing something else?

Thank you very much, your post is awesome <3!

js • Jul 18 '20

Hi,

I downloaded the repo, I am able to run the web app, but I have issue with ios
Can you tell me why I am getting the below issue, I am trying to do pod install inside my ios folder

aal003110384:ios reerer89989823$ pod install

[!] Invalid Podfile file: cannot load such file -- /Users/reerer89989823/Desktop/codebase/Shipment/react-native-web-monorepo-master/packages/mobile/node_modules/@react-native-community/cli-platform-ios/native_modules.

# from /Users/reerer89989823/Desktop/codebase/Shipment/react-native-web-monorepo-master/packages/mobile/ios/Podfile:2
# -------------------------------------------
# platform :ios, '9.0'

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
#

# -------------------------------------------

Jason • Jan 7 '20

When I use "yarn start", my web app works pretty much exactly the way it should. If I use "yarn build", and then "serve -s build", however, it gives me an error for createBrowserApp:

AppNavigator.ts:99 Uncaught TypeError: Object(...) is not a function

AppNavigator.ts:99 is:

const LoginNavigator = Platform.OS === 'web' ? createBrowserApp(loginStackNavigator) : createAppContainer(loginStackNavigator)

react-navigation, @react-navigation, react-native-gesture-handler, react-native-reanimated, react-native-screens, react-navigation-stack, and @react-navigation/web are all in my main project's package.json, and "brought over" via

resolveApp('../../node_modules/react-navigation'),

I can't figure out why it works via "yarn start", but not on "yarn build". I've spent a while searching, and I can't seem to find an answer. Anyone have any ideas?

Michael Stelly • Mar 13 '20

I recently worked on a project which used monorepo. It was my first introduction to it. I must say, I was not impressed. But hear me out. I've worked in the mobile app industry for over 10 years. I've seen architectures come and go.

Conceptually, I understand the use case for implementing such a design. In practice, I found it unintuitive, incredibly confusing, and slowed my project onboarding process to a crawl. I had six weeks to perform the job for which I was hired. The first week was spent wrapping my head around how to simply walk through the workflows. That cost the client a lot of money and reduced my available billable time by 20%. Imagine what would happen if the client had to onboard a less-experienced dev.

To be fair, there are a lot of unknowns here. It was my first hands-on with the design. Maybe the client's architect built it incorrectly? Would my experience have improved had the repo been better documented, i.e. had any doc at all? I don't really know.

I'm off that project and on my way to others. I will withhold judgment for now because this project could've been a fluke. I just wanted to interject my experience. For any non-trivial project, it's important for readers to remember that the business drives technology decisions. If a monorepo design pattern solves the particular business requirement, then I hope this tutorial helps you jumpstart your project.

Oluwakorede Fashokun • Mar 6 '19

Thanks, Bruno! I really needed this. Can this be applied to Lerna instead of Yarn Workspaces?

Bruno Lemos • Mar 7 '19 • Edited

I've never used Lerna because Yarn Workspaces does all I need, so I don't know the answer. But let us know! 🙌

BrandNew • Mar 15 '19

Hello,

Thank you so much for the article.

I have pulled down your repo, installed the deps and ran it. Metro bundler runs well but I do not see anything on the emulators.

Is there a step that I am missing?

Thanks

Siya

Bruno Lemos • Mar 16 '19

To run the mobile apps you can open Xcode/Android Studio and press the Run button.

BrandNew • Mar 16 '19

Yeah, I realised that is how you were running it. I am a fan of the terminal, so I prefer that way. But for some reason I thought that running the bundler would mount the project into the emulator. Thank you so much for the article, I found it very helpful.

How did you configure auto reloading?

Thanks

Arun Menon • Feb 14 '20 • Edited

Thanks for the post! I have been able to get it going without any problems using the outlined steps.

I am facing problems however when i try to install 3rd party dependencies after getting the initial setup going. It will be great if the post could be updated with steps on how to install dependencies post setup.

For example i wanted to add react-native-gesture-handler and a few other native libraries but somehow i keep getting some issue or the other. I tried yarn workspace components add react-native-gesture-handler and it installs but i am unable to use it since i get IDE errors about some constants not being found. Similar issues with other libraries as well. Auto-linking somehow doesn't seem to reflect.

Should jettifier be installed and added in the post-install of package.json(and if so which package.json - root or the ones inside the packages) if running commands like yarn workspace mobile start? Basically some tips on how to add 3rd party libraries for both mobile and web will really help. Thanks again for the post - its my first attempt at a monorepo and this post really helped iron out all my initial doubts but i am also obviously making some newbie/rookie mistakes so there are some stumbling blocks to really get started with it.

Arun Menon • Feb 14 '20

Ok. so with a few more attempts i got it going for a critical dependency in my packages. I am using the versatile Navigation router (github.com/grahammendick/navigation) for all the routing requirements in all my packages, across all the router's supported platforms (which is basically everything web, mobile, native etc).

After following all the steps in the post i initially installed the router into my equivalent of the components package. I got it to work for the web but, for the react-native implementation, the navigation router has native code for Android and IoS and somehow it wasn't getting auto-linked. The solution was to simply install it to my equivalent of the mobile package and everything seems good! im still not sure of the jettifer post-install step but it should not be an issue i think.

Zia Ul Rehman • Aug 2 '19

I want to discuss something we are facing after getting a great kickstart from this post. That is responsiveness problem.

We have made significant progress in our journey of converting existing RN apps to RNW. In-fact i am now writing a series of articles on my experience, first one was written last weekend and i plan on writing next this weekend. Here is the first part:
medium.com/@ziaulrehman/part-1-con...

For my use case, i am using a similar approach to this library: github.com/calinortan/react-getscreen it basically adds event handlers which trigger a state change hence re-render whenever screen size crosses one of pre-defined(configurable) widths.
This allows us to add conditional styles etc on some elements, or even hide/show some elements conditionally. This along with Platform.OS === 'web' is basically all we are doing for now. It doesn't look very clean but it works and gives us responsive design.

What techniques have you used(if any) for this? What worked best? And what would you suggest. Thanks.

Bruno Lemos • Aug 2 '19

I have a custom hook that checks the app dimensions and returns if it’s small/medium/large: github.com/devhubapp/devhub/blob/m...

Besides that, make sure to always use flexbox and percentages where makes sense, not fixed widths in pixels.

Zia Ul Rehman • Aug 3 '19

Yeah similar approach with HOC for class components. I actually just released a small RN component for this(actually my first npm package). npmjs.com/package/react-native-get...

Mikael Sand • Mar 7 '19

Nice article, I have a bit similar example for code sharing between react-native and next.js with react-native-web here: infinidraw.live/

Source: github.com/msand/InfiniDraw
Expo version: github.com/msand/InfiniDrawExpo

But, it's not really clean architecturally, it's a single project rather than separate folders & package.json for web and native, causing some tradeoffs. Been thinking should slit it up a bit similar to this.

Anuraag Gupta • Mar 8 '20 • Edited

I tried to set up monorepo 2-3 months ago. Faced lots of errors with React Native. I have been searching for any decent material. I always suspected issue to be of old articles as the dependencies have changed. So the steps stated in the article or video were always not working for me.

I faced same stuff with your article. Tried it almost a year after you writing it.

I faced stackoverflow.com/questions/473994... issues everytime I tried to run the mobile app. This particular issue was extremely nasty github.com/facebook/react-native/i.... I never hated another library so much as React Native because of all this shit. Or some other module not popping up. I managed to get mobile app work only just once. But I couldn't get it to work when I imported the app from Components package. So I felt somehow my monorepo was not at all working. Almost all the stack overflow or github issues stated only few repeated solutions like clear cache, delete node_modules are re run it. In my scenario situation seemed to be deteoriating. Atleast mobile app was connecting to simulator, then after trying out these solutions it started giving the error of Metro server of not being up and running. Which didn't make sense simulator was able to make call metro server.

Then I thought atleast web would work but it didn't either it always gave me this error -
Module not found: Can't resolve 'react-native/Libraries/NewAppScreen. Because App.js in components package was using this library in updated version of React-Native CLI. I followed all the steps diligently I even found some more steps were required as well.

I don't know how you managed to get it to work. I really envy that but I have wasted too much time to just get the infrastructure setup managed to do total zero work. I worry if I try to integrate other libraries I'll face the same issues.

Don Siu • Apr 24 '20

Just remove all the dummy components from react-native/Libraries/NewAppScreen. on the app.js screen. It will then work

Wasi Sadman • Nov 20 '19

HELP!!!!!!

I have implemented react-navigation-drawer in my project. Just using two menu items there
( HomeScreen & ProfileScreen )

When the screen loaded first time ProfileScreen works perfectly but Second time it shows blank white screen on the browser. If I refresh screen then repeat the previous flow. First time works second time blank white screen.

react-navigation-drawer issue link

The drawer not closing automatically on the browser ... but on mobile it works fine.
Can you please give me any reference where i can separate the style of web and mobile?

bantingGamer • Mar 11 '19 • Edited

when you say, "You can now run the Android app! 💙" what does that mean? what steps do i take to run the app?

Bruno Lemos • Mar 11 '19

There is a "Run" green button inside Android Studio that will open the app inside an emulator.

bantingGamer • Mar 11 '19

Thank you so much. I just wanted to make sure that im not missing anything because I couldn't get "react-native run-android" to work.

Sebastien Cesbron • Jun 13 '19

You have several options to make react-native commands work.

in the node_modules directory of your package make a symlink to the node_modules/react-native directory from the root of the project because react-native-cli need to find cli.js in node_modules/react-native.
prefix your command with yarn or npm : yarn react-native run-android
in your package.json file add a script "run-android": "react-native run-android" and then use yarn run-android

Amin Latifi • Jul 20 '19

I used second option. However, I am using third party libraries and it cannot resolve these dependencies!

Could not resolve project :react-native-navigation.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-navigation: None of the consumable configurations have attributes.
Could not resolve project :react-native-vector-icons.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-vector-icons: None of the consumable configurations have attributes.

Amin Latifi • Jul 20 '19

Solved,
I changed projectDir attribute of library in android/settings.gradle

Jose Guilherme • Apr 20 '20 • Edited

Olá Bruno, segui seu tutorial e tudo esta funcionado tirando a parte do android, no ios eu consigo rodar o projeto normalmente, ja instalei vários pacotes, e continua funcionando. no android estou rodando o comando react-native run-android e ele não copila, da sempre um erro diferente, peguei o seu repositório e comparei, acho que fiz todo o passo a passo e não esta dando certo, voce pode me dar uma ajuda?

Thiago Ferolla • Aug 23 '19

Hey Bruno, don't know if you can't help me but I've followed the post to setup the monorepo. Almost everything worked, web is working well, but I'm having trouble with the React Native part.

I think the problem is that some dependencies are being installed on the workspace node_modules instead of the project's root node_modules so some dependencias are in the root and others are inside the project - almost as if it was set to no-hoist these dependencies (it was not).

Do you any clue why this is happening?

Thanks for writing the post

Walid • May 16 '19

Hey, I'm looking at your articles(very comprehensive), among others, and trying to understand the need to add CRA to the stack, here. Would using react-native and react-native-web not do the trick?

Also, changing the import statements in node_modules means you check in your node_modules? Or you make the edits every time you yarn install? (or, i missed smth with yarn workspaces 🤔?)

Thanks for your time and for the article!

Bruno Lemos • Jun 4 '19

CRA makes things easier, but it is not required.

It doesn't make any change inside node_modules, only on normal project files.

sasarivera • May 29 '20

Hi.

If I understand correctly, the React native and react dependencies should be installed in the root node_modules to avoid having multiples version of the packages in the app.

Does this apply to every dependencies the packages share? (ex. react-native-elements)

Thanks for the guide!

Bruno Lemos • Jun 3 '20 • Edited

Yes, all dependencies should be installed at the root node_modules, this way it's less likely you'll face problems. Please note that this doesn't mean putting it in the root package.json -- you put the dependencies at all the packages/xxx/package.json that use this dependency.

mikeThurmond • Oct 4 '19

Bruno, this is a great tutorial. I have been able to successfully migrate an existing react native project to the mono repository and can run and compile the mobile app for android. However, I am having issues building the web portion of the project. Any tips on how to debug? I am getting the project to start to compile but get in error Attempted import error: 'initStore' is not exported from '../store'. I have altered the index.js for web to pull in the components package.

Thanks

Rajat • Apr 10 '19 • Edited

Hi, after going through the steps listed under "ios changes" above, when i run "yarn workspace mobile start" it does launch the app in the simulator but i get a red screen with error (attaching image). Please help

Thien Thai Technology Co.,Ltd • Aug 18 '20

root package.json should add "," to end of "workspaces":{...}
like this:
{
"name": "myprojectname",
"private": true,
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": []
},
"dependencies": {
"react-native": "0.61.3"
}
}

msvargas • Oct 25 '19

Hi, thanks for this tutorial, monorepo is amazing, however how could rename project "myprojectname" to "mycustomname" properly?

Other hand side, for windows to start android studio, add enviroment var to PATH var list:
...
C:\Program Files\Android\Android Studio\bin
...
and replace:

"studio": "START /B studio64 android",

Thanks

Horsepowerbank.com • Feb 28 '20

Hey bro,thanks for the awesome tutorial..But I cant run the project in a real android device.

warn Failed to connect to development server using "adb reverse": spawnSync adb ENOENT
info Starting the app...

have do u any idea??

Rett Carraway • Mar 13 '19

Is the --projectRoot flag a metro config option? trying to set this up with the 0.59.0 release and running into haste map resolution issues for @babel/runtime

Bruno Lemos • Mar 13 '19

Please refresh the page, I've updated the tutorial a few minutes ago with the new step related to projectRoot. You don't set --projectRoot anymore, you add it to metro.config.js.

Rett Carraway • Mar 13 '19

ha - thank you. i had just made and tested the same update and got it working. cheers!

Elie • Dec 2 '19

Is it possible to incrementally add rnw to an existing project?
The current project set up is a 3 package monorepo with redux being the only code that is shared. The goal is to share more code so I’m thinking to create a 4th package that only contains react native web components and is imported by the react and react native packages. Do you see any issues with this approach or pieces not working?

martigasco • Jan 13 '20

Hi! I followed the tutorial and everything works as expected, but I'm having trouble when adding NativeBase, as it makes me add the babel plugin @babel/plugin-proposal-class-properties, which I haven't had success adding since the yarn workspace pattern still confuses me a little bit.

Where should I install the dev dependency? And how should I enable the plugin? In config-overrides.js?

Thank you so much!

anija • Nov 11 '19 • Edited

Hi, first of all: thank you, thank you so much for the guide, it was the only way, for me, to correctly setup my project.
Then, i've two suggestions:

1) The guide talks about sharing the "components", so i was fearing i had to reqrite all the routing, sagas, redux, etc, etc part for web. Instead i found the project share the whole app, so maybe "components" is not the perfect word here?

2) I had to add some components that, to work on web, required to use another custom web component and add the alias to webpack (es: react-native-linear-gradient/react-native-web-linear-gradient).
I used customize-cra (github.com/arackaf/customize-cra) but it took me some time to port the actual webpack's override i had (from this guide) to the customize-cra one with the alias. Don't you think it would be nice to use customize-cra on this guide? Or maybe just explain a way to create the alias without the customize-cra module?

Thank you for the great job.

Comment deleted

bantingGamer • Mar 13 '19 • Edited

HELP! this is the 6th time i have tried to replicate this tutorial, but something changed and i cannot replicate this tutorial anymore. i cannot get past the first time you are testing android studio. I remember something like --version react-native@next that is now missing from this tutorial. and now i cannot replicate it at all some one please help.

the error reads "Unable to resolve module ./packages/mobile/index"

bantingGamer • Mar 13 '19

how many changes occurrences of node_modules/react-native/ are you replacing with ../../node_modules/react-native/ vscode picks up 26 places where i change it. is this correct?

bantingGamer • Mar 13 '19 • Edited

i cannot get it to work please assist.
Error: Unable to resolve module ./packages/mobile/index from E:\2019_PROJECTS\moco-messenger-project\code\repo\wepay4\packages\mobile/.: The module ./packages/mobile/index could not be found from E:\2019_PROJECTS\moco-messenger-project\code\repo\wepay4\packages\mobile/..

immortalx • Apr 24 '19

Amazing work, congratulations!
Did you consider using react-navigation for web and native or react-router just for web?
What made you skip those options?

Thank you

Bruno Lemos • Apr 24 '19

React Navigation v3 wasn't available yet, v2 didn't work very well on web. I may use it on next projects if it is better now.

immortalx • Apr 24 '19

I'm gonna check v3, thank you!

shokoofa-ghods • Feb 23 '21

hi Bruno , hope you're doing well
I just tried to set up this tutorial step by step but after I added >>config-overrides.js file in packages/web and run yarn start inside packages/web I got this error:

yarn run v1.17.3
$ react-app-rewired start
Cannot read property 'oneOf' of undefined
error Command failed with exit code 1.

Nishant Koli • Sep 3 '19 • Edited

Hi Bruno, In the DevHub app for the web or windows, how did you get multiple screens to fit in parallel (Side by Side) ? Can you point me in the correct direction.

I tried reading the code but could not understand it as I have no idea how electron works with React-Native. Anything would help.

Also, a bigg thank you for updating this tutorial.

Bruno Lemos • Sep 4 '19

If you are talking about the columns, they aren't "multiple screens" in parallel, it's just an horizontal FlatList component. About modals and other navigation components, I wrote from scratch, since I'm not using any navigation library (I may use some soon).

BigEgu • Jul 22 '19

I've believe that the monorepo was installed correctly react-native was installed in the root directory. What confused me was this step "Open your favorite editor and use the Search & Replace feature to replace all occurrences of node_modules/react-native/ with ../../node_modules/react-native/". I'm over here like what occurrences? Where exactly are the occurrences? In what files? Any help, please and thank you.

Marc Schipperheyn • Mar 29 '19

My package manager responds to http://localhost:8081/packages/mobile/index.js but gives a 404 on http://localhost:8081/packages/mobile/index. Any ideas?

Marc Schipperheyn • Mar 29 '19 • Edited

I also see this error Error: Unable to resolve module ./packages/mobile/index from /Users/boo/project/packages/mobile/.: The module ./packages/mobile/index could not be found from /Users/boo/project/packages/mobile/.

Indeed, none of these files exist:
  * /Users/boo/project/packages/mobile/packages/mobile/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

There seems to be a path set wrong. But it all looks ok at the code level

Chrıs Seelus • Mar 7 '19

Nice article, thanks!

Any more info on „If you use expo, there may be some news coming to you soon“? 😇

Bruno Lemos • Mar 7 '19

I believe they are about to release built-in web support soon, but I have no insider information, it's just an impression I had after seeing some tweets from their team members. Also some of their dependencies recently got web support merged. You can ask them for more details: twitter.com/Baconbrix/status/10983...

Chrıs Seelus • Mar 7 '19

Awesome, I think you might be on to something here 🧐

Akshay Kadam (A2K) • Mar 12 '19

He's right 👉 expoweb.netlify.com/

sagarmh • Sep 1 '20

Hey Bruno how are you?

I am facing issue

src/index.tsx:3:21 - error TS2307: Cannot find module 'components/src/App'.

import { App } from 'components/src/App'

I have downloaded your code as it is and even tried the above process multiple time but still facing the same issue.

Ricardo German Fretes • Sep 25 '19

Hi, I have a question that I cannot grasp , where is the rule that allows to have different environments files? .web , .android , .ios, .native , etc and being selected auto-magically ?

Bruno Lemos • Sep 26 '19

This is handled by react-native and create-react-app.

Ricardo German Fretes • Sep 26 '19

oh sorry, My bad !
I've just found it :
facebook.github.io/react-native/do...

thanks for the quick response :)

Kay Gosho • Jul 8 '19

Thank you for the great article, Bruno!

Shahzad Mirza • Dec 18 '19

Hey Bruno,

Thank you mate for this awesome article to solve monorepo solution.

I also created a repo for sharing code between two react native apps using JavaScript support only. May be it will be helpful for others who is looking for same case like mine.

ReactNativeMonorepoApps

Jozef Repan • Jul 5 '19

Is it any chance this will work with RN 0.6? There is a problem with --projectRoot param, as 0.6 doesn't recognize this parameter. Checked your GH repository, looks like you are still working with 0.59

Bruno Lemos • Nov 3 '19

Thanks! 🙌

Eugene Ross 🤙🏻 • Mar 7 '19

This is fantastic! Now let's see it with Next.js!

Bruno Lemos • Mar 7 '19

Next.js has an official example using react-native-web, check it out: github.com/zeit/next.js/tree/maste...

mustHASHman • Feb 19 '22

I wish there was a recent version of this repo.

Jack • Nov 10 '20

I couldn't get this worked in 3 days so I'm gonna post some of my stuck here.

abish396 • May 29 '20

Hi Bruno, does this repo also works for microservices architecture?

TrueLecter • Sep 30 '19

Great article, thanks! Really helped me to transform existing project to monorepo. Except one babel plugin. Any thoughts on how to get babel-plugin-module-resolver working with your structure?

Boss A • Mar 7 '19

Can we achieve this by using npm?

Bruno Lemos • Mar 7 '19

No, Workspaces is a feature available on Yarn but not on the npm cli, afaik.

JsonWrl • Mar 7 '19

Thanks Bruno , Can we use react-native run-ios or android at packages/mobile folder ? I want to start the simulator .

Bruno Lemos • Mar 7 '19 • Edited

Yes you can, check the readme: github.com/brunolemos/react-native...

Marc Schipperheyn • Mar 28 '19

I wonder how you rate the viability of using RNW in production with RN0.59, given that the current supported version is 0.55 with 0.57 under construction

Bruno Lemos • Mar 28 '19

I've been using it on DevHub with no problem. What it means is that the javascript code running on the web is the one from rn-0.55, not rn-0.57. This will start to become an issue when react-native remove some components, for example, so react-native-web will need to stay up to date.

XpoLog • Mar 7 '19

Thanks

Secretmapper • Apr 13 '19 • Edited

Any chance of an update with integrating Storybook?

Bruno Lemos • Apr 13 '19

No but it should just work if you follow their react native guide: storybook.js.org/docs/guides/guide...

medium.com/@agent_hunt/storybook-s...

Abhijith Vijayan • Jun 21 '19

react-native gets installed on packages/mobile/node_modules, even though monorepo dependencies share the same version.

Bruno Lemos • Jun 25 '19

I could not reproduce. Check the versions of all packages again, remove the "^" from the start of them. You can fork this instead: github.com/brunolemos/react-native...

sinasadeghi83 • Aug 23 '19

I have a problem with build android: Text must not be null or empty in react native 0.60 build error

zach zhao • Dec 20 '19

it's a shame that I can't see devhub source code again. seems what i can see only is the landing page code ..