How to enable Hot Reloading in React Native

By default Hot Reloading in React Native only works if you extend React.Component. If you are using your own base classes to inherit from you need to change the .babelrc file.

Below is my working example. In the superClasses section you will see BasePanel and InfoPanel which are my base classes.

{
 "presets": ["babel-preset-expo"],
 "env": {
  "development": {
    "plugins": [
      ["react-transform",
        {
          "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
           }],
          "superClasses": ["BasePanel", "InfoPanel", "React.Component", "Component"]
        }
      ]
     ]
    }
  }
}