React Native app doesn't connect to Metro bundler on first launch - javascript

I am working in an established iOS app. I have backfilled the app to use React Native, and so far that part is working fine. The problems I am running into are:
The Xcode build takes a very long time, and any JavaScript errors will cause the initial build to fail
Once the build succeeds and the app is started (on a physical device), the initial launch says it is trying to connect to Metro, but it never actually does. Instead the RN view pops into place without downloading from the server. At this point I cannot refresh the JavaScript from the Metro bundler, it states that there is no app connected. Additionally, if I shake the device and try to select "Debug in Chrome" the screen will go blank and no longer respond.
If I do not try to open the developer menu and select "Debug in Chrome", but instead just force close the app, when I re-launch the app (not rebuild from Xcode) it will connect to Metro and download the JavaScript bundle like normal. At this point I can select "Debug in Chrome" and it will connect and work just fine.
All-in-all, this isn't a huge issue as there is a workaround available to me. However, it doesn't feel right and I would like to figure out what is going on.
My theory is that during the build process, Xcode is bundling the React Native code as if it is trying to do a production build (I have verified the scheme is set to debug) in a debug executable. I have tried detecting __DEV__ and it is true, so I cannot figure out how to get the app to connect to Metro directly after the Xcode build.
Thank you all in advance for any help you can offer.

Related

React native App fails to launch after buid

guys, I'm totally new here and I'm hoping I really get the help I need 🙏🏼
I built an apk package with eas build -p android --profile test, the build was successful. App installed successfully on mobile but it fails to open. once clicked, it just opens then immediately closes back.
I’m all new to expo and development in general.
I saw a documentation to run the app via npx expo start --no-dev --minify ; as this mimics production mode in local server. I did that and It returns a “uncaught error: java.lan.exception:failed to load all assests” I reloaded like 4 times and app opens fine after that. And does not bring the error again when I rebundle app.
However I have observed it brings the error (java.lang.exception:failed to load all assests) once everytime I stop and restart the expo server.
But app doesn't launch at all when I build to standalone.
Please help here, how do I fix this? 🙏🏼
This is the way I solved it
Follow the steps.
1.) Turn on USB Tethering & USB Debugging Mode in your mobile.
2.) Connect your mobile to your laptop through USB.
3.) Verify the connection options on your device, I just added WIFI bridge / I assume i the same as wifi debugging and then, restarted the device and run expo and it worked.
Above solution is worked for me.

Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. , Failed to install the app

enter image description here
Im new to React-Native and this is driving me insane, I just want to launch the project in the and view the project in the emulator so I can just start coding, I have tried downloading the latest version of JDK, which is apparently not even needed since android studio comes bundled with its own version & also how do I know what version of JDK my android studio comes bundled with ?
I have been trying to fix this for days now, I even got Blue screen of death when after I messed around with the enviroment variables so now I am desperate and want someone to point me in the right direction.
React native install app on a single running device. Make sure your emulator is in running condition
check all connected devices which are eligible for installing using a command
adb devices
one device at a time
Please check your JDK path for android and ios, if all things are correct the see the project files in the project.
Then run your project.
I hope it runs.

React Native dev build on device expires?

I am not sure if this is a thing, or possibly and issue. I am hoping others have experienced it. But every time I put a dev build on my iphone through xcode, the app works fine on the device while unplugged from the computer for about a week. Then the app crashes at the splash screen. Every dev build of an app I have loaded on my device has done this. Even example apps I have downloaded from the web.
Does a development build of the app expire, or maybe the certificates expire or some other issue that causes the app on the device to start crashing after its been on the device for a certain time?
Solution 1: Turn off the WiFi on your iPhone or just make sure your phone and your PC are not on the same WiFi Network.
Solution 2: Run your app on the device using a Static Js bundle. To build static bundle follow these instructions for running on device via static bundle
Reason: This happens because when your phone and PC are on the same WiFi network then the app on phone tries to connect to the app development server to load the latest Js bundle, but when it could not connect to development server or could not fetch the latest Js bundle then the app crashes. By turning off your WiFi or changing the Wifi network causes the application to load the pre-build bundle and prevents the app from crashing.
I ran into the same thing and finally figured it out. If you're using a Xcode provisioning profile instead of signing up for the Apple Developer Program and paying yearly then what you're doing is getting a temporary profile that lasts about a week. Once it expires, any device with the app installed will stop working until you rebuild it with the new profile. You can see your profile/expiration if you go to General->Signing and click the 'i' next to provisioning profile.
I hope If app is opening to splash screen then there is no wrong with application building. After Splash are you going to use any web services or related to your localhost site. If yes then definitely issue is there.
Let me know if it is helpful .
When build on your phone, you want to change your scheme to Release. Please follow this https://facebook.github.io/react-native/docs/running-on-device.html, which will show you how to change your scheme to Release.
If you did lots of upgrade when developing, you might want to delete the node_modules folder, and do a clean npm install again, prior to build on phone process.

How to have Grunt launch a packaged Chrome App

I've used the [yeoman chromeapp generator][1] to scaffold out a Google Chrome Packaged App. The instructions for that generator say running the command grunt debug should launch the packaged app in the Chrome App container, but it doesn't. Instead it opens the packaged app as a regular hosted web app in a tab. Though I am a Grunt noob I'm looking at Gruntfile.js trying to figure out why it doesn't launch the app as a packaged app in the app container, but can't see where the problem is. What's the proper way to get Grunt to launch a Chrome App?
Had the same issue with the Yeoman live-reload—not great for testing actual apps with background js, native permissions, etc.
To manually launch a Chrome app from a folder, I've been using this idiom: ~/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=/path/to/chrome/app/"
There's also this project chrome-app-livereload (blog post) which supposedly swaps out livereload's standard reload with one suitable for inclusion in an app.
You have to go to chrome://extensions, check the box Developer Mode and then click Load Unpacked Extension and point it to your manifest file. This will load your app in a Chrome App Container.

PhoneGap App mysteriously stopped working on iOS Emulator and Device. Stripped down code, still broken

I was creating an ionicframework/cordova/phonegap app but following some updates I'm no longer able to test it on the iOS emulator or device.
I've stripped out the majority of my code just to see if I was doing something wrong. I'm unfortunately getting no error messages, and I'm wondering whether it's a problem with my environment? I'm using Mac OSX 10.9.3.
I am unable to log to the console at this point, however we do get to this line.
If you git clone this project you should be able to run npm install and then gulp emulate to see exactly what I mean - assuming no issues with the installation.
This is what I see inside the console.log produced by ionic emulate ios.
2014-06-08 13:46:00.612 Ionic App[83437:70b] Multi-tasking -> Device: YES, App: YES
2014-06-08 13:46:00.623 Ionic App[83437:70b] Unlimited access to network resources
2014-06-08 13:46:00.650 Ionic App[83437:70b] [CDVTimer][statusbar] 6.989956ms
2014-06-08 13:46:00.650 Ionic App[83437:70b] [CDVTimer][TotalPluginStartup] 7.485032ms
2014-06-08 13:46:00.781 Ionic App[83437:70b] Resetting plugins due to page load.
2014-06-08 13:46:00.932 Ionic App[83437:70b] Finished load of: file:///Users/sebinsua/Library/Application%20Support/iPhone%20Simulator/7.1/Applications/CC48195C-28FF-4138-88C4-90E02AA044CA/Ionic%20App.app/www/index.html#/
2014-06-08 13:46:00.955 Ionic App[83437:70b] adding proxy for Contacts
2014-06-08 13:46:00.956 Ionic App[83437:70b] Ionic is ready.
I even have a repository in which I removed most of the dependencies and that's also playing up...
Does anybody know why it's not working? Can I troubleshoot my environment in anyway? I was just planning on finishing my MVP and then going ahead and rewriting it with Swift but at this point I'm wondering whether to bother. There's something really annoying with the fact it's silently failing with no error messages. I don't know what to troubleshoot. Any way of getting more errors/verbosity than I have?
The funny thing is that it's loading the template and not running the code inside the controller that's related to this.
If I just bring up a local server and use the browser then it all works?! Does that mean something is wrong with Cordova?

Categories

Resources