Is hotloading possible with this? It's not refreshing for me

[Jarrio]

I've enabled hot-loading and live reload within the app dev settings (By shaking the device) and have setup a script someone gave to trigger a recompile of the android.index.js file on save.

When I make a change in the editor (in this case vscode) the react-server reports HMR Server sending update to client and within the app the little tooltip appears in the bottom center of the screen saying Hot Loading... but no screen fresh happens.

The update is definitely pushed to the device, though, because shaking my device and pressing "reload" or minimising the app and reopening it also shows the change. (I'm making a very basic change to a <Text></Text> tag for now.

I'm running Node version: 7.4.0 and Npm version: 4.0.5

[kevinresol]

In short, hot-reload works.

You need to wait until the HMR Server sending update to client finishes. When it does, it will show a message like Update sent (I am not exactly sure about the wordings as my dev machine is not on my hands). Also, from your description I reckon you are debugging on Android. But if you are debugging with iOS, the "Hot Realoding..." message on screen will persist until it finishes. (while Android only shows a toast and does not mean hot reloading is finished when it disappears)

Haxe generates the output as a single js file, which make it very slow to hot-reload in RN. (read this blog post for more details about the mechanism).

[Jarrio]

I am running on Android. Sorry I just want to confirm this. You mentioned that the server will report a "Update sent" message after it reports "HMR Server sending update to client" message. Also implied that hot-loading should eventually work.

This doesn't seem to be the case for me? I'm using the haxe-react-native-sample git project as a base and changed the Main.hx files render() method to output a simple:

return jsx("
<View style={styles.navbar}>
    <Text>Hello</Text>
</View>");

I am testing hot-reload by simply changing the <Text> value.

You mentioned that it is very slow, but is it really so slow that it doesn't even finish sending the update to the device after an hour of attempting to send the update to the client? It seems odd that a fresh re-compile of the entire project ` is faster than this by such a magnitude

[kevinresol]

This library contains only the externs for the RN standard library. There is nothing related to hot reload. You can try modify the generated js directly and see if the hot reload works.

And yes, the server (packager) will report "Update sent". It typically completes in 1-3 seconds (for small projects) and up to 30 seconds for large projects.

[Jarrio]

I've tried changing the index.android.js file directly and it did the same thing - no hot reload after an extreme amount of time. I guess I've set something up wrong somewhere and it's just not working.

[kevinresol]

Can you try it with the "original" index.js? i.e. The one that get initialized with react-native init myproject.

After all, it sounds like a problem with the packager. (as there isn't really any configuration for you to screw up with, and Haxe basically just write the js file which is no difference to you editing the js manually). So, testing with the original js may help finding the cause.

[Jarrio]

That works, but the packager never says a message like "Update sent". It actually says the exact same thing as the haxe project. In both this project and the haxe project I get the following messages on a file change in the packager:

[01/31/2017, 17:33:21]         HMR Server detected file change
[01/31/2017, 17:33:21] <START> Transforming files
[01/31/2017, 17:33:21] <END>   Transforming files (1ms)
[01/31/2017, 17:33:21]         HMR Server sending update to client

[kevinresol]

What RN version are you on?

I will get back to me dev machine tomorrow and I can have a look to the packager log properly.

[Jarrio]

react-native-cli: 2.0.1 react-native: 0.40.0

Thanks again for your help!

[kevinresol]

Alright, I found out the root cause. Because the sample project outputs the js as the main entry point. So essentially we are replacing the root component whenever we compile haxe, which make hot reload fails to work. Now I have modified the code a bit and it should work now.

See: https://github.com/haxe-react/haxe-react-native-sample/commit/7a1bf51f947d1b4f020f1bb8c33128680af71ead

[Jarrio]

It works awesomely! The hot reload is instant for me, maybe it's because my phone connects via usb-c? Thanks again!