React Native 0.47.1: Hot reload is not reflecting code changes on MacOS

Question

I'm trying to get hot reload working with my React Native project. The packager shows the message Bundling index.ios.js ... [hmr enabled] and when I make a change, i see the Hot reloading... message flash on the device so I'm confident that the change is being detected. However, the actual screen is not reflecting the code changes. Live reload works fine.

I've reinstalled the node modules and reset/uninstalled/reinstalled watchman. Nothing seems to have any effect.

What else should I be trying? How do I figure out why the screen isn't being updated?

Answer 1

The current version of hmr in react-native only works for components that extend from React.Component or Component [see]. In other words, it doesn't work for functional components or components that extend another base class.

• For functional components you can use babel-plugin-functional-hmr.

• If you have a custom base class, you can override react-transform plugin in your .babelrc as the following:

  {
    "presets": ["react-native"],
    "env": {
      "development": {
        "plugins": [
          ["react-transform",
            {
              "transforms": [{
                "transform": "react-transform-hmr",
                "imports": ["react"],
                "locals": ["module"]
              }],
              "superClasses": ["CustomComponent", "React.Component", "Component"]
            }
          ]
        ]
      }
    }
  }