Here, we will combine MobX and React Native to create a simple list app. If you’re looking to see how to get started with MobX and React Native, this should be a good place to do so.

Looking to learn React Native? Check out React Native Training.

To view the final repo, click here.

MobX is a very intuitive state management library that has been very easy for me to grasp and get up and running. I’ve used Flux, Alt, Redux, and Reflux in developing React and React Native apps, and I can say without a doubt that MobX has quickly become my favorite way to manage state because of it’s simplicity. I look forward to using it in future projects and seeing where the project goes from here.

This app will have two main components, one that will allow us to create new lists and one that will allow us to add new items to our list.

To get started, we first need to create a new React Native application:

react-native init ReactNativeMobX

Next, we’ll go ahead and change into the new directory we created and install the dependencies we will need: mobx and mobx-react

npm i mobx mobx-react --save

We will also need to install a babel plugin so we can use ES7 decorators:

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

Now, let’s update the .babelrc file to configure our babel plugins:

{

"presets": ["react-native"],

"plugins": ["transform-decorators-legacy"]

}

React Native Version 0.56.0 +

If you are using version 0.56.0 or newer of React Native, you will need to use a different version of babel plugin transform decorators legacy (see this issue).

Instead of installing babel-plugin-transform-decorators-legacy , try installing @babel/plugin-proposal-decorators .

You’ll also need to set up your babel configuration in .babelrc a little differently:

We only need to set the react-native preset because we are writing a custom .babelrc file. We set the react-native preset to get the default configuration and then specify more plugins that run before it (in our case, the transform-decorators-legacy plugin).

Now that we have our project configured, we will start writing some code.

In the root directory, create a folder called app. In app, create a folder called mobx. In mobx, create a file called listStore.js:

Import observable from mobx — observable adds observable capabilities to existing data structures like objects, arrays and class instances. This can simply be done by annotating your class properties with the @observable decorator (ES.Next), or by invoking the observable or extendObservable functions (ES5). Create a new class called ObservableListStore Create an observable array called list Create three methods to use on the list array Create a new instance of ObservableListStore and store it in observableListStore variable Export the store

Now that we have a store created, let’s to into the index file of the app and change the entry point to use the store and add create the navigation. If you are developing for Android, this will be index.android.js. If you are developing for iOS, this will be index.ios.js :

In our index file we’ve created a basic navigation state and imported our newly created store. We pass the store down as a prop in our initialRoute. We’ve also set our initial route as a component that we have yet to create, App. Our App component will have access to the store as props.

In configureScene we check to see if the type is ‘Modal’, and if so we call the floatFromBottom sceneConfig which will bring up our next scene as a modal.

Now, let’s create the App component. This will be a fairly large component and will have a lot going on, but basically we are creating a user interface that will allow us to add and remove list items. We will have access to our store methods as props from our store and will be using them to interact with our app state. In app/App.js :

I’ll try to go over all of the main things going on in this file that may not be apparent. If you have any questions or something is not clear, please leave a comment and I’ll try to update or respond.

We import observer from mobx-react/native We decorate our class with the @observer decorator. This will make sure that each component individually re-renders when relevant data changes. We import a component which is yet to be created — NewItem. This will be the component we navigate to when we want to add new items to our list. In addListItem, we call this.props.store.addListItem passing in this.state.text. this.state.text will be updated in the updateText method attached to TextInput. In removeListItem we call this.props.store.removeListItem and pass in the item. In addItemToList we call this.props.navigator.push and pass in both the item and store as props. In the render method, we get access to the store by destructuring it from our props:

const { list } = this.props.store

8. In the render method, we also create a ui and wire up our class methods.

Finally, we create our NewItem component:

If you’re familiar with React or React Native, nothing here is special. We are basically getting access to our item as props and looping through the items array of the item if any items exist within it. If not, we display a message.

The only way we interact with the store in this component is when we call addItem, which calls this.props.store.addItem and passes in this.props.item and this.state.newItem .

That should be it!

To view the final repo, click here.