React Native with MobX — Getting Started – React Native Training – Medium

#reactjs Native with #MobX — Getting Started –

  • Our App component will have access to the store as props.
  • Let’s create the App component.
  • 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.
  • The 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.
  • We will have access to our store methods as props from our store and will be using them to interact with our app state.

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. This app will…

@survivejs: #reactjs Native with #MobX — Getting Started –

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:

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 couple of babel plugins so we can use ES7 decorators:

Now, let’s create a .babelrc file to configure our babel plugins:

‘presets’: [‘react-native’],

‘plugins’: [‘transform-decorators-legacy’]

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:

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.

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.

My Name is Nader Dabit . I am a developer at School Status where we help educators make smart instructional decisions by providing all their data in one place. Check us out @schoolstatusapp.

If you enjoyed this article, please recommend and share it! Thanks for your time

React Native with MobX — Getting Started – React Native Training – Medium