I using Docker for hosting. Since the react native app is sharing the code with the mobile app, so in this case,how can I host the web app in Docker?

Any help is much appreciated

Following the instructions for updating the RN CLI in the auto-linking docs as recommended in react-native-community/cli#537-comment seems to be sufficient to fix auto-linking for Android!

Hi I'm running into declartion file issues with npm/yarn imports - is there a way to avoid this or do I have to manually create these for them to work?

Hi there,

Thanks so much for this monorepo/tutorial!

I'm having issues with building the android app. When I hit the run button in Android Studio, the build fails with this message:

/Users/joshua/se/UserServices/UserRNApp/node_modules/@react-native-community/async-storage/android/src/main/java/com/reactnativecommunity/asyncstorage/AsyncStorageModule.java:26: error: package com.facebook.react.module.annotations does not exist
import com.facebook.react.module.annotations.ReactModule;
                                            ^

/Users/joshua/se/UserServices/UserRNApp/node_modules/@react-native-community/async-storage/android/src/main/java/com/reactnativecommunity/asyncstorage/AsyncStorageModule.java:34: error: cannot find symbol
@ReactModule(name = AsyncStorageModule.NAME)
 ^
  symbol: class ReactModule

It's probably something to do with my configuration, but I can't seem to find the issue. Any pointers would be appreciated!

I'm using react-native 0.62.2 on a Mac.

Thanks!

Great tutorial/repo!

I'm currently using an external library that seems to use classProperties (and I would probably be using it as well)

Support for the experimental syntax 'classProperties' isn't currently enabled (26:20):

export default class AgendaView extends Component {
> 26 |   static propTypes = {

Is there any workaround right now for these types of errors?

Not sure how dependency versions should be handled in a monorepo. Are there any suggestions around which package.json to add a new library, and whether it should be duplicated across multiple files? There are 4 files:

package.json (root)
components/package.json
mobile/package.json
web/package.json

Here are a few examples that look inconsistent:

root package.json "react-native": "0.61.3"
mobile/package.json "react-native": "0.61.3"

Can we not move react-native to root?

mobile/package.json "react": "16.11.0"
web/package.json "react": "16.9.0"

Which react version are we supposed to use? Why is it not declared for root and components as well?

web/package.json "typescript": "3.6.4"
root package.json "typescript": "3.6.4"

Why is typescript not declared in components and mobile?

As a general rule what sort of dependencies should be declared in root and components package.json?

How to bring it to production?
Get the APK and Web Server?

Hi!

Right after a fresh git clone and installing the dependencies, I run into a problem: yarn ios errors.

The error is the same described in this issue,

❯ yarn ios
yarn run v1.19.2
$ yarn workspace mobile  ios
$ react-native run-ios
info Found Xcode workspace "myprojectname.xcworkspace"
info Building (using "xcodebuild -workspace myprojectname.xcworkspace -configuration Debug -scheme myprojectname -destination id=43A8B848-6352-4E0D-B0F7-453DE0F8E915 -derivedDataPath build/myprojectname")
..................
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening myprojectname.xcworkspace. Run CLI with --verbose flag for more details.

running pod install outputs the following.

❯ pod install
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin19/rbconfig.rb:229: warning: Insecure world writable dir /opt/webOS_TV_SDK/CLI/bin in PATH, mode 040777
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../../../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`
[!] Unable to find a specification for `boost-for-react-native` depended upon by `Folly`

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

Am I missing anything?

Thanks!!

My project is a hybrid project that contains both native and react-native code.
There are some DeviceEventEmitter in the project. I want to use react-native-web, what should I do?

I'm trying to follow these instructions (CLI):

How to run

$ git clone [email protected]:brunolemos/react-native-web-monorepo.git
$ cd react-native-web-monorepo
$ yarn
$ yarn workspace mobile start

Run the project

Via CLI
Open a new terminal tab
$ cd packages/mobile
$ npm un -g react-native-cli
$ npm i -g @react-native-community/cli
$ react-native run-ios or react-native run-android

I get this:

Any pointers as to why?

This is a workaround that may get fixed at any time. You may or may not need to have react-native dependency in the root package.json

To:

This is a workaround that may get fixed at any time. You need to have react-native dependency in the root package.json, otherwise you will not be able to bundle the JS.

We're using a similar setup with our self services apps/dashboards at Viasat.

Something that we found was breaking things up into "common" was a little messy. We started that way, but have moved to several different "common" views.

• Components - presentational components. An implementation of our design system with React Native Web. We hope to eventually move this to it's own library.
• Views - These could also be coined as "Universal Components." We built them at a page level. They're hooked into contexts, apollo, and all that jazz.
• Common - This is just utils, business logic, GraphQL calls, etc.

The pattern works well because there's a few things that should maybe not be shared between Web and Native. Auth flow for example works different between the two. AppAuth in native, SAML on web. Some navigation/interaction pieces also work differently. On Web, clicking some things works like an anchor tag, whereas on native, we slide something onto the stack navigator.

Not so much an "issue" as more of just an editorial for people looking to build things with this pattern.

I have an assets package for project images, after I Replace watchFolders with projectRoot, images not showing.

I have a clone of this repo and update that to react-native 0.60.x
that works good on debug but can't release that

error is
> Task :app:bundleReleaseJsAndAssets FAILED info Available platforms are: "native". If you are trying to bundle for an out-of-tree platform, it may not be installed.
Error: Bundling failed

@komaljain #49 you can look at this solution, you need to port forwarding to 8081..you can do this in chrome://inspect/devices#devices in browswer,then can run on real device ady

Originally posted by @kenchoong in #2 (comment)

`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/native-base-shoutem-theme'),
resolveApp('node_modules/react-navigation'),
resolveApp('node_modules/react-native-easy-grid'),
resolveApp('node_modules/react-native-drawer'),
resolveApp('node_modules/react-native-safe-area-view'),
resolveApp('node_modules/react-native-vector-icons'),
resolveApp('node_modules/react-native-keyboard-aware-scroll-view'),
resolveApp('node_modules/react-native-web'),
resolveApp('node_modules/react-native-tab-view'),
resolveApp('node_modules/static-container'),
]
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-proposal-class-properties'),
require.resolve('babel-plugin-react-native-web'),

].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' }),a
)
return config
}

