require("babel-core").transform("code", {
  plugins: ["transform-class-bound-properties"]
})

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() {
    // changes in this "manualBind" method shows up as usual
 
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Manual reloads fine</Text>
      </View>
    );
  }
 
  autoBind = () => {
    // changes in this "autoBind" method don't show up
 
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Auto doesn’t hot reload</Text>
      </View>
    );
  }
}

  class SomeClass {
    boundFn1 = () => {
      return this.field1
    }
 
    boundFn2 = ({ value }) => this.field2 + value
 
    asyncBoundFn1 = async () => {
      return await this.field1
    }
  }
 
  # will be transformed to
 
  class SomeClass {
    constructor() {
      this.boundFn1 = this.boundFn1.bind(this)
      this.boundFn2 = this.boundFn2.bind(this)
      this.asyncBoundFn = this.asyncBoundFn.bind(this)
    }
 
    boundFn1() {
      return this.field1
    }
 
    boundFn2({ value }) {
      return this.field2 + value
    }
 
    async asyncBoundFn() {
      return await this.someFn()
    }
  }