React native app stuck on splash screen on device but works in simulator

My React Native app works in the XCode simulator with no issues, but when I run in a physical device, my iPhone, there's a problem. The app launches and gets stuck on the React Native splash screen, the after 10-15 seconds the app crashes/closes. What's the cause of this and how can I prevent it?

It seems that I have found the problem. According to https://facebook.github.io/react-native/docs/running-on-device, when you build and run the app on your device, your app will load js files from the packager on your computer, so you can live reload your app. That means your device has to be connected to your computer or has to be in the same wifi network as your computer. If your device can't access the packager, it will stuck on the splash screen and quit.

To run on your device reliably, edit build schema and build release version.

For me when I build, it was working fine in simulator however, in actual device only splash screen was coming and nothing else.

This was because my build configuration was debug mode which is default I guess, I had to change release/build configuration from debug to release and everything work as expected.

Upvote it if this helps :)

Yep I had WiFi on my phone disabled. Enabled WiFi and boom back in business

It should be perfectly possible to run the app in debug, on the device, without the packager attached! You have to use react-native bundle to create an offline bundle, and add it to your Xcode project. Then your app should fall back to that bundle when the packager is not available.

This used to be in the Deploying to Device FB docs, not sure why it's not there anymore.

Sample call (our index.ios.js is placed in ./dist by TypeScript):

react-native bundle --dev true --assets-dest ./ios --entry-file ./dist/index.ios.js --platform ios --bundle-output ios/main.jsbundle

Also, it's apparently necessary to tell your app to run directly from the bundle rather than try to access the development server, which seems to cause the timeout (we had the same issue as OP).

Comment out this line:

jsCodeLocation = // whatever

And add this line:

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

I tried disconnecting my iPhone from the Internet, the problem disappeared in later launches.

So something is trying to do network stuff and causing the delay. It's a quick fix, but will do until we find the specific culprit.

I was having the same issue.
What I did was in Xcode go to Products -> Scheme -> Edit Scheme -> Select the Run tab -> Change the build configuration to Release ( default it was debug mode ) and run the app in the device.

It was much faster and run it as like a native app.

You probably need to sign the app.

Under the Project navigator, click on your app. Then select your target from the project and targets list. Within the "General" tab, find the 'Signing' section. You'll need to specify a team here.

See this link for more info: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4

I faced this issue where I was react-native-splash-screen. After removing it, it is working

This issue could raise due to the following possibilities:

1. Your run schema set to release instead of debug, so always expect to load main.jsbundle, instead of running from the debug server. Change it by Product->Schema-> Edit Schema->Run-> Build Configuration: Debug

Check on Xcode log that any message like NSURLConnection finished with error - code -1004 or NSURLConnection finished with error - code -1022. Go to Project->Target->Build Phases-> + -> New Run Script Phase

2. (-1004) You have configured your XCode project from sketch and forgot to enter the react-native xcode script on Build Phases:

For the below version of React Native 50:

export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh

For the higher version of React Native 50:

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

3. (-1022) Your app ATS issue, check on Info.plist, and you can turn off ATS using below code:

<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

For me I am using firebase framework on my project. I forgot the add GoogleService-Info.plist file to my xcode project. After add it problem gone away.

Just experienced this and after an hour of debugging realized I had recently enabled my systems firewall and set it to "Block all incoming connections".

Weird thing is that android was functioning fine on a physical device, however iOS on a physical device was not able to connect to the RN server. Relaxed the firewall rules and now iOS can connect to the RN server.

Happened to me on my iOS device. I was connected to 4G, not WiFi. I connected to WiFi and it started working immediately.

I am facing same issue when I upload release on TestFlight, so what I did is

react-native link react-native-splash-screen

because some how my splash screen plugin is unlinked. This works for me.

Best check with all outgoing calls. This might happened if you do call an http request to fetch user for example or during fetching user from storage.

If this call returned error, you'll be stuck in Splash screen.

Additionally, imagine that you have navigation that uses these calls it will be worse.

All the solutions above do not work for me.

It's really weird in my situation. The router in my company sends both 2.4G and 5.0G wifi. Only connecting to the 2.4G wifi works when debug on real device.

In my case app stack on splash screen on both (debug & release) schemes of build.

Problem was in Capabilities for push Notification and Firebase. Just add this one. How you can do this

May be it'll help you:)