`

Do you think it's possible to integrate "packages/web/" into /zeit/next.js/tree/master/examples/with-react-native-web in case we need a SSR for other web pages, or react-native-web navigation isn't a good fit for Next.js?

Any guide how can I setup /zeit/next.js/tree/master/examples/with-react-native-web to be one of the packages of this monorepo? Thanks!

I would like to modify a bit to make it work with expo. are there anything in mind that should be take care?

I tried to create an iOS release build.

Steps to reproduce:

1. install pods
2. open Xcode Workspace
3. edit schema to release
4. start build

Looks like the bundler doesn't know the "ios" platform => no bundle creation.
"error Invalid platform "ios" selected"

+ node /Users/userName/RN-mono/node_modules/react-native/cli.js bundle --entry-file index.js --platform ios --dev false --reset-cache --bundle-output /Users/userName/Library/Developer/Xcode/DerivedData/myprojectname-fkypvpelhfslakbkntpkeujauaii/Build/Products/Release-iphonesimulator/myprojectname.app/main.jsbundle --assets-dest /Users/userName/Library/Developer/Xcode/DerivedData/myprojectname-fkypvpelhfslakbkntpkeujauaii/Build/Products/Release-iphonesimulator/myprojectname.app
error Invalid platform "ios" selected.
info Available platforms are: "native". If you are trying to bundle for an out-of-tree platform, it may not be installed.
error Bundling failed. Run CLI with --verbose flag for more details.
Error: Bundling failed
    at buildBundle (/Users/userName/RN-mono/node_modules/@react-native-community/cli/build/commands/bundle/buildBundle.js:85:11)
    at async Command.handleAction (/Users/userName/RN-mono/node_modules/@react-native-community/cli/build/index.js:186:9)
+ [[ false != true ]]
+ [[ ! -f /Users/userName/Library/Developer/Xcode/DerivedData/myprojectname-fkypvpelhfslakbkntpkeujauaii/Build/Products/Release-iphonesimulator/myprojectname.app/main.jsbundle ]]
+ echo 'error: File /Users/userName/Library/Developer/Xcode/DerivedData/myprojectname-fkypvpelhfslakbkntpkeujauaii/Build/Products/Release-iphonesimulator/myprojectname.app/main.jsbundle does not exist. This must be a bug with'
error: File /Users/userName/Library/Developer/Xcode/DerivedData/myprojectname-fkypvpelhfslakbkntpkeujauaii/Build/Products/Release-iphonesimulator/myprojectname.app/main.jsbundle does not exist. This must be a bug with
+ echo 'React Native, please report it here: https://github.com/facebook/react-native/issues'
React Native, please report it here: https://github.com/facebook/react-native/issues

iOS debug works fine.

react-native info
info Fetching system and libraries information...
System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.04 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.2, 30.0.3
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 22.0.6917172-beta1
  IDEs:
    Android Studio: 4.1.2 4.1.2
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home//bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

react-native-web-monorepo/node_modules/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (30:8):

it isn't just:
yarn workspace web add -D @babel/plugin-syntax-export-default-from

and
config-overrides.js

  config.module.rules[2].oneOf[1].options.plugins = [
    require.resolve("babel-plugin-react-native-web"),
    require.resolve("@babel/plugin-syntax-export-default-from"),
  ].concat(config.module.rules[2].oneOf[1].options.plugins);

i'm trying to add reactnavigation https://reactnavigation.org/docs/hello-react-navigation

The Podfile of IOS looks different now:

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

platform :ios, '10.0'

target 'RNApp' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'RNAppTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

target 'RNApp-tvOS' do
  # Pods for RNApp-tvOS

  target 'RNApp-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end
end

So in order to make it work,
I needed to search & replace also
node_modules/@react-native-community with ../../node_modules/@react-native-community
and adjust the podfile
use_react_native!(:path => config["reactNativePath"])with use_react_native!(:path => './../../../node_modules/react-native/')

Hope that helps somebody else 👋

I'm trying to use react-native-vector-icons, after adding it to web, mobile and commons (your components package) and appending:

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

to the mobile/android/app/build.gradle, accordingly to the documentation, the project seems to not care and not load any icons. Instead it shows the "broken resource" crossed box.
This is my code:

import * as React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

import { Home } from '../../src/components/organisms/Home';

const Tab = createBottomTabNavigator();

const dummyTab = () => {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Test</Text>
        </View>
    );
}

export default function Tabs() {
    return (
        <Tab.Navigator
            initialRouteName="Inicio"
            backBehavior="history"
            tabBarOptions={{
                activeTintColor: 'rgb(29, 161, 242)',
                inactiveTintColor: 'rgb(136, 153, 166)',
            }}
            screenOptions={({ route }) => ({
                tabBarIcon: ({
                    focused, color, size
                }) => {
                    let iconName;
                    switch (route.name) {
                        case 'Inicio':
                            iconName = focused ? 'ios-home' : 'ios-home-outline';
                            break;
                        case 'Explorar':
                            iconName = focused ? 'ios-search' : 'ios-search-outline';
                            break;
                        case 'Notificaciones':
                            iconName = focused ? 'ios-notifications' : 'ios-notifications-outline';
                            break;
                        case 'Chats':
                            iconName = focused ? 'ios-chatbubbles' : 'ios-chatbubbles-outline';
                            break;
                    }
                    return <Icon name={iconName} size={size} color={color} />;
                }
            })}>
            <Tab.Screen name="Inicio" component={Home}/>
            <Tab.Screen name="Explorar" component={dummyTab} />
            <Tab.Screen name="Notificaciones" component={dummyTab} />
            <Tab.Screen name="Chats" component={dummyTab} />
        </Tab.Navigator>
    )
}

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'

-------------------------------------------

Hi, @brunolemos thx for the repo and your tutorial. I was really struggling with this setup until I came across your article. Quick question I see in your repo is using React Native 0.61, but react-native-web only supports React Native 0.55. Wondering if that will cause any issues down the line.

Looks like RNW has an issue to support 0.60 necolas/react-native-web#1172 (comment)

Thanks

This is great. Can't seem to get hot reloading working though? No errors, just doesn't update the UI.

Hi there
I want to know what to do if I want to separate components and libraries for each platform so that the component and the library are not added to the output of other platforms.

To clear this, I give an example
Suppose I want to add a file uploader library for the web and a file uploader library for Native, and use each of them in specific platform.
As far as I know, I need to add both libraries (web and native uploader) to the common repo and create a component with the .web extension and use the web file uploader library and create a new component for native and use the native file uploader library.

But if I do this, the web uploader library will be added to the native output, for example, if I export Android APK, its included the web uploader library that increases the size of the APK and vice versa.

If I'm wrong, please tell me otherwise, what is the proper solution to prevent this?

Hello Bruno! I wanted to thank you for this guide, it really helped me a lot on my development.

Although I'm facing an issue here.

I've successfully set up android, iOS and web, everything works just fine during development. We had to add this lib so CSS files that are being used on web do not impact on mobile.

We were getting the following error that got fixed on development.

error Unable to resolve module 'flexboxgrid2/flexboxgrid2.css' from 'node_modules/react-flexbox-grid/lib/classNames.js': flexboxgrid2/flexboxgrid2.css could not be found within the project.

https://www.npmjs.com/package/react-native-css-transformer

The issue I'm facing now is when I build the app into release mode, using gradle bundleRelease / assembleRelease for android, and Build->Archive for iOS it breaks with the same error as above.

But on development everything is working fine!

I have a feeling that babel.config.js and metro.config.js files are not being read.

Any thoughts?

Thanks!! :)

Steps to reproduce:

1. clone repo
2. change some url image to a static image
3. run android in emulator

Unable to run android: yarn run android
yarn android yarn run v1.21.1 $ yarn workspace mobile android $ react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 0 file(s) to forward-jetify. Using 8 workers... info Starting JS server... info Installing the app... :ReactNative:Passing custom root is deprecated. CLI detects root automatically now. :ReactNative:Please remove second argument to applyNativeModulesSettingsGradle`.

