Skip to content
Babel plugin enables HMR for functional components in React Native.
Branch: master
Clone or download
Latest commit c7402be Apr 16, 2019
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 Add missing case Jul 25, 2017 Update Apr 16, 2019
demo.gif Add demo gif Jul 25, 2017
package.json Bump version Feb 7, 2018 Initial commit Jul 25, 2017
yarn.lock depend on react-transform-hmr Jan 5, 2018


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


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").


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.


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


yarn add babel-plugin-functional-hmr -D

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


Via .babelrc (Recommended)

Add the following line to your .babelrc file:

Without options:

  "plugins": ["functional-hmr"]

With options:

  "plugins": [


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


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' }}>

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.


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

export default Button;


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' }}>


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

Checkout the tests for more examples.



MIT, see for details.

You can’t perform that action at this time.