No bundle URL present in custom React Native project

Question

I am trying to make an existing iOS app use React Native and therefore I wrote the code for bridging the two manually and not using the CLI tool provided. I want the RCTBundleURLProvider to detect the IP address of the bundle server automatically, like in the apps generated by the CLI tool.

Finally, when I run the app:

react-native run-ios
react-native start --> the bundle server doesn't start automatically, which is strange

When loading the React Native bundle in the simulator or device, the error No bundle URL present comes up.

Doing clean / npm install / running react-native run-ios doesn't help. Setting the URL directly in the code works, so this isn't a firewall/AppTransportSecurity issue.

What am I missing?

AppDelegate.m - jsCodeLocation returned by RCTBundleURLProvider is equal to null:

...
- (void) loadReact:(NSDictionary*) launchOptions {

    NSURL *jsCodeLocation;

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    // this WORKS --> jsCodeLocation = [NSURL URLWithString:@"http://xxx.xxx.xxx.xxx:8081/index.bundle?platform=ios"];

    NSLog(@"JSCodeLocation:%@",jsCodeLocation); // jsCodeLocation equals null 

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"MyModule"
                                                 initialProperties:nil
                                                     launchOptions:launchOptions];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;

    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = vc;
    [self.window makeKeyAndVisible];
}
...

RCTBundleURLProvider.m looks for a file named ip.txt, which appears to be missing.

...
- (NSString *)guessPackagerHost
{
  static NSString *ipGuess;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    NSString *ipPath = [[NSBundle mainBundle] pathForResource:@"ip" ofType:@"txt"];
    ipGuess = [[NSString stringWithContentsOfFile:ipPath encoding:NSUTF8StringEncoding error:nil]
               stringByTrimmingCharactersInSet:[NSCharacterSet newlineCharacterSet]];
  });

  NSString *host = ipGuess ?: @"localhost";
  if ([self isPackagerRunning:host]) {
    return host;
  }
  return nil;
}
...

package.json:

{
  "name": "MyModule",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

I've opened an issue on React Native about it some time ago.

Here are some solutions:

1. • Run react-native run-ios
   • When the error appears, run npm install
   • Then run react-native run-ios again

2. Add NSAllowsLocalNetworking to info.plist

3. Make sure you have 127.0.0.1 localhost in your hosts

4. Kill any other proccess sudo lsof -i :8081, then kill -9 <PID>

5. Remove YOUR_PROJECT/ios/build/ then react-native run-ios again

I hope one of these solutions will solve your issue. If not, you can find more options on the issue.