Quick & Easy MobX Tutorial in ReactNative — Beginner Steps

This is a very simple, quick and easy tutorial on React Native using MobX for you to get started on the go!

First create a simple react native project using the following link
https://reactnative.dev/docs/environment-setup. Yeah beginner’s steps lol!

Now run your simple init react native project. Just to make sure that your project is atleast up and running. Okay so first step is done. We have our another simple react native project. Woohoo!

Now let’s try integrating MobX!

Let’s first get a quick overview of what MobX really is!

MobX is state management library. It means that it handles and manages app state throughout the application.

I have found Redux, ReactHooks and MobX as the most popular state management libraries for React and ReactNative.

To get to know the idea and difference between these follow this link Why we shifted from Redux to MobX (logicwind.com)

Both Redux and MobX does almost the same thing. But MobX is easy 😎.

Advantages:

  • Easy to setup
  • Easy to explain
  • Easy to manage
  • No boiler plate
  • Magical Rendering
  • And yeah all the good stuff

Now’s let get started!

Open your regular code editor. (I personally prefer VSCode and of course with black theme 😜)

Okay so first you need to install two dependencies to get started which are mobx and mobx-react. Use this command npm install mobx mobx-react

And also you will need a DEV dependency npm install --save-dev @babel/plugin-proposal-decorators because MobX works on decorators.

Now in your project you will find a file babel.config.js
In that you will find a key preset. Add below code below this preset key

In the latest versions of MobX you may also need to add more configurations as given below in the image. You may add it if needed.

Also you will have to enable Experimental Decorators in your code editor’s setting. But it’s not necessary. It’s just for the red lines that might show up in your code editor

Let’s begin with our regular stuff. Yeah that’s right CODING!

In your project create a file call TodoStore.js
Something like this simple code given below

observable — an element whenever updates it will re-render wherever it is used in the application

action — it allows to create a function in the store which further updates the observable

computed — it is called automatically whenever an observable is updated

Great. We have created our first store! You can now create other stores in similar manner.

Now we have to wrap/bind this store to our application in our App.js as shown below using Provider from mobx-react

Now let’s create a Home.js to get our simple Todo demo up and running using MobX functionality

PS: I have added react-native-swipe-item and react-native-elements just to have good UI/UX and clear idea of functional requirement

inject — it will get the whole store in our Home Component

observer — it will allow our Home component to listen to the changes/updates made into the observableof our TodoStore

As you can see I have render todosCompletedCount() in Text component. This is a @computed function of our TodoStore. It will be called initially and whenever a observable is updated

Voila! We are done! That's all folks!
Yeah it's that simple and easy!
Hope you find it useful!
Thanks for reading!

Originally published at http://blog.logicwind.com on February 2, 2021.

We craft digital products for your business growth. Development | Marketing | Branding | Strategic Partnership