Let’s assume you have your project running with the latest expo version.

Dependencies

Let’s add dependencies for mobx and its decorators 😍

npm i mobx mobx-react --save

npm i babel-plugin-transform-decorators-legacy --save-dev

Babel

Open babel config (.babelrc in your root folder) and edit it to be like this

{

"presets": ["babel-preset-expo"],

"plugins": [

[

"@babel/plugin-proposal-decorators",

{

"legacy": true

}

]

]

}

Mobx store

Time to create a store. Create a mobx folder with your-store.js or your-store.ts file. I’m using TypeScript in my project, so it’s store.ts . Who else loves TypeScript? 🙋

Coding the store

Add some code to your store. Here we have a very simple property and the action to update it. Cool!

Connecting the store

Time to connect the store to the app. Navigate to your App.tsx and wrap the <AppContainer /> with <Provider> component from mobx .

If you don’t have <AppContainer/> just refactor your code a little, see here.

Almost there! Subscribing to the store.

Let’s subscribe to the observable store that we created.

Updating the store

Time to update the property.

Done!

Small hint: I love interfaces in TypeScript and intellisense they provide so I normally create the interface IObservableStoreProps and extend it later in the component props.

Enjoy your coding!