-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add React-Native schematics or other integration #1860
Comments
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.
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/mobile Currently 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. |
Super!Thanks a lot @jbuijgers for looking into this. Yes indeed a working schematics would be very useful. |
Hi all, I got a prototype (only Android atm) going at https://github.com/JBuijgers/nx-react-native, also published it on NPM https://www.npmjs.com/package/@jbuijgers/nx-react-native. So far it works, but it still needs work/testing before it's fully usable. I'll be adding iOS in the coming week. Would love to get some feedback on this. |
@jaysoo It would be great if expo and expo-cli is being embedded as well. |
Yep - the expo would be great, I already tried using the BUILDER - run-command offered by @nrwl/workspaces - but I couldn't get it to work. I think all that would be needed is to run the expo cli commands on serve / build etc |
@jbuijgers Greta job, do you have any update on this?
|
I have abandoned trying to run the react-native expo via nx tools. Although I am still using NX as a structure. What I did was retain the package.json under my apps/rn (where my react native app sits inside of the nx structure). The package.json comes from creating a branch new expo project using the expo cli. I tried many ways of trying to install the expo etc inside the root of the package.json but a lot of things are hardcoded. Even if I got it to work, it kind of feels hacky and who knows if it breaks in the future. So now I am basically npm installing all libraries in root (nx) as per normal but anything related to expo under the apps/rn In effect I am maintaining 2 x package.json / node_modules - but this was the only way to get it to work :-( It seems to be working correctly now I am using the standard expo start - under /apps/rn to run the project. Using the above seems to be the best approach - without trying to hack things together. |
Hi, I thought I would update here, my previous tests were flawed :-( Multiple package.json was cause for confusion and also the node_modules lives under apps/rn but what about the libs/rn etc ... These would not be able to access them - multiple package.json - was never the right solution :-) Anyway, I have a working version, I felt compelled to repost here as I didn't want anyone following my example above - that causes issues.. Here is what I have.
Also copied the babel.config.js to the root.
I just did this, which passes control to my app.tsx (lower case which is generally the default for react and nx - you can choose what you want)
So the App.tsx does nothing but call up the chain into where my app is.
I hope that cleared some things up. To summarise.. Everything works, no dual package.json or node_modules. There is an App.tsx in the root, either live with it or see the link above to override it. The app.json is in the root, I believe you can change the name of this and call --config the expo cli, if anyone is worried about it being too much of a generic name. |
Hello, |
There's some good progress on building plugins for Nx. Anyone interested to use the information in this thread to create a plugin for React Native? |
hey @asherccohen i'm interested. i don't have a lot of time, but eventually i'm going to need it, so why don't get my hands dirty? :) thanks! |
@jaysoo is working on supporting react native in nx. We can ask what's the progress and provide our help if he needs. |
Quick update: The integration is a bit more complicated than what I originally thought because react-native assumes a few things about directory structure, which doesn't play too nicely with how Nx structures apps/libs. I've put this work on pause for now so focus on other React issues/features, but it is something we definitely want in the future. Like @asherccohen has mentioned, we are encouraging people to write their own plugins using |
i understand @jaysoo i guess you're finding a tone of problems w/ metro bundler. me too. most of my problems were solved with |
I got to the point where the JS bundle generates, but it wasn't being located by the native app. I saw that some of the build scripts had hard-coded The branch I had is out of date, but maybe I can rebase and push this week if anyone smarter wants to take a look. :) |
shure, dont think i'm smarter than anybody :) but maybe i can help somehow.
if you have some repo with the generated nx+rn project (kinda hello world)
maybe i can take a look!
…On Wed, Feb 19, 2020, 9:36 PM Jack Hsu ***@***.***> wrote:
I got to the point where the JS bundle generates, but it wasn't being
located by the native app. I saw that some of the build scripts had
hard-coded ../../../node_modules/react-native/... and other things like
that. Further work requires a step through the native app and see what's
happening.
The branch I had is out of date, but maybe I can rebase and push this week
if anyone smarter wants to take a look. :)
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#1860?email_source=notifications&email_token=AAFRMVPB5AIG4BFMC42ASZTRDWJ4XA5CNFSM4IYCROW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMJNMIA#issuecomment-588437024>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAFRMVPZJHOD4DEO3P5JHG3RDWJ4XANCNFSM4IYCROWQ>
.
|
@iamyellow I'll link something here in the next few days -- once I have a chance to create the example repo. |
Thanks @jaysoo! |
sweet! honestly, yesterday was the first time i've read about schematics. i'm amazed... i really love how the js/ts ecosystem is bringing such a cool dev tools to us, the developers. i'll try to dig deeply there as well :) |
Because I experienced (and detailed above) an issue because of the cli installed as a global package and if that's the standard I would follow it, to help react-native devs in the transition. We should make sure that configs are not too far from a standalone project or it will be confusing. |
@asherccohen @jbuijgers Is this package on public github? I pushed a rebased branch for the RN integration I was working. I was stuck on getting the dev jsbundle to work in development mode. https://github.com/jaysoo/nx/tree/react-native/packages/react-native/src My idea was to provide support for the RN CLI commands (e.g. Note: I think it's better to not support Expo initially since I believe most production apps will need to use native libraries at some point--at least that's my experience. |
@jaysoo Yes the npm package is public https://www.npmjs.com/package/@jbuijgers/nx-react-native I agree with you on expo. I would work my way without it for now, giving devs the same ability to work with native modules. Link command is not needed anymore as react-native supports auto-linking with jetifier. Package maintainers should make changes to their repos, also considering that a package that doesn't support auto-linking might not support androidX either, so better avoid them. I also suggest we look into the global react-native-cli issue, see my comment above. I'll see if I can get the time to check your repo.tx |
Hey, did anyone in this thread had the time to carry on work on this? @jaysoo @iamyellow @iangregsondev @jbuijgers |
Sorry, I've been quite busy for the past months and will have little time to work on this. If anyone is interested in taking the lead, I would very much be interested to participate where I can. |
@asherccohen My tests were with expo, I wasn't really using bulders. I kind of got it working but I haven't really taken it any further as I am also very interested in a NON-expo react native :-) So I am also eager to see any results with regards to getting the builders working with standard react native |
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. |
It would be amazing. |
@jaysoo do you still think RN will be coming May/June time? If so I will delay a personal project a little while! :) |
I'm investigating the @expo/next-adapter to verify if an hybrid solution with Expo/next is possible. I'm still unsure how to write nx builders, so any help with that is much appreciated. |
Any news on this? |
Well currently I'm trying the expo way as it looks promising. Since we already have next.js support we can work on that and bootstrap an hybrid expo solution. Same problem as above, I have no understanding of schematics and builders so any help is appreciated. |
Me neither.. |
@asherccohen Feel free to reach out to me on Slack if you need any help. https://nrwlcommunity.slack.com |
Any updates on this plugin? |
I have just setup a project like @iangregsondev described: The expo app is in But when I try to import something from @nex/data the following error occurs:
Does anybody know how to solve this? Update: I fixed it by adding the following
|
@denniske In case you still have some problems with getting imports to work, I remember the Metro config also plays a role in this, you could take a look at this metro.config.js file. Although not 100% sure anymore, it has been a while since I've written the code. |
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. |
Closing this issue since we should be tracking react-native in the other repo now. |
I've used as an example https://github.com/nrwl/nx-react-native to create a plugin for Expo managed workflow. The repo is here https://github.com/JacopoPatroclo/nx-react-native-expo I don't know if there are any issues with the way I setup everything (mostly borrowing from nx-react-native) so feel free to open issues if something need to be fixed. |
@denniske thank you for your setup! I've used for a monorepo project, include NestJS, NextJS and Expo Web, and it work perfectly fine (serve, build and tests). The repo is here https://github.com/cdanyl/nx-expo-nestjs-nextjs And like @JacopoPatroclo I don't know if there are any issues. Feel free to open issues if something need to be fixed. |
Hey guys, thanks a lot for your examples of nx with Expo. It helped for me to have an idea how to use them together. It will be awesome in case at some point Nx introduces Expo plugin. Here is my example with nrwl react and expo (beta to have react 17 and be compatible with nrwl react): My workaround is running expo app just out of mobile app folder to avoid tslint and babel conflicts / mixing. I am not sure it is good solution and I almost was not testing it, but for me start, test, lint and code sharing works fine. Additional package.json inside mobile app is smth I saw in app generated by |
@hudzenko , in case you haven't seen this expo plugin: https://github.com/JacopoPatroclo/nx-react-native-expo I used it to create a small proof-of-concept app, and it worked well. I think there is interest in official support from nx too: JacopoPatroclo/nx-react-native-expo#20 |
@cvramirez-nasa Am I able to use latest Expo/React-Native/React with that plugin? |
I am super interested in official support, but project can not wait anymore |
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
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 facebook/react-native#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:
The text was updated successfully, but these errors were encountered: