jbuijgers
commented
4 years ago Based on your example, I've managed to get it to work for react-native v0.61.1. The interopRequireDefault error might be due to the Metro Bundler not being able to find the node_modules directory. I had the same issue, which I fixed by adding node_modules to the watchFolders settings in metro.config.js.
Also added libs to metro.config.js here.
const path = require('path');
const libs = path.resolve(__dirname, '../../libs');
module.exports = {
watchFolders: [path.resolve(__dirname, '../../node_modules'), libs],
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false
}
})
}
};The following babel.config.js is needed to get libs working.
const path = require('path');
const libs = path.resolve(__dirname, '../../libs');
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'^@nx-rn-test/(.+)': libs + '/\\1/src'
}
}
]
]
};I did have a slightly different approach, where I did not maintain a separate package.json, but just used the package.json in the workspace root.
I also changed the following at the end of android/app/build.gradle, note the second argument. Based on react-native-cli Autolinking docs.
applyNativeModulesAppBuildGradle(project, "../../..")I used the following commands to run the react-native app, in the given order.
react-native start --config apps/mobile/metro.config.js --reset-cache
react-native run-android --root apps/mobileCurrently loading (certain) assets does not seem to work, I'm running the react-native boilerplate (the one you get after react-native init), and am getting a 404 while it's trying to load the /node_modules/react-native/Libraries/NewAppScreen/components/logo.png file. The Metro Bundler is also giving "transform[stderr]: Could not resolve ..." error, but it does not seem to fail on that and everything seems to just work.
Hope this is helpful in getting your example working @asherccohen , would love to help in getting working schematics for react-native.
asherccohen
IIslam
iangregsondev
vinzcoco
iamyellow
jaysoo
Lampent
adamjamesturner93
TimNuman
cheunjm
denniske
JacopoPatroclo
cdanyl
hudzenko
cvramirez-nasa
github-actions[bot]
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.
"workspaces": { "apps": [ "apps/*" ], "nohoist": [] }-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"; }Open packages/mobile/package.json. Your start script currently ends in /cli.js start. Append this to the end: --projectRoot ../../.
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, }, }), }, };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: