Connecting MobX to our app

MobX widely uses ES.next decorators. So, first of all, let's add support for decorators to our React Native app. It's done by installing babel-preset-react-native-stage-0:

npm install babel-preset-react-native-stage-0 --save

Then, we add a decorator preset to .babelrc:

{
 "presets": ["react-native", "react-native-stage-0/decorator-support"]
 }

Now, we will be able to use decorators in our project. Don't forget to restart the packager by stopping and running the following command:

npm start reset-cache

First of all, we will set our MobX to strict mode inside our app/index.js, so we will follow the Flux architectural pattern. In strict mode, if we will change our state outside of actions, we will get an exception:

import { useStrict } from 'mobx';
useStrict(true);

Now, we will wrap our application with...