Nested stateless components do not hot reload

[nickjanssen]

• Provide a minimal code snippet / rnplay example that reproduces the bug.

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Text
} from 'react-native';

const ThisWillNotHotReload = () => {
  return (
    <Text>If change this text, it will not hot reload.</Text>
  )
}

const BugTest = () => {
  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <ThisWillNotHotReload />
    </View>
  )
}

AppRegistry.registerComponent('BugTest', () => BugTest);

• Provide screenshots where appropriate

Stateless components:

Same but with a class:

• What's the version of React Native you're using?

0.28.0

• Does this occur on iOS, Android or both?

both

• Are you using Mac, Linux or Windows?

Mac

[satya164]

cc @martinbigio

[olegdeezus]

Have same issue

• React Native version: 0.29.0
• iOS
• Mac

[przemyslaw-wlodek]

• React Native 0.31.0
• Android
• Linux

I don't even need to nest the components.

• src/components/App/index.android.js

import React from 'react';
import {
  Text,
  View
} from 'react-native';

const App = () => (
  <View>
    <Text>
      Welcome to React Native!
    </Text>
  </View>
);

export default App;

• index.android.js

import { AppRegistry } from 'react-native';
import App from './src/components/App';

AppRegistry.registerComponent('ReactNativeStarter', () => App);

[steida]

I think the trick is to have at least one ES6 component. Then it should work.

[khanghoang]

@steida could you elaborate you comment?

[steida]

https://github.com/este/este/blob/master/src/native/main.js#L37

[khanghoang]

@steida thanks. I tried but it doesn't work, i'm using react native ver 0.31

[steida]

It works in Este, so get an inspiration from it.

[nbaldwin]

Same issue on 0.33, stateless functional component doesn't hot reload, works with ES6 class syntax.

• React Native version: 0.33.0
• iOS
• Mac

[zackify]

This still happens for me too. in 0.34.1

[nakamorichi]

Any fix on the horizon? Been using hot reloadable stateless components in React vanilla for some time now, and wouldn't want to switch back to stateful components if there is no actual need.

[jamielob]

Same issue on 0.35.0, iOS simulator and device, Mac.

[jcady]

Still an issue. 0.37.0 with iOS simulator on mac.

[sospedra]

+1 under v0.37

[kylealwyn]

+1 on 0.40

[GeeWee]

+1

[sospedra]

Bump! +1 on v0.40
(Styling RN apps without HMR is a pain in the 💨 )

[comountainclimber]

Will this issue be resolved anytime in the near future?

[jettandres]

+1! still existing on 0.44.0

[hramos]

If you're still running into this, the best approach right now would be to send a PR with a fix. Please refrain from adding metoo comments so that we can keep the discussion focused on a fix.

[bvic23]

Try my babel plugin https://github.com/bvic23/babel-plugin-functional-hmr until the issue is fixed.

[pull-bot]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[gaearon]

This has been fixed on master and should get into 0.61. #18899 (comment)

If you have more cases that don't work please post reproducing examples in #18899.

[gaearon]

(The only caveat is that for Fast Refresh to work, you'll need to move your root component to a separate file)