"No bundle url present" error with react-native iOS release mode - ios

Question

I have a native iOS app, and we're using react-native to embed a Facebook-style social feed. To run in debug mode I use the packager server and the following code:
NSURL *jsCodeLocation = [NSURL URLWithString:#"http://X.X.X.X:8081/index.ios.bundle?platform=ios"];
bridgeReactView = [[RCTBridge alloc] initWithBundleURL: jsCodeLocation
moduleProvider: nil
launchOptions:nil];
rootReactView = [[RCTRootView alloc] initWithBridge:bridgeReactView
moduleName:#"SocialFeed"
initialProperties:#{}];
where X.X.X.X is my local IP address. This works fine, but I can't get it to bundle the react code into the release version. From the official docs and other Stack Overflow posts I've gathered that it was originally necessary to manually bundle the code with something like
react-native bundle --entry-file="index.ios.js" --bundle-output="./ios/MyApp/main.jsbundle' --dev=false --platform='ios' --assets-dest="./ios"
and change the jsCodeLocation definition above to
*jsCodeLocation = [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
Apparently, in more recent versions of react-native, xCode will bundle the code for you automatically if you choose the release build configuration, in which case you must change the above to
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index.ios" fallbackResource:nil];
Neither of these methods work for us - in both cases jsCodeLocation gets set to nil, and I get the "No bundle URL present" error:
2017-05-08 15:06:56.738 [fatal][tid:main] No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.
Incidentally, I have tried setting the following values in my Info.plist file:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSAllowsArbitraryLoadsInWebContent</key>
<true/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>
</key>

Answer 1

You should do the following:
Run the following command:react-native bundle --dev false --platform ios --entry-file index.ios.js --bundle-output ios/main.jsbundle --assets-dest ./ios
Add main.jsbundle and assets directory to xcode by dragging them in your project.
Note: You only have to run step 2 the first time.

Answer 2

Mina M's answer was so close for me but I was getting a File not found: index.ios.js in any of the project roots error when calling the command. The reason behind this was because I no longer have the separate index.js files for Android and iOS - I have 1 (Which I believe it standard practice now?).
Solution - run this in the root of your React Native project (the folder with your android, ios and node_modules folders in):
react-native bundle --dev false --platform ios --entry-file index.js --bundle-output ios/main.jsbundle --assets-dest ./ios
Then you'll have to do step 2 and drag the main.jsbundle file and assets folder that have just been created in your ios folder, into the your project root within Xcode.

Answer 3

In your code you stated that your bundle is in:
http://X.X.X.X:8081/index.ios.bundle?platform=ios
But if it's a local ip or not accessible to outside network rather than your development environment, bundle url may cause such issues.