Why is the React Native Packager not creating a new bundle when changes are saved? - macos

On Mac, I created a React Native project via create-react-native-app and then ejected the app. Then I ran npm run ios, which is an alias for react-native run-ios. At that point, I can see it start up in the simulator and the packager opens in a new terminal window. It looks like it is watching for any changes on JS files in my project directory, yet when I make a basic edit in the JSX in the App.js file, I don't see anything happening in the packager terminal window and it doesn't reload the app in the simulator.
Edit: I just tested it on the react-native CLI and it happens there as well. I'm at a loss what the issue could be.​​
Am I missing something or is there another issue?

For the app to refresh, you need to do Cmd + R which refreshes the packager and lets it watch the refreshed bundle. For Realtime Loading, use Cmd + D to enable the devtools and enable Hot Reloading. Hope it helps!

Related

How to debug a Cordova app showing blank screen in XCode Simulator

We inherited an app where the frontend is built in Vue 2 and the mobile app built with cordova-ios (6.2.0) and cordova-android (10.1.1). It has built ok and loaded in the XCode (13.2.1) simulator until recently.
It's got some fairly old packages which I upgraded, and managed to get it to run both in vue ui and Android Studio (Chipmunk). (I had upgraded the packages because somewhere along the line that build broke -- so I deleted node_modules and package-lock.json, then upgraded packages one by one until I got it working again.)
However, when I do the Cordova build for iOS, open the project in XCode, do an XCode build, then open it up in a simulator, the screen is completely blank.
These are the only files that changed in version control between releases:
package.json
package-lock.json
babel.config.js
(various Vue files under src/views)
I'm fairly new to mobile development so don't really know how to proceed. How would I go about debugging the project (simulator, XCode, whatever) to see what has broken?
Any extra information you need please ask.
Edit 1: Avinash's suggestion about debugging via Safari Dev Console was a good tip (thanks Avinash). I've checked the app HTML vs a working build and it seems somehow the injection of the app content into <div id="app"> is not happening. In the android version it's fine, so maybe something in the cordova build is not happy.
There's an error message in the debug logging in XCode saying it could not load the "LaunchStoryboard" image referenced from a nib in the bundle with identifier which is also different from the output in a working build.
Avinash's suggestion is spot on in that it can help troubleshoot startup problems (I've had to do this a bunch of times myself). From your update, it sounds like there's an issue with the splash screen configuration.
There's some iOS specific documentation for the splash screen plugin on the Cordova documentation website. A couple tips that might be useful in tracking down the issue:
You can use a single image for the splash screen if desired. I've got just one defined for my app (the needed dimensions are defined in the Cordova docs above):
<platform name="iOS">
...
<splash src="www/res/screen/ios/Default#2x~universal~anyany.png" />
</platform>
I have also run into issues where the storyboard file has gotten corrupted, probably by me falling on my keyboard and clicking on something while the editor was open. To rebuild, you can remove and re-add the iOS platform:
$ cordova platform rm ios
$ cordova platform add ios
This should copy over the splash image and rebuild the storyboard file.

React Native Debugger app will not open - debugger-ui opens in Chrome instead

My project is a create react native app project, using expo. I installed the react-native-debugger app a while back to debug redux and it was working fine. Recently, for an unknown reason, when debugging JS remotely it will only open http://localhost:19001/debugger-ui/ in Chrome, and will not connect to the React Native Debugger App. I have no idea why this has suddenly broken. This doesn't work for me as I can't use redux dev tools this way
My package.json has the following:
"devDependencies": {
"jest-expo": "30.0.0",
"react-native-debugger-open": "^0.3.17"
}
OS: Mac OS Mojave
Any ideas on how I can get expo to start using the desktop app again? I don't know what else to do beyond setting up the package.json correctly.
Can't comment cause my rep is under 50,
but I face the same issue on ubuntu 16.04 since this week.
Edit:
You can still use Reactotron in the meantime.
Here is the quick start section for react-native

Xcode rebuild doesn’t reflects changes

I'm trying to build a ionic1 in Xcode for iOS. The problem is any css, html, js changes it doesn't take effect when I rebuild the project.
I notice after 10-15 rebuilds/Xcode restarts I see eventually some edits, not sure what causes that.
Is that a known Xcode/Ionic issue?
How can I solve?
A process that never fails me is: ionic prepare ios (you may need to use ionic cordova prepare ios depending on your setup).
I don't even have to close/reopen Xcode - I just wait a few seconds that it loads the changes. Hope this helps.
Probably just need to clean your build folder, Cmd + Shift + K, or deleting derived data should help.
Make sure that an ionic serve session is up and reloading when you make the changes - if it is not make sure you run ionic serve once before you build in Xcode.
All changes will show up.
Doing a clean and rebuild in Xcode is also worth a shot but I think the reason the changes do not show up is because of the ionic serve not being active during changes.
First, while you are opening the iOS Simulator, go to 'Device' tab from the simulator menu bar then choose the option 'Erase All Content and Settings'
Second return back to your IDE and do the commands below, I apply them in ios directory:
build ionic
cordova prepare ios
then your changes should be reflected with first Clean Build Folder and Build in Xcode

Error Launching "WatchApp Extension" Install of Apple Watch Application never finished

First time i add WatchKit extension it was working fine, and then i remove all the watch app target and files.
but now i add the watch app to my project again, but i got that error when i try to run the app.
i already try to clean, uninstall the app, restart xcode and simulator, turn on and turn off keychain, switch off and on in Apple Watch app. all those solution doesn't work, i don't have any idea how to fix it,what should i do?
thanks.

React Native Project Cloned from Git keeps opening SampleApp

I have an existing React Native project in Bitbucket. Today I cloned it by overwriting a project I had created with react-native init <name>.
Build runs smoothly and it opens the app. But instead of showing my index.ios.js it shows the text "Welcome to React Native!", which seems to be same as /Examples/SampleApp. I already removed that folder, but it still keeps popping up.
What should I do to point to my own index.ios.js and to get my project up and running?
I think You might have the packager opened with the SampleApp in separate XCode project. just make sure that you stop it. That's one of the minor problems with React that by default (unless you change port numbers in the code of your app) you cannot have two react apps running in parallel.

Resources