Run on device for iOS? (RN .29)

[natdm]

Running on a device for iOS on .29 seems to be different than where I was at (.26).

On .29, the AppDelegate.m file is vastly different than it was. there's no comments explaining what to do for dev or production.

Docs say:
Open ios/YourApp/AppDelegate.m
Uncomment the line, jsCodeLocation = [[NSBundle mainBundle] ...

My AppDelegate.m has a jsCodeLocation but not [[NSBundle mainBundle] ...

`#import "AppDelegate.h"

import "RCTBundleURLProvider.h"

import "RCTRootView.h"

@implementation AppDelegate

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

  [[RCTBundleURLProvider sharedSettings] setDefaults];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  moduleName:@"BidSmart"
  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`

When I comment out the jsCodeLocation variable in my AppDelegate.m, I get "Unable to execute JS call: __fbBatchedBridge is undefined" on the app - but it builds successfully.

[rturk]

@natdm since you've changed AppDelegate.m you need to rebuild your project and reload the app

[natdm]

@rturk I thought that's what happens when I had react-native update all my files. Is it not? It updated AppDelegate.m and it looks similar to a new project I'd init and vastly different than my .26 version.

[natdm]

Just tried the same thing on a new project and it still failed - so there's probably a different way than the docs describe to package .29 to the device.

[nathanajah]

Hey @natdm, can you give me the details on how is your network being setup?

The new AppDelegate.m should be able to detect your IP address automatically.

[natdm]

It's nothing different than it was before I upgraded, but it's possible that would explain my other issue - I can't make a network call within the app if I run the app on the cell without trying to bundle the JS file to the phone.

I can get to 192.168.0.13:3000/wherever in Safari on my device, but I can't make the call within my app now that I upgraded - failed network call. It will work in the emulator though, when everything is set to localhost.

This doesn't work no matter what network I'm on - been to three locations, all 3 used to work before this.

Not sure what to give you on my network settings. The phone and mac are both on the same network and can reach each other outside of the application. The app has a socketed connection that works fine, but not anything else. Again, this all worked perfectly before the upgrade.

[nathanajah]

Can you try to access 192.168.0.13.xip.io:3000 from your phone? We added the xip.io workaround to circumvent the App Transport Security limitation.

[natdm]

I'm currently at work so my network location has changed. I can get to 172.xx.xx.xx.xip.io:3000 in the browser though.

I can't get to it from the app on the phone.

Console error:

ExceptionsManager.js:70 Error caught at loginAuth TypeError: Network request failed(…)reactConsoleError @ ExceptionsManager.js:70console.error @ YellowBox.js:59(anonymous function) @ authLogin.js:74(anonymous function) @ login.js:26tryCallOne @ core.js:37(anonymous function) @ core.js:123JSTimersExecution.callbacks.(anonymous function) @ JSTimers.js:79callTimer @ JSTimersExecution.js:69callImmediatesPass @ JSTimersExecution.js:127callImmediates @ JSTimersExecution.js:142(anonymous function) @ MessageQueue.js:136guard @ MessageQueue.js:41__callImmediates @ MessageQueue.js:136(anonymous function) @ MessageQueue.js:94guard @ MessageQueue.js:41callFunctionReturnFlushedQueue @ MessageQueue.js:92onmessage @ debuggerWorker.js:39

[natdm]

And here is the authLogin function calling the console.error() (line 74 is the console error call):

loginAuth(profile.userId, profile.email, profile.phone, (err, user_info) => {
                    if (err) {
                        this.setState({ loading: false, disabled: false });
                        console.error("Error caught at loginAuth", err);
                        setError("fatal", err.toString())
                        return
                    }
                    const newProfile = Object.assign({}, profile, {
                        user_id: user_info.user_id
                        , auth_id: profile.userId
                        , email: user_info.email
                        , opt_in_email: user_info.opt_in_email
                        , phone: user_info.phone
                        , opt_in_phone: user_info.opt_in_phone
                        , opt_in_notified: user_info.opt_in_notified
                        , card: user_info.card
                        , cc_warning: user_info.cc_warning
                    });

                    login(newProfile);

And the loginAuth function:

export const loginAuth = (auth_id, email, phone, cb) => {

    authorize((auth_key, headers) => {
        fetch(authLogin, {
            method: "POST",
            body: JSON.stringify({ auth_id, email, phone }),
            headers
        })
            .then(response => response.text())
            .then(responseText => JSON.parse(responseText))
            .then(responseText => cb(null, responseText.payload))
            .catch(e => cb(e, null));
    });
};

And authorize:

export default authorize = (cb) => {
    AsyncStorage.getItem('userToken', (err, auth_key) => {
        if (err) {
            console.error("Error getting the auth_key from async storage", err);
            //TODO: Throw app error here and show a friendly screen
        } else {
            const headers = {
            'Authorization': `bearer ${auth_key}`,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        };
            cb(auth_key, headers)
        }
    })
};

[natdm]

And I can make all my API calls in iPhone Safari with xip.io on my device.

Here's how I store my locations. Does this have anything to do with how it's breaking?

"use strict";
import {Platform} from 'react-native';

//Switch base IP on platform since Genymotion uses 10.0.3.2 instead of localhost
const IP = Platform.OS === 'android' ? '10.0.3.2' : 'localhost';

const port = ":3000";
// const base_url = IP + port;
const base_url = "172.16.103.241" + port;
// const base_url = "192.168.0.14" + port;

export const web_url = 'http://' + base_url;
export const ws_url = 'ws://' + base_url + '/wsbidder';

export const findEvent = web_url + "/findevent";
export const notifications = web_url + "/notifications";
export const notification = web_url + "/notification";
export const login = web_url + "/api/bidder/login";
export const updateEmailUrl = web_url + "/update/email";
export const updatePhoneUrl = web_url + "/update/phone";
export const optEmailUrl = web_url + "/opt/email";
export const optPhoneUrl = web_url + "/opt/phone";
export const optInNotified = web_url + "/update/opt_in_notified";
export const stripeUrl = 'https://api.stripe.com/v1/';
export const createUserToken = web_url + "/createBillableBidder";
export const updateCCWarningURL = web_url + "/updateCCWarning";
export const authLogin = web_url + "/auth_user";
export const watchURL = web_url + "/watch";

[nathanajah]

How is the login network request being setup? Do you just specify an IP address or do you have a domain name?

[natdm]

I'm only working with the URL's I pasted above - all IP's and I change them depending on what location I'm at.

[nathanajah]

Ah, sorry, I didn't read your last comment.

#5355 changed the ATS settings from NSAllowArbitraryLoads, which means that any network request is allowed, to an exception just for the localhost only.
Because of this, you'll need to add exceptions to any HTTP request that you do. (HTTPS request will be allowed, if I understand this correctly).

In addition to this, since Apple's ATS settings doesn't allow numerical IP address, you'll need to have some workaround for it. We do that for the packager by using <ip_address>.xip.io, which will redirect to <ip_address>.

https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

[natdm]

Well that did it - for now I just disabled it. I went through all the changes from .26 to .29.1 and seemed to have missed this.

RN is changing so fast.

Thank you so much for your help, @nathanajah !

[natdm]

@nathanajah - How would I package on the device?

[nathanajah]

What do you mean by "package on the device"?

[natdm]

I mean if I leave the AppDelegate.m the way it is, build through XCode to my device, the packager is running on my macbook. If I close the packager, the app dies. How do I create a production-ready package for the app in .29?

[nathanajah]

Have you tried running the app without the packager running?
It should have an auto-switch built in now - if the packager is running, it will use the packager. If it's not, it should use the bundle.

[natdm]

If I build the app, close the packager, restart the app, I get this error:

[natdm]

I had remote debugging turned on. Works great without it.. apparently I've missed a lot. Thanks again @nathanajah

[nathanajah]

Great! Maybe we can look into how to provide a better error message or automatically disable remote debugging on bundle.

[natdm]

Would be a good idea. I had to take a look at the RCTWebSocketExecutor.m to figure out what was going on. Small hiccup.