Hot reloading (HMR) not working with functional components

Description

Hot reloading doesn’t work on functional components. The “hot loading” message appears, but the changes don’t show up.

Reproduction

react-native init test
cd test

Open index.android.js and replace :

export default class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

with

const test = () => (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.android.js
    </Text>
    <Text style={styles.instructions}>
      Double tap R on your keyboard to reload,{'\n'}
      Shake or press menu button for dev menu
    </Text>
  </View>
);

Enable hot reloading, reload the app and try to make changes.

Additional Information

• React Native version: 0.37.0
• Platform: Android (didn’t try ios)
• Operating System: Windows

[gaearon]

This has been fixed on master with a new implementation we’re calling Fast Refresh. https://mobile.twitter.com/reactnative/status/1144629612921720833

It will be a part of the 0.61 release. I’m going to close this issue.

[shahen94]

+1