Add React-Native schematics or other integration

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

There are no schematics for React-Native.

Current Behavior

React-Native cannot be added to nx workspace.

Failure Information (for bugs)

As monorepos are getting more and more popular it’s possible to find resources and articles online to share components between react-for-web an react-native. This is trivial in reducing time consuming for smaller teams in dare need to build cross-platform solutions.

It would be great to add capabilities to nx workspaces to kick-off a react-native application.

Steps to Reproduce

These are the steps needed to have a RN application building with nx. To achieve this I have manually added react-native to an existing nx workspace and worked my way to change all node-modules references to build from the root folder.

I have tested this ONLY on Android so uncertain the build works on iOS at the time of writing.

1. I assume you have a working nx workspace
2. I assume you have react-native CLI globally installed, both Xcode and Android Studio configured as following docs https://facebook.github.io/react-native/docs/getting-started
3. cd into the apps folder
4. run react-native init myproject (make sure to select a project name that follows npm guidelines)
5. we will use yarn workspaces to unify package.json so add these to the project’s root package.json: "workspaces": { "apps": [ "apps/*" ], "nohoist": [] }
6. run yarn install
7. Check where react-native got installed. If it was at /node_modules/react-native, all right. If it was at /packages/mobile/node_modules/react-native, something is wrong. Make sure you have the latest versions of node and yarn.
8. Now we need to change some references to point to the correct node_modules folder. Specifically the files to change are:

-apps\myproject \android\app\build.gradle

project.ext.react = [ entryFile: "apps/earthonfire/index.js", root: "../../../../../", enableHermes: false, // clean and rebuild if changing ] apply from: "../../../../node_modules/react-native/react.gradle"

-apps\myproject \android\build.gradle

repositories { mavenLocal() maven { url("$rootDir/../../../node_modules/react-native/android") } maven { url("$rootDir/../../../node_modules/jsc-android/dist") } google() jcenter() }

-apps\myproject \android\settings.gradle (this is very important, see this thread why https://github.com/facebook/react-native/issues/25479):

rootProject.name = 'earthonfire' apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings, "../../apps/myproject") include ':app'

-apps\myproject \android\app\src\main\java\com\myproject\MainApplication.java

@Override protected String getJSMainModuleName() { return "apps/myproject/index"; }

1. Open packages/mobile/package.json. Your start script currently ends in /cli.js start. Append this to the end: --projectRoot …/…/.

2. If this file exists (apps\myproject \metro.config.js), set the projectRoot field on it as well so it looks like this (the important part is the path module import and the projectRoot setting): const path = require('path'); module.exports = { projectRoot: path.resolve(__dirname, '../../../'), transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: false, }, }), }, };

3. The cleanest solution is to have a package.json file in the RN folder and run all commands from there. Trying to do it from the root folder may lead to different results. You need to build with yarn run-android and then start metro bundler. My case was to have a run-android custom script to point to the correct node_modules like this (the --no-jetifier flag is needed as I had errors in running this tool) "run-android": "node ../../node_modules/react-native/local-cli/cli.js run-android --no-jetifier", and "start": "node ../../node_modules/react-native/local-cli/cli.js start --projectRoot ../../",

I also tried not using a package.json in the RN folder, it would build but then metro bundler would fail missing a dependency such as @babel/runtime/helpers/interopRequireDefault. I added the dependency but no solution was found.

Context

Please provide any relevant information about your setup:

• version of Nx used ‘latest’
• 3rd-party libraries and their versions: “react-native”: “0.60.5”,

[jaysoo]

We have the react-native plugin in a separate repo. https://github.com/nrwl/nx-react-native

It is not ready yet, but we are working to get it out later this year.

[jaysoo]

I think we may refocus on React Native maybe close to the summer (May/June?). We’re working on polishing some of the existing features and fixing issues.