React Native - Unable to execute JS call: __fbBatchedBridge is undefined

Question

I've been following this tutorial https://www.raywenderlich.com/126063/react-native-tutorial

and decided to start from scratch after experiencing problems.

I ran react-native init PropertyFinder and opened up the project in Xcode. When I compile and run it, it opens in the Simulator as expected showing:

but shortly afterwards the screen fades and shows this:

The error text is:

Unable to execute JS call: __fbBatchedBridge is undefined

It was working less than 24 hours ago so not sure what's going on. Fwiw, I completely deleted the project and started again.

This answer (Unable to execute JS call: __fbBatchedBridge is undefined) suggests checking it's fetching the code over the wire. It is so that doesn't seem to be the issue.

The full code in the App Delegate is as follows:

/**
 * 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 - uncomment the one you want.
   *
   * OPTION 1
   * Load from development server. Start the server from the repository root:
   *
   * $ npm start
   *
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */

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

  /**
   * OPTION 2
   * Load from pre-bundled file on disk. The static bundle is automatically
   * generated by the "Bundle React Native code and images" build step when
   * running the project on an actual device or running the project on the
   * simulator in the "Release" build configuration.
   */

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

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"PropertyFinder"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

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

@end

Answer 1

Restarting the metro bundler helped me!

Answer 2

This is most likely due to the App trying to load from the bundle and not the packager. You can only run the simulator through the packager. Go in to the AppDelegate.m file and ensure that this line is uncommented

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

and this line is commented

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

The app will still appear to load as that is just the loading screen, which is pre-React. Once React kicks in it will fail.

This thread talks about it in more detail.