I'm trying to run a boilerplate react-native app and the packager seems to stall out right at the beginning when the javascript bundle is requested. Eventually the iOS simulator gives up and throws Could not connect to development server.
Here is the terminal output:
[01/17/2017, 10:48:00] <START> Initializing Packager
[01/17/2017, 10:48:00] HMR Server listening on /hot
React packager ready.
[01/17/2017, 10:48:47] <START> Requesting bundle
bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
I haven't been in react-native for a few months but I used to be able to specify whether the app should load from a bundle or just load the js directly. I would load directly when the xCode project was in debug mode or from a bundle when in release mode.
Again this is just straight boilderplate - no external packages or anything. Just using react-native init TestProj and then cd TestProj/ && react-native run-ios
I'm using the last version of react-native 0.40.0 and the expected react dependency of react#~15.4.0-rc.4.
Thanks for any help on this.
I'm not sure what the issue was but it was fixed after I restarted my computer. I also had issues getting the code to refresh once the app was loaded. That was fixed by uninstalling nodemon globally.
Related
I've created a development build of an Expo app using EAS. Previously I would open the app in Expo Go by running npx expo start and scanning the Metro Bundler QR code.
Now, when I try to do the same thing, Expo Go asks whether I want to open the project in Expo Go or as a "Development Build". It works fine in Expo Go, but crashes immediately when I attempt to open the dev build. The error reads:
null is not an object (evaluating '_ReanimatedModule.default.createNode')
This error is suspiciously similar to one that I encountered earlier in development, which I resolved by downgrading to React Native version 0.69.6. I'm also encountering a second error that says "'main' has not been registered", but I suspect this is downstream of the first error.
I have the same issue when I try to run the app with npx expo start --dev-client.
Any ideas why I might be having this problem?
It sounds like you may have run expo prebuild (https://docs.expo.dev/workflow/prebuild/) which removes "main": "node_modules/expo/AppEntry.js", from app.json. Try to create a new expo app and look at it's app.json file.
When you run expo prebuild it changes a few things with your project (see "side effects" in the prebuild docs).
I'm actually working through some issues with that right now too. I thought I had to run prebuild but turns out I didn't have to. Ever since I ran it my app will not load via the dev-client way. I can however switch back to npx expo start (NOT npx expo start --dev-client, see the scripts section of app.json as that is also changed when prebuild is run).
Let me know if you are able to get your app to load after re-adding the main stuff to app.json.
Ps, are you by chance using react-native-google-mobile-ads?
I have been using react native for a couple months now. However, I really don't know the difference between the starting commands. Currently, I use npm on my project. However, I know yarn can be used. These are the commands I really don't understand the difference with:
exp start, exp ios, exp android
react-native run-ios, react-native run-android
npm start, npm ios, npm android
Which ones are better in what cases and why? Currently, I am using exp but others use react-native run-ios. I used to use npm ios.
Thank you in advance.
It might help to have an overview of the React Native architecture.
In react native, when you write, say, <View/>, it gets sent across the bridge to the native code and dynamically translated into UIView on iOS or android.view.View on Android. Every basic component in the react-native package has been implemented this way. If you want additional native functionality on both platforms, say a library which uses native map components, you will end up having to include the native libraries separately into your Android build.gradle and your iOS .xcodeproj.
The exp CLI is used to start apps built with the Expo SDK. Expo is essentially a prebuilt app with a certain set of native components already included for convenience; all you supply is your JSX; thus the recommendation to "eject" to a regular react native app if you need to use any other libraries.
react-native run-ios and run-android builds the native .app or .apk using the iOS or Android toolchains, starts the Metro Bundler, which minifies and serves the JSX and other assets such as images over to your device in debug mode (You might see something like Loading from localhost:8081).
On Android, it starts the adb server to push the APK with all the native libraries included onto your device, if you have USB debugging enabled. run-ios does the same with the .app; if you install to a simulator it has automatically configured AppDelegate.m to communicate with localhost:8081, whereas live reload over USB has to be configured manually on a physical device.
react-native start simply starts the Metro bundler, which is useful if you already have the app installed.
Commands that begin with npm are defined as scripts in your package.json file. As of RN 0.57, npm start simply calls node node_modules/react-native/local-cli/cli.js start; which is the same as running react-native start; according to the docs react-native-cli installed separately will call the locally installed version of the CLI in node_modules.
Env:
Mac OS X
nodejs 8.9.1
Xcode installed
using boilerplate generated by https://github.com/react-community/create-react-native-app
Symptom:
React Native stuck on Loading dependency graph, done and when go to localhost:8081, I see React Native packager is running.
Also the command line after I did npm start what I got is Loading dependency graph, done. and just stay there, even after I waited for almost 5min.
Actually I found the answer myself.
There is actually nothing wrong. I forgot to start the React Native in the simulator! lol Silly right?
So basically let say if you want to start the iOS simulator in a MacOS, you can just do react-native run-ios --simulator="iPhone 5s" in your project root. Then boom! your project started!
Note that React Native can't really run in the browser, it has to be running inside a phone simulator either iOS or Android.
See official doc for more https://facebook.github.io/react-native/docs/running-on-simulator-ios.html
Have fun!
I have some react-native questions:
1) I have added some console.log() in
node_modules\react-native\ReactAndroid\src\androidTest\assets\AndroidTestBundle.js
However, when I try "react-native run-android" in Windows command, the debug panel does not show it. Should I run another command before run-android?
2) In addition, I have changed the java files in
node_modules\react-native\android\com\facebook\react\react-native\0.42.3\react-native-0.42.3-sources.jar
but it seems that it does not auto compile the jar again. Should I run any command first?
Thanks.
For your first question:
The React Packager usually doesn't listen to any changes to files inside the node_modules folder. If you make any changes to JS files inside the node_modules folder, then you will have to kill the packager (ctrl+c) and start it again using react-native start command. Then you can see the result of modifications to JS files inside the node_modules folder
And for your second question:
React Packager cannot compile native code in real-time it only compiles the JS files and delivers them to the device. So, if you make any changes to native code JAVA/Swift or Obj-C(for iOS) you need to build the app again using react-native run-android command for Android, react-native run-ios for iOS simulator. (manually re-run the build through XCode if you are testing on real iPhone)
I cloned the repository: https://github.com/facebook/react-native and try to run the UIExplorer example on Android emulator.
./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh
I got this error message on the Android emulator:
Unable to download JS Bundle, Did you forget to start the development server or connect your device?
I understand this is somewhat similar to this one:
react native android failed to load JS bundle
But here I had to use the command "./packager/packager.sh" to run the example. So the answer above does not apply to this case.
In order for the app to be able to download the JS Bundle, the packager has to create and serve the JS bundle, and the emulator has to be able to connect to it.
To verify that the bundle is created and served correctly, try browsing to this page in your web browser. This should connect to the packager and get the bundle as the answer. If the packager received the request, the following request message should appear in the packager console:
<START> request:/Examples/UIExplorer/UIExplorerApp.android.bundle?platform=android
If the packager created the correct bundle, it would return get a huge file that starts with something like "__DEV__ = true;. If these two steps did not work, then there's an issue with the packager and you can report the issue on github.
To verify that the emulator can connect to your packager, when you tap Reload JS you should see the same request message in the packager console as above. If no such message appears, then the emulator can't connect to your machine.
It looks like your packager is not accessible from application. You should start React Native Packager at first. It could be done various ways - it depends on your OS and project, examples:
./packager/packager.sh
packager\packager.bat
npm start
react-native start
node "local-cli\cli.js" start
node node_modules/react-native/local-cli/cli.js start
Also check packager configuration in your project (hostname and port at least).