Configure project :app
:ReactNative:Passing custom root is deprecated. CLI detects root automatically now
:ReactNative:Please remove second argument to applyNativeModulesAppBuildGradle.

FAILURE: Build failed with an exception.

• What went wrong:
  Task 'installDebug' not found in project ':app'.

• Try:
  Run gradlew tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 2s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

• What went wrong:
  Task 'installDebug' not found in project ':app'.

• Try:
  Run gradlew tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 2s

at checkExecSyncError (child_process.js:616:11)
at execFileSync (child_process.js:634:13)
at runOnAllDevices (/home/xavient/My/my/React Native/react-native-web-monorepo/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:39)
at buildAndRun (/home/xavient/My/my/React Native/react-native-web-monorepo/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:158:41)
at then.result (/home/xavient/My/my/React Native/react-native-web-monorepo/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:125:12)
at process._tickCallback (internal/process/next_tick.js:68:7)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/bin/node
Arguments: /usr/share/yarn/lib/cli.js android
Directory: /home/xavient/My/my/React Native/react-native-web-monorepo/packages/mobile
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`

how to export class?
it works on ios app but website not working

`
export class App extends Component {
render() {
return (

        <View style={styles.body}>
          <View style={styles.sectionContainer}>
            <Text style={styles.sectionTitle}>Code sharing using Monorepo</Text>
            <Text style={styles.sectionDescription}>
              Edit <Text style={styles.highlight}>packages/components/App.tsx</Text> to change this
              screen and then come back to see your edits (in the phone or the browser).
            </Text>
          </View>
          <View style={styles.sectionContainer}>
            <Text style={styles.sectionTitle}>Web support via react-native-web</Text>
            <Text style={styles.sectionDescription}>
              Run <Text style={styles.highlight}>yarn workspace web start</Text> to 
              open this app in the browser. 
            </Text>
            <Text style={styles.sectionDescription}>
              It will share the same code from mobile, unless you create platform-specific files 
              using the <Text style={styles.highlight}>.web.tsx</Text> extension 
              (also supports <Text style={styles.highlight}>.android</Text>,{' '}
              <Text style={styles.highlight}>.ios</Text>,{' '}
              <Text style={styles.highlight}>.native</Text>, etc).
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  </View>
);

}
};

