13

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:

enter image description here

but shortly afterwards the screen fades and shows this:

enter image description here

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
Community
  • 1
  • 1
Snowcrash
  • 80,579
  • 89
  • 266
  • 376
  • Are you loading from the bundle or the packager? it will be in the AppDelegate.m file. You can't run the simulator from a bundle. – BradByte Jun 17 '16 at 12:04
  • I'm launching the .xcodeproj file as instructed. Clearly something is working as the initial page loads. – Snowcrash Jun 17 '16 at 12:05

4 Answers4

30

Restarting the metro bundler helped me!

Redmen Ishab
  • 2,199
  • 18
  • 22
3

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.

BradByte
  • 11,015
  • 2
  • 37
  • 41
  • No, the code I've got is using NSURL. e.g. see this in the App Delegate: `jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];` – Snowcrash Jun 17 '16 at 12:41
  • Are you sure the packager is running? Do you see the transforming happening? – BradByte Jun 17 '16 at 12:46
  • How would I know the packager is running? Or the transforming happening? I searched for both in the thread you posted but couldn't find anything. – Snowcrash Jun 17 '16 at 13:27
  • I'm assuming you have the server running? in your project directory run `react-native start`. It fires up a server on `localhost:8081` that should serve up your projects resources. – BradByte Jun 17 '16 at 13:28
  • Ah - I understand. Yes, I launched the app via Xcode and a Terminal is spawned that starts the server. I'm not sure why but this problem has since sorted itself out. Bizarrely, I've made no changes whatsoever. – Snowcrash Jun 17 '16 at 13:35
  • You may have simply needed to rebuild the app. – BradByte Jun 17 '16 at 13:41
  • I actually did rebuild it several times. And delete the original code and start again. But yes, something clearly happened. – Snowcrash Jun 17 '16 at 15:10
0

You may try this change

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/?platform=ios&dev=false"];

to

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

in file AppDelegate.m. The main point is "index.ios.bundle",sometimes it is "index.ios" then add ".bundle" after it. I fixed this problem with this.

Chaselous
  • 1
  • 1
-1

Restarting the metro bundler fixed for me.

Suraj Sanwal
  • 51
  • 1
  • 2
  • 7