React native app stuck on splash screen on device

Question

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?

Answer 1

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

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

Answer 3

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

Answer 4

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>

Answer 5

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.

Answer 6

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.