React-native: How do you run on a physical device as of rn 0.29? ...with Reload JS working

Created on 13 Jul 2016  路  10Comments  路  Source: facebook/react-native

I can no longer run in a physical device, I just get Could not connect to development server. The docs seem to be quite out of date.

Questions:

What do I put in my AppDelegate.m? It used to looks like this (modified from the original to allow me to access my dev server from a physical device):

  #ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://<my-ip-address>:8081/index.ios.bundle?platform=ios&dev=true"];
  #else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif

But since the upgrade its changed to this:

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

If i don't make any changes I can run on a physical device, but _Reload JS_ doesn't work. Is it possible to load js code on the fly as before?

What do I put in my Info.plist file for _NSAppTransportSecurity_ ? The default settings are now:

    <key>NSAppTransportSecurity</key>
    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

Tried changing _localhost_ to my <my-ip-address> but it doesn't seem to work.

Is there a configuration that allows my to test both a physical device and a simulator without having to change code each time?

Locked

Most helpful comment

+1 would be good to have docs for this because the new default template doesn't support debugging on the device

All 10 comments

allow http setting:
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

I've followed the instructions and tried this. Adding a localhost, or ipaddress entry to the NSExceptionDomains settings in my info.plist file doesn't help me run on an external device. I can't reload the JS dynamically anymore.

IP addresses are not supported by ATS. Either use a tunnel (ex: with xip.io) or disable ATS entirely.

Thanks for the reply. When you say "disable ATS entirely", do you mean:

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

I've tried it, and I think I understand what it means - but it doesn't change the fact that since RN0.29 my phone is loading only the bundled javascript, and there doesn't seem to be a way to tell it to load the JS dynamically from my laptop any more. I guess my question is - where do I configure my app to load JS from my laptop?

I used to do this:

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

What do I do now instead?

Yes that all sounds right. Not sure where the bundled JS is coming from -- maybe check that jsCodeLocation is actually the value you expect it to be at runtime.

That's my question - what should it be? Since RN 0.29 its set to jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];.

AFAIK the packager server URL hasn't changed so the old URL should work (visit it in your browser as a sanity check).

Ok, the answer is to have this in your AppDelegate.m:

  #ifdef DEBUG
    jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.64:8081/index.ios.bundle?platform=ios&dev=true"];
  #else
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  #endif

And this in your Info.plist:

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

+1 would be good to have docs for this because the new default template doesn't support debugging on the device

@mvayngrib: seems like https://github.com/facebook/react-native/issues/9225 is addressing your concerns about the docs

Was this page helpful?
0 / 5 - 0 ratings