React native app stuck on splash screen on device

问题:

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?

回答1:

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.

回答2:

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"];

回答3:

For me when I build, it was working fine in simulator but 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.

回答4:

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.

回答5:

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.

回答6:

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

回答7:

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.

回答8:

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

回答9:

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>