Test React Native on the simulator and on a device without editing the code each time!

1-react-native-simulator-and-device.md

In the default React Native app scaffolding you have to edit AppDelegate.m to change where it loads the code if you want to test on your device. I use the following snippet to detect if it's being compiled for Debug or Production and for the Simulator or a device. For Production it uses a copy of the code included in the bundle, for Debug on the simualtor it loads from a server on localhost and for Debug on a device it loads from a server on a given IP address.

NOTE: You need to edit YOUR-IP-HERE and change it to the IP to load the code from when in Debug mode on a device. You could use a service like ngrok to make this work from anywhere.

  NSURL *jsCodeLocation;

  // Loading JavaScript code
  #if DEBUG
    // For Debug build load from development server. Start the server from the repository root:
    //
    // $ npm start
    #if TARGET_IPHONE_SIMULATOR
        // Run from locally running dev server
        jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
    #else
        // Run on device with code coming from dev server on PC (change the IP to your PCs IP)
        jsCodeLocation = [NSURL URLWithString:@"http://YOUR-IP-HERE:8081/index.ios.bundle"];
    #endif
  #else
    // For production load from pre-bundled file on disk. To re-generate the static bundle, run
    //
    // $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif

AppDelegate.m

// My complete AppDelegate.m file

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  // Loading JavaScript code
  #if DEBUG
    // For Debug build load from development server. Start the server from the repository root:
    //
    // $ npm start
    #if TARGET_IPHONE_SIMULATOR
        // Run from locally running dev server
        jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
    #else
        // Run on device with code coming from dev server on PC (change the IP to your PCs IP)
        jsCodeLocation = [NSURL URLWithString:@"http://192.168.11.57:8081/index.ios.bundle"];
    #endif
  #else
    // For production load from pre-bundled file on disk. To re-generate the static bundle, run
    //
    // $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"activeinbox"
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Is it possible to do a similar check from the JS side of things?

Thanks for this gist. It will definitely save me a lot of dev time.

@adamterlson: I used the package https://github.com/GertjanReynaert/react-native-device to detect the Simulator

@dsun412 Thank you!

This should be the default template for react-native projects! Thank you!

I need to make a build script to set YOUR-IP-HERE

agreed w/ @esutton. have you tried submitting a PR?

Now we got the auto discover feature.

About the "auto discover" feature: Hot reloading and Live reloading does not seem to work on my v0.32. The options are not even there. Any ideas what to do? Thanks!

Note that you can run on a device using CLI without any modification to the source:

react-native run-ios --device "optional device name"

I'm not sure how long has this option been there though.

The new RN (I'm using RN 54) has updated the jsCodeLocation to this
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

So I will be using this:

#if DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Hi, I'm tried this out but got this error.

error: bundling failed: NotFoundError: Cannot find entry file index.ios.js in any of the roots:

I think this is because I'm using React Native v0.54, and now the index.ios and index.android are deprecated and combined into a single index.js file. (Since RN v.0.49 I believe?)

So I changed the
jsCodeLocation = [NSURL URLWithString:@"http://YOUR-IP-HERE:8081/index.ios.bundle"];
to
jsCodeLocation = [NSURL URLWithString:@"http://YOUR-IP-HERE:8081/index.bundle"];
and now it seems to work.

As @sovichet pointed out it just works fine for me now too.

 #ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif

However to make it work on emulator, I had to add the following to your info.plist again (as I removed it during your last release)

<dict>
  <key>NSExceptionDomains</key>
  <dict>
     <key>localhost</key>
     <dict>
       <key>NSExceptionAllowsInsecureHTTPLoads</key>
       <true/>
     </dict>
   </dict>
</dict>

@sovichet solution worked for me. It saved a lot of dev time. Thank you so much!!