pbojinov
4/13/2015 - 9:48 AM

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

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

AppDelegate.m
content_copyfile_download
// 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
1-react-native-simulator-and-device.md
content_copyfile_download
  • Rendered
  • Source

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