Bound class property functions don't hot reload #15363
Description
Is this a bug report?
Yes.
Have you read the Bugs section of the How to Contribute guide?
Yes.
Environment
react-native-cli: 2.0.1
react-native: 0.47.1
node: 6.9.1
npm: 5.3.0
yarn: 0.27.5- Target Platform: iOS
- Development Operating System: macOS 10.12.6
- Build tools:
react-native run-ios
Steps to Reproduce
- Define a component with an auto bound class property function like:
render() { return <View>{this.renderSomething()}</View>; } renderSomething = () => { return <Text>Test</Text>; }
- With Hot Reloading turned on, update the text in the
renderSomethingfunction.
Expected Behavior
The component is hot-reloaded and the render is updated.
When using the manual bind in constructor syntax, hot reloading works.
Actual Behavior
Hot reloading message shows up but the bound function isn't re-rendered.
Reproducible Demo
https://github.com/levibuzolic/HotReloadBug
import React from 'react';
import {View, Text} from 'react-native';
export default class HotReloadingTest extends React.Component {
constructor(props) {
super(props);
this.manualBind = this.manualBind.bind(this);
}
render() {
return (
<View style={{flex: 1, paddingTop: 20}}>
<View style={{flex: 1, backgroundColor: 'rgba(0, 255, 0, 0.1)'}}>
{this.manualBind()}
</View>
<View style={{flex: 1, backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
{this.autoBind()}
</View>
</View>
);
}
manualBind() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Manual reloads fine</Text>
</View>
);
}
autoBind = () => {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Auto doesn’t hot reload</Text>
</View>
);
}
}