Skip to content
Babel plugin enables HMR for functional components in React Native.
Branch: master
Clone or download
Latest commit c7402be Apr 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib update test fixture Feb 7, 2018
.babelrc Initial commit Jul 25, 2017
.editorconfig Initial commit Jul 25, 2017
.eslintignore Cleanup gitignore Jul 25, 2017
.eslintrc Initial commit Jul 25, 2017
.gitignore Cleanup gitignore Jul 25, 2017
.npmignore exclude demo.gif from release Jul 28, 2017
LICENSE.md Add missing case Jul 25, 2017
README.md Update README.md Apr 16, 2019
demo.gif Add demo gif Jul 25, 2017
package.json Bump version Feb 7, 2018
reset.sh Initial commit Jul 25, 2017
yarn.lock depend on react-transform-hmr Jan 5, 2018

README.md

babel-plugin-functional-hmr

A Babel plugin allows HMR for functional components in React Native.

Limitations

If you try to use hooks in your source they won't work (you will get an "Hooks can only be called inside the body of a function component").

Why?

Hot module reload (HMR) has been broken for functional components in React Native.

The "hot loading" message appears, but the changes don't show up.

Installation

In most cases, you should install babel-plugin-functional-hmr as a development dependency (with --save-dev).

npm install --save-dev babel-plugin-functional-hmr

or

yarn add babel-plugin-functional-hmr -D

The transformation plugin is typically used only in development. See the examples below for more details.

Usage

Via .babelrc (Recommended)

Add the following line to your .babelrc file:

Without options:

{
  "plugins": ["functional-hmr"]
}

With options:

{
  "plugins": [
    ["functional-hmr"]
  ]
}

Via CLI

babel --plugins functional-hmr script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["functional-hmr"]
});

Important Note

From Issue #5: "Editing the .babelrc won't actually change the setup, unless you start the packager with yarn start --reset-cache to clean the transform cache."

Technical details

Class

The plugin does not transform components defined as classes, such as:

export default class Button extends Component {
    render() {
        return (
            <TouchableNativeFeedback onPress={this.props.onPress}>
                <Text style={{ color: 'green' }}>
                    {this.props.title}
                </Text>
            </TouchableNativeFeedback>
        );
    }
}

Arrow functions

The plugin transforms arrow expressions if:

  • it has JSX return
  • it has only one object parameter or no parameters

It does not transform files located in node_modules folder.

From:

const Button = ({ children, onPress }) =>
    <TouchableNativeFeedback onPress={onPress}>
        <Text style={{ color: 'blue' }}>
            {children}
        </Text>
    </TouchableNativeFeedback>;

export default Button;

to:

import reactTransform from 'react-transform-hmr';

function wrapComponent(id, Component) {
    const t = reactTransform({
        components: {
            [id]: {
                displayName: id
            }
        },
        locals: [module],
        imports: [require("react")]
    });
    return t(Component, id);
}

class __Button extends require("react").Component {
    render() {
        const children = this.props.children,
              onPress = this.props.onPress;
        return (<TouchableNativeFeedback onPress={onPress}>
        <Text style={{ color: 'blue' }}>
            {children}
        </Text>
    </TouchableNativeFeedback>);
    }

}

const Button = wrapComponent('Button', __Button);
export default Button;

Checkout the tests for more examples.

Sources

License

MIT, see LICENSE.md for details.

You can’t perform that action at this time.