My observations so far on Android

[zabojad]

I've tested on Android and the issue is the same.

I think that RNN enables hot reload only for React Component.

I've replaced Scene1.js with a ES6 implementation and hot reload start working on that screen !

Also, if I implement Scene1.js as a function (instead of class Scene1 extends Component), then the behavior is the same as with haxe.

[zabojad]

To recap:

This renders but does not hot reload:

// Class: screens.Scene1

var $global = typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this

var __map_reserved = {};

// Imports

var $hxClasses = require("./../hxClasses_stub").default;
var $import = require("./../import_stub").default;
var $bind = require("./../bind_stub").default;
var $extend = require("./../extend_stub").default;

const React = require('react');
const { Component } = require('react');
const { View, Text } = require('react-native');

const { Navigation } = require('react-native-navigation');

function Scene1(){
    return (
        <View>
            <Text>Hello 442</Text>
        </View>
    );
}
// Export

module.exports = Scene1;

// exports.default = Scene1;

This renders but does not hot reload:

// Class: screens.Scene1

var $global = typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this

// $global.Object.defineProperty(exports, "__esModule", {value: true});

var __map_reserved = {};

// Imports

var $hxClasses = require("./../hxClasses_stub").default;
var $import = require("./../import_stub").default;
var $bind = require("./../bind_stub").default;
var $extend = require("./../extend_stub").default;
function React_Component() {return require("react");}
// function tools_NavigationUtils() {return require("./../tools/NavigationUtils");}
function React() {return require("react");}
function react__$ReactType_ReactType_$Impl_$() {return require("./../react/_ReactType/ReactType_Impl_");}
// function comps_Row() {return require("./../comps/Row");}
function react_native_component_Text() {return require("react-native");}
function react_native_component_View() {return require("react-native");}

// class Scene1 extends Component {
class Scene1 extends (React_Component().Component) {
    render() {
        var msg = this.props.text != null ? (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },this.props.text) : null;
        return (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_View().View)),{ },(React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },"This is Scene1 111",msg));
    }
}

// Export

module.exports = Scene1;
// exports.default = Scene1;

This renders AND hot reloads:

// Class: screens.Scene1

var $global = typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this

// $global.Object.defineProperty(exports, "__esModule", {value: true});

var __map_reserved = {};

// Imports

var $hxClasses = require("./../hxClasses_stub").default;
var $import = require("./../import_stub").default;
var $bind = require("./../bind_stub").default;
var $extend = require("./../extend_stub").default;

// Constructor

const React = require('react');
const { Component } = require('react');
const { View, Text } = require('react-native');

class Scene1 extends Component {

    render() {
        return (
            <View>
                <Text>Hello 4234567</Text>
            </View>
        );
    }
}

// Export

module.exports = Scene1;
// exports.default = Scene1;

Go and figure :S... Maybe it does not like that in extends (React_Component().Component), React_Component() is a function...

I'll make further tests and try to check the RNN sources if we can find something there...

cc @kiroukou @elsassph @back2dos @kevinresol

[zabojad]

I think it is as dumb as that. This also works and hot reload:

// Class: screens.Scene1

var $global = typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this

// $global.Object.defineProperty(exports, "__esModule", {value: true});

var __map_reserved = {};

// Imports

var $hxClasses = require("./../hxClasses_stub").default;
var $import = require("./../import_stub").default;
var $bind = require("./../bind_stub").default;
var $extend = require("./../extend_stub").default;
// function React_Component() {return require("react");}
const { Component } = require("react");
// function tools_NavigationUtils() {return require("./../tools/NavigationUtils");}
function React() {return require("react");}
function react__$ReactType_ReactType_$Impl_$() {return require("./../react/_ReactType/ReactType_Impl_");}
// function comps_Row() {return require("./../comps/Row");}
function react_native_component_Text() {return require("react-native");}
function react_native_component_View() {return require("react-native");}

// class Scene1 extends Component {
class Scene1 extends Component {
    render() {
        var msg = this.props.text != null ? (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },this.props.text) : null;
        return (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_View().View)),{ },(React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },"This is Scene1 112",msg));
    }
}

// Export

module.exports = Scene1;
// exports.default = Scene1;

[zabojad]

This for example, does not hot reload anymore:

const React_Component = require("react");
// class Scene1 extends Component {
class Scene1 extends React_Component.Component {
    render() {
        var msg = this.props.text != null ? (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },this.props.text) : null;
        return (React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_View().View)),{ },(React()).createElement((react__$ReactType_ReactType_$Impl_$().default).fromComp((react_native_component_Text().Text)),{ },"This is Scene1 1123",msg));
    }
}

It is like it would expect a literal extends Component and nothing else to allow hot reloading to happen...

[zabojad]

Tested on iOS, with exactly the same behavior (that's a good point).

[kiroukou]

That's an excellent news ! We definitly need to have a closer took to the generation process, see if we can consider to simplify it a bit and avoir the function call here..

[zabojad]

FYI https://github.com/wix/react-native-navigation/issues/4728

[elsassph]

@kiroukou that's exactly what I told you. A Babel plugin recognises some code patterns to add the hmr wrapper code.

Generating JS code that Babel would recognise is one option, the other is to generate the wrapper code ourselves (see recent hxgenjs issue created by Kevin).

[elsassph]

Very good find though if there is a difference with RNN. Maybe a different Babel configuration?

[elsassph]

Here's my reverse engineering of the HMR wrapper code: https://github.com/kevinresol/hxgenjs/issues/27

[francescoagati]

hi, but the hot loader of react native reload a class es6 for a file or also with one file with many es6 classes inside? with the new es6 class in haxe 4 we could have better performance?