A Bug in Reloading JS Bundle since react-native@0.29

[richarddlu]

A very nice improvement of React Native since version 0.29 is using
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
to switch using packager server with DEBUG mode or pre-bundle with RELEASE mode in an actual device.

However it does not work when the packager server is already running when building the IOS product.

I guess the reason is caused by that the program decides to still use the pre-bundle when it fails to start a packager server since the 8081 port is already taken by another running packager server.

A workaround is to stopping the running packager server before building. But the bug still needs to be fixed since it causes a lot confusion.

[afilp]

I use v0.32 (macOSX on an actual iPad) and I only have these 4 options on the Developer Menu (when shaking the iPad):

Reload
Debug JS Remotely
Show Inspector
Show Perf Monitor

Why can't I see the "Hot reload" and "Live Reload" options?

[guilhermebruzzi]

The same issue happened to me with RN 0.33 (and 0.32) and only on iOS device. On android and ios simulator it works.

The reload action doesn't work on an iOS device. It doesn't even make the request to the packager, it only gets the pre-bundle like @richarddlu explained. I even tried to kill the packager before running like @richarddlu suggested, but the problem persisted.

And the "Hot reload" and "Live Reload" options disappeared like @af7 said.

A similar issue was closed but without a solution for this case: #8461

I finally found the problem in my case and a workaround:

The script that runs on "Bundle React native code and images" build phase is:
./node_modules/react-native/packager/react-native-xcode.sh

It gets the ip of the machine with (en0 is ethernet):

IP=$(ipconfig getifaddr en0)

But i'm using wifi in mac and in my case like is explained in: http://apple.stackexchange.com/questions/20547/how-do-i-find-my-ip-address-from-the-command-line

Only this command returns the IP address (en1 is wireless):

IP=$(ipconfig getifaddr en1)

So i created a separate file react-native-fix-ip-xcode.sh with the following code:

set -x
DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH

if [[ "$CONFIGURATION" = "Debug" && "$PLATFORM_NAME" != "iphonesimulator" ]]; then
  PLISTBUDDY='/usr/libexec/PlistBuddy'
  PLIST=$TARGET_BUILD_DIR/$INFOPLIST_PATH
  IP=$(ipconfig getifaddr en0)
  if [ -z "$IP" ]; then
    IP=$(ipconfig getifaddr en1)
  fi
  $PLISTBUDDY -c "Add NSAppTransportSecurity:NSExceptionDomains:localhost:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true" "$PLIST"
  $PLISTBUDDY -c "Add NSAppTransportSecurity:NSExceptionDomains:$IP.xip.io:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true" "$PLIST"
  echo "$IP.xip.io" > "$DEST/ip.txt"
fi

And added ../react-native-fix-ip-xcode.sh after ../node_modules/react-native/packager/react-native-xcode.sh on the same Build Phase.

And it worked! :)

@satya164 Do you think the above code in "react-native-fix-ip-xcode.sh" is a valid pull request to "react-native-xcode.sh". So it also find the IP on en1 (wireless)?

[satya164]

I'll let someone with more experience with Code answer that.

cc @Kureev

[Kureev]

Hey everybody!

First of all, let's try to summarize a bunch of problems you experience:

• Pre-bundling doesn't work if there is an existing instance of packager running
• Pre-bundled version doesn't have a hot module replacement / live reload options
• IP detection is incorrect (sometimes)

Now, let's try to address these issues:

• Pre-bundling doesn't work if there is an existing instance of packager running. I can understand why it happens, but what would be a desired behavior then? Should we kill an existing packager instance or should we spawn an another one on a different port?
• Pre-bundled version doesn't have a hot module replacement / live reload options. It does make sense to me. If your packager doesn't server your JS files (that happens now when you deploy your application to device "by default". See Fix to make bundling available for iPhone simulators again #6352 discussion about packager/react-native-xcode.sh and 8c29a52 that actually changes this behavior).
• IP detection is incorrect (sometimes). I'll take a look into packager and IP detection code to find a way how we can make it work for you (i.e. expose an option to hook your ethN from the ENV for instance)

Please, let me know if this feedback makes any sense to you or you know the way to improve it ❤️

[guilhermebruzzi]

Thanks @Kureev your feedback definitely helped! :D

This issue didn't happen to me: Pre-bundling doesn't work if there is an existing instance of packager running. It never worked even when i killed the existing instance of packager.
Maybe by fixing the IP address detection this issue won't occur anymore with @richarddlu, as it worked for me.

I agree with you that if it uses a pre-bundled version, it shouldn't have a hot module replacement / live reload options.

In case of the IP detection i believe this PR will fix the issue: #9964

Because the IP address should be in either en0 or en1 depending on how you access the internet.
I don't know if a option to hook the ethN on ENV makes sense, maybe a option to pass your IP address via ENV could be even better, if the script doesn't already find it.

[guilhermebruzzi]

@Kureev @vjeux Hi Guys, can you take a look at this issue and the PR I mentioned (#9964) to see if it makes sense to be part of RN 0.34? I can update with the base branch if it looks ok for you and that would be great for our RN team, TY! :D

[elxris]

When this will be pushed to a stable release?
Is not in v0.35.0-rc.0
https://github.com/facebook/react-native/blob/v0.35.0-rc.0/packager/react-native-xcode.sh#L77