opened
francisbourquestudyo
username_0
I'm currently in the process of updating our project to the latest version of React-Native and I've been having problems with Mobx. Whenever we have an observable property declared without setting a value (because we do so in the constructor), the component isn't re-rendering when a change occurs. Here's an example: 

(we are using Typescript)
```
@observer
export class Counter extends React.Component<CounterProps> {
  @observable private _counter1: number; // Observer not triggered;
  @observable private _counter2: number = 1;

  constructor(props: CounterProps) {
    super(props);
    this._counter1 = 1;
  }

  render() {
    return (
      <RN.View style={_styles.container}>
        <RN.View>
          <RN.Text>Counter 1 - Not rerendering</RN.Text>
          <RN.Text>value = {this._counter1}</RN.Text>
          <RN.Button title="Add to counter 1" onPress={this._addToCounter1} />
        </RN.View>
        <RN.View>
          <RN.Text>Counter 2</RN.Text>
          <RN.Text>value = {this._counter2}</RN.Text>
          <RN.Button title="Add to counter 2" onPress={this._addToCounter2} />
        </RN.View>
      </RN.View>
    );
  }

  @action
  private _addToCounter1 = () => {
    this._counter1++;
  };

  @action
  private _addToCounter2 = () => {
    this._counter2++;
  };
}
```

When the value of `_counter2` changes, the component is re-rendered, whereas it's not the case for `_counter1`. Here's a project with a repro https://github.com/username_0/mobx-observables-test.

I'm not sure whether it's an issue with Mobx as the same mechanic works on the ReactJS.
Observer not triggered with React-Native
issue
created
mweststrate
username_1
Please check your babel config. Probably a wrong plugin order
comment
created
francisbourquestudyo
username_0
I've tried change the order, but it doesn't fix the problem.
comment
closed
francisbourquestudyo
username_0
issue
created
francisbourquestudyo
username_0
I found the cause. I had this plugin `['@babel/plugin-proposal-class-properties', { loose: true }]` in my babel config. When removing it, the `_counter1` syntax works. Don't know why it works with ReactJS though. Thanks for the help. Closing.
comment