CODEWITHSUNDEEP
react-nativeexpomobxmobx-react
Jesper
Jesper

Reputation: 59

Mobx store doesn't trigger re-render on react-native project

I've tried to learn how can I use MobX with React Native. I tried to find some examples in GH but they are pretty old. (2-3 years old).

I want to write application on Expo Bare (ExpoKit), but I can't figure it out why my components do not rerender when I change MobX @observables.

I created a snack with my problem: https://snack.expo.io/@krasov/mobx-reproduction

Idk, may be i've misswatched documentation, but I can't figure out what the problem is here.

Upvotes: 1

Views: 526

Answers (1)

Danila
Danila

Reputation: 18476

If you were using MobX 6 then you now need to use makeObservable method inside constructor to achieve same functionality with decorators as with MobX 5 before:

import { makeObservable } from "mobx"

class Store {
  @observable string = 'Test String';
  @action setString = (string) => {
    this.string = string;
    console.log(`new value = ${this.string}`);
  };

  constructor() {
    // Just call it here
    makeObservable(this);
  }
}

Although there is new thing that will probably allow you to drop decorators altogether, makeAutoObservable:

import { makeAutoObservable } from "mobx"

class Store {
  // Don't need decorators now
  string = 'Test String';
  setString = (string) => {
    this.string = string;
    console.log(`new value = ${this.string}`);
  };

  constructor() {
    // Just call it here
    makeAutoObservable (this);
  }
}

More info here https://mobx.js.org/migrating-from-4-or-5.html and https://mobx.js.org/react-integration.html

Upvotes: 4

Related Questions