CODEWITHSUNDEEP
javascriptiosiphonereactjsreact-native
douglaswissett
douglaswissett

Reputation: 241

How to bundle and deploy React-Native iOS app on real device

I am unable to find documentation for the latest release of React-Native on how to bundle and deploy an App on to an actual device.

I'm getting red screen errors when opening the remote debugger on my iPhone, however the app loads up without remote debugger enabled.

I haven't changed any url in AppDelegate.m and the rootBundle is still @"index.ios".

Upvotes: 4

Views: 1505

Answers (2)

douglaswissett
douglaswissett

Reputation: 241

Thanks Monochrome for your answer, it has been helpful!

I'm having issues from step 4 onwards, my AppDelegate.m file doesn't look the same as what you have explained.

jsCodeLocation = [[RCTBundleURLProvider sharedSettings]      
jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"Kompas"
                                                  initialProperties:nil
                                                  launchOptions:launchOptions];

Upvotes: 2

Monochrome
Monochrome

Reputation: 163

I myself am a beginner in RN development and have also ran into the same problem when trying to run my app on a real device for the first time. Here I would like to share with you how I managed to finally make it work:

  1. So firstly, make sure that your iPhone (or iPad) is connected to your Mac via the cable;

  2. Then check if both your Mac and iPhone are connected to the same Wi-Fi network;

  3. Then comes the tricky part. If you are using RN ver < 0.30, you have to configure your Info.plist file properly. To be clear, you have to disable such thing as App Transport Security (ATS). This is a security feature in iOS 9 which will block any unauthorized network activity that may happen on your smartphone, to keep it simple. The sad part is that ATS considers launching a RN app to be that kind of activity and blocks it. So you have to open your Info.plist file and add this code, officially proved by the Facebook team:

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

    You might wonder why you don't see it in the Docs now – well, as far as I know, this is because in RN ver 0.30 they made ATS disabled by default (you can read about it in the bottom of the page)

  4. Now you need to open your AppDelegate.m file and find this line:

    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

    Uncomment it and then change it to look like that: jsCodeLocation = [NSURL URLWithString:@"http://Your.Mac's_Ip.Address.Here:8081/index.ios.bundle?platform=ios&dev=true"];

    Like that: jsCodeLocation = [NSURL URLWithString:@"http://255.255.255.255:8081/index.ios.bundle?platform=ios&dev=true"];

  5. Then go to your simulator choosing list (idk how it is called, actually, just take a look at my screenshot :D ) and choose your connected device.

    Xcode screenshot

Then click "Run" and you should be good to go!

Keep in mind, though, that there are two options of how you can run your app on the device. First option (which I have described above) allows you to write code in your editor, hit the save button, and then will reload the app on the phone and all that stuff you can do in the Simulator, but when you disconnect your iPhone from your Mac, you will not be able to run your app locally on your device.

To make it work locally with no connection to Wi-Fi or Mac, just uncomment the line written under the OPTION 2 (there is no need to change anything in there).

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

All the previous steps remain the same.

Hope it helps!

Upvotes: 1

Related Questions