21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] compile: tsc -b
23 error Exit status 1
24 error Failed at the [email protected] compile script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]
`

thanks

Step to run in Android Real Device

1. open package\mobile\android in Android studio
2. Click run(in Android) to install the app 1st
3. Go to chrome://inspect/devices#devices add localhost:8081 after click Port Forwarding and Configure
4. Finally in project root run yarn android again.

Maybe can add this to readme file for future reader

First of all, thanks for creating this demo and a wonderful blog 🙏 .

I created a brand new project with [email protected], following your instructions and this repo, I was able to get mobile running but the web failed with this error:

Failed to compile.

../components/src/App.tsx
Module not found: Can't resolve 'react-native/Libraries/NewAppScreen'

I noticed that you actually created a separate AppHeader.tsx and AppHeader.web.tsx in the components/src, wondering if you encountered the same problem thus the workaround and if you can shed some light on the actual root cause?

Thanks.

I followed your instruction and then run react-native run-ios and got the following errors

warn Package app has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/app/package.json'






warn Package react has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/react/package.json'
warn Package react-native has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/react-native/package.json'
warn Package @babel/core has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/@babel/core/package.json'
warn Package @babel/runtime has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/@babel/runtime/package.json'
warn Package jest has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/jest/package.json'
warn Package react-test-renderer has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/amesbahi/Code/allAnimedown/animedown/packages/mobile/node_modules/react-test-renderer/package.json'
error Unrecognized command "run-ios".

error Avatar.js: Unexpected token

how configure react native elements in the file config-overrides.js?

I'm trying to run yarn workspace web start but I get this error:

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

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

I'm running Windows 10. It works for the mobile version.

enviroment:
Windows 10
latest yarn, ts

git clone repo..
cd yarn && yarn workspace mobile start

bundling failed: Error: Unable to resolve module ./app.json from C:\workspace\react-native-web-monorepo\index.js: The module ./app.json could not be found from C:\workspace\react-native-web-monorepo\index.js. Indeed, none of these files exist:

• app.json

I cloned your repo and all works great. Thanks you.

The one exception is the tests will not pass. I keep getting the following

❯ yarn workspace mobile test

yarn workspace v1.17.3
yarn run v1.17.3

$ jest
 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    Cannot find module 'setupDevtools' from 'setup.js'

      at Resolver.resolveModule (../../node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:202:17)
      at Object.<anonymous> (../../node_modules/react-native/jest/setup.js:3:6)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.176s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /home/thorakmedichi/.nvm/versions/node/v11.15.0/bin/node
Arguments: /usr/share/yarn/lib/cli.js test
Directory: /home/thorakmedichi/Development/Projects/stormfree/react-native-web-monorepo/packages/mobile
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.

I am not sure what to do. I have spent a couple hours now combing the google-verse and non of the suggestions seem to make a difference at all.

First of all, AMAZING repo and tutorial man, i got it up and running in no time, and most of dependencies i install work like a charm, however, i'm getting this error when launching the web package after doing a bit of coding with react-navigation 5 tabs:

Failed to compile
../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.
This error occurred during the build time and cannot be dismissed.

How can i fix it?

I am having this error after eject

Uncaught Error: Module parse failed: Unexpected token (15:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

export function App() {
return (
<React.Fragment>

I am not able to figure out what do I have to update in webpack.config.js as babel-loader is present to compile js and ts files

"@babel/core": "7.5.5",
"babel-loader": "8.0.6",

Steps to replicate
Project is hosted at https://github.com/sachinKumarGautam/Virtual-Chips
Clone it
yarn install
yarn workspace web start

@brunolemos pls look into this
Let me know if more info required

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-native-ratings')
]

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
}

The above code is used to override the default webpack configuration set by create-react-app. "react app rewired" is used to achieve this. Despite of adding the require.resolve('@babel/plugin-proposal-class-properties') i m getting the error that it is not enabled

SyntaxError: /home/react/demo-monorepo/node_modules/react-native-material-dropdown/src/components/dropdown/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (22:23):

how can i fix this ?

Thanks a lot for the article/code sample!! This is exactly what I have been looking for.

I have cloned the project and followed your instructions. The web app starts as expected but when I start the mobile app on Android I get "Unable to resolve module ./packages/mobile/index from C:\Projects\frontend\node_modules\react-native\scripts/.".

Tried to to fix it changing different files/paths in the android folder but haven't succeded. Maybe you have a better idea of why it doesn't work?

Update: Sorry, obviously I am not that great at reading instructions :) Mobile working as expected when I keep the first terminal with "yarn workspace mobile start" open. Thanks again for a very helpul project!

How difficult would it be for a small team to add electron support to this repo in your personal opinion?

Hello,

Thank for this work.

I am struggling running the application. I followed your steps to the letter, but running yarn workspace mobile start does not run the app but the bundler. It is not very clear to me how I would get to run the app in either platform.
Please help?

Thank you

Mobile package metro.config.js and babel.config.js have no effect, to make them work they should be located inside the root folder. Is there a way to make them work from the mobile folder?
@brunolemos

Hi!
Probably this is something I didn't understand.
If I add a react-native lib in component workspace, autolink does not work.
Adding to mobile workspace autolink works well, but I'm getting lint error: import/no-extraneous-dependencies

My use case is I have an app with some charts and I want to add victory for web and victory-native for mobile.
Then I have PieChart.tsx and PieChart.web.tsx.

What is the best strategy to add a new dependency? What do you recommend in this case.

Thanks in advance!

I am fairly new to the concept of monorepos and I am struggling to integrate react-native-windows into this monorepo.
Any suggestions or tutorials would be helpful.
Thanks in advance :)

Thanks for open sourcing this boilerplate repo!! I have actually been reading your DevHub source code over the last couple of weeks - it's been very helpful for tips on organising my own project, thank you!!

One thing I noticed is that you cannot use the react-native link or react-native upgrade commands with this set up. I'm not sure if you found a problem with this?

In order to get around this I used the nohoist config to keep all react-native* modules local to the mobile package.

where is the external package install location?

where I should run npm install --save react-native-snap-carousel
root location or packages/mobile ??
thanks