Don't succeed running a react native app from Xcode (running the same app from cli work just fine) - ios

When I try to run the app on a real device or emulator (running from Xcode) I get stuck on splash screen and able to see 'Loading dependency graph'
However, if run it from command line like react-native run-ios --simulator="iPhone 8" everything works just fine and I have no problems.
What might cause the problem? Thanks

try starting the bundler in a separate terminal window, e.g., npm start -- --reset-cache and then run Xcode.

OH MY GOD
Being a deep js believer, I actually had never used Xcode and furthermore had never put any effort towards debugging.
Turns out, I accidentally put a breakpoint somewhere in main.m that has been causing the issue. I didn't notice it and now everything works just fine when I removed it.

Related

React Native: What is the difference between running app with Xcode vs `react-native run-ios`?

I know that clicking run in Xcode builds and runs the project. But running react-native run-ios also builds and runs it. What's the difference other than that Xcode has more specific error messages?
react-native run-ios
is nothing but a CLI to help get you started with much more easier and faster ways to boot up the app. But for this command to execute you need to have Xcode installed and the build settings should be set to legacy so that it can be build and run properly.
The thing is suppose you want to run an app, opening the xcworkspace in your Xcode and then launching xcode , then indexing etc takes a lot of time.
SO thats where the CLI ,
react-native run-ios
helps to build faster. but at the end its the same build. This article will explain beautifully how it works. rn-ios
Hope it helps. feel free for doubts

React Native iOS starts the development server but never connects and then just crashes

So I run my react-native iOS app from Xcode or react-native run-ios like normal. The server starts and says "Loading dependency graph, done." as normal. The app boots up on the simulator and then stays on the splash screen for around 20 seconds then crashes. It never seems to be able to find the development server and it doesn't print any error in the console.
I haven't been able to solve this issue for the life of me today. I've tried every solution I can find. If someone has any insight, please let me know. Thanks!
How to overcome :
cd ios && pod install
then Open in Xcode (project.xworkspace)
then clean and build project with Xcode
Ok so I ended up updating everything... Xcode, react native (0.60), my node_modules, and cleaned and rebuilt and finally everything works properly now. Updating took some time but it was worth it.

Flutter app stuck on Installing and Launching step for physical iPhone

Annoying problem here for my Flutter app: iOS13.3, Xcode11.3 on a physical iPhoneX. The iOS-Simulators all work. The problem is only happening on a physical device. The Flutter App freezes at startup (i.e. at Installing and Launching... step) ! Any ideas ??
My flutter doctor -v does not bring any problems. Also tried flutter clean and flutter upgrade. But nothing seems to fix the problem...
If I run the App from Xcode (Runner.xcworkspace) then everything works as well. Only from VSCode and Flutter, I can no longer launch my physical iPhoneX.
Also, when uploaded to TestFlight, the App freezes at App Start ! (grey screen freeze). Therefore Apple App Store rejects all Flutter Apps for now ! Very annoying.
I am not sure if the Installing and Launching... freeze is related to the TestFlight and App Store Problem !! Might as well be...
This fixed the issue for me:
Run the app from Xcode.
Disable WiFi on iPhone.
Run from Android Studio.
Turn on WiFi on iPhone once the launch process has completed.
This is a workaround solution
I was having this issue. I uninstalled the app from my device, opened the project in xcode, ran some build cleaning thing that appeared in the yellow triangle warning area, then built the app via xcode. Then uninstalled the app from device again. Then ran via android studio and it worked.
Basically, it is because of might some files
For me, this worked
Follows these steps: Go to Flutter > bin > cache
and delete the Artifact folder
Try executing the command: killall -9 dart and retry.
As in my case, I use one of following solutions to fix the issue:
#1. close WiFi on mac, then run from Android Studio; OR
#2. close WiFi on both mac and iphone, then run from Android Studio; OR
#3. enable hotspot on iphone and connect it from mac, then run from Android Studio;

React Native App crashes on Launch Screen on device

I'm starting with React Native, everything works fine in the iOS simulator. I decide to try it on a device.
The app launches, I can play with it, I close/reopen it around 4 or 5 times, and then somewhat randomly the app crashes on Launch Screen (the one with "Powered By React Native"). It just shows the screen, and the app crashes to the iPhone home screen.
Any idea how I can further debug that?
Edit: I added Bugsnag in my AppDelegate.m, but bugsnag doesn't detect anything when the app crashes.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
[BugsnagReactNative start];
// Rest of code
}
I came across this issue today. Read a few SO posts and saw one guy mentioned if your app launches and hangs on the splash screen and then crashes with no error it probably has something to one of your npm dependencies.
After digging deeper i saw the react packager was throwing the error
This error is caused by a #providesModule declaration with the same name across two different files.
To fix
check / clean up dependencies(check for same name declerations)
rm -rf node_modules
rm -rf $TMPDIR/react-*
npm i
This can caused by many issues it seems. Recently this happened to me and I had to search a bit to find out the exact reason.
I'll save you guys the trouble by sharing few places I read
- https://github.com/facebook/react-native/issues/14500#issuecomment-348063910
- https://github.com/facebook/react-native/issues/17276#issuecomment-357538208
In my case it was a library issue which I have not linked properly.
-https://github.com/ivpusic/react-native-image-crop-picker/issues/204
So yeah! my point is, it's something we have done or not done. Bit more research would help!!!
I had a similar issue. My application crashed on emulator device every time I ran the application without throwing any error in the console.
Here are a bunch of solutions that might work:
Solution 1 Remove node_modules
rm -rf /node_modules
npm install
Solution 2 Remove /android/app/build directory (This one worked for me)
rm -rf /android/app/build
After this, uninstall the application from emulator device and then run your application again
I was also facing the same issue on real device and it was working fine on simulator. So, i have fixed my issue by given solution
Solution: i have uninstall the application from simulator and then installed it again. This time it showed me the actual error on simulator that i had made mistake.
I finally solve this error by running the app in release mode from xcode
goto Product->Scheme and then click edit Scheme
Select run from left side menu
change Debug to Release
untick Debug executable
now clean the project and run your app in release mode
Some time you have to delete pods and install again after doing above
look for your error in xcode console in my case VS code has imported a Library I just have to remove that import
I had this problem also, what triggered it for me though was updating react and react-native.
I did a build after updating and then I experienced the same issue. I downgraded back to the previous versions of react and react-native, but that didn't work for me.
I tried removing node modules, and reinstalling, that didn't help. Then I noticed that when I was building: react-native run-ios,
the files in ios/build were not updating
I rm -rf ios/build/ and then I react-native run-ios and the ios/build folder populated. My app ran fine after that.
For me lottie package was creating problem. After removing the package able to launch the package.
Make sure by checking the last package/packages installed
In my case it was the Firebase GoogleService-info.plist file which was missing that is supposed to be present in your project.xcodewrkspc when opened using XCode. Adding that resolved the issue.

React Native: Can't see console.logs when I run application from XCode

I'm struggling to get my code working with react-native run-ios. The native code is pulling some old cached version of the javascript bundle, and I can't seem to clear that to save my life.
When I run the application from XCode however, the application runs just fine. Awesome!
The only problem is that when I run my application through XCode, I can't seem to access the javascript logs. I've tried react-native log-ios but that doesn't seem to show my logs. I've tried "Enabling debugging in Chrome" from the simulator menu, but this option isn't available to me when I run the app from XCode.
Does anybody have any thoughts on what might be going on here?
Option #1
console.log works. By default on iOS, it logs to the debug pane inside Xcode. If you select the "Debug in Chrome" or "Debug in Safari" options from the rage shake menu (⌘+^+Z), it will log to the browser's console instead.
Option #2
As of React Native 0.29 you'll be able to simply run the following to see logs on the command line:
react-native log-ios
react-native log-android
Option #3
cmd ⌘ + D to bring up the debug menu
Set "Debug in Safari" turned off, and some messages would be printed to the output message, but not console messages. However, one of the log message says:
DEV === false, development-level warning are OFF, performance optimizations are ON"
This was because I had previously bundled my project for testing on a real device with the command:
react-native bundle --minify
This bundled without "dev-mode" on. To allow dev messages, include the --dev flag:
react-native bundle --dev
And console.log messages are back! If you aren't bundling for a real device, don't forget to re-point jsCodeLocation in AppDelegate.m to localhost (I did!).
It seems that react-native log-ios is not working anymore since RN .50
You can use react-native-log-ios npm package instead
npm i -g react-native-log-ios
and then
react-native-log-ios <XCode Project Name>
If you close the app on the device (so that XCode shows it as stopped) and then start the app again (through the device, not with XCode), the console logs will go to the terminal (assuming metro is running).
Of course, you don't get XCode debug logs, for my needs that's fine.

Resources