Using MobX with decorators in React Native

INSTRUCTIONS_MOBX.md

Using MobX with decorators in React Native

The following instructions should work with React Native v0.32:

1. Install mobx libraries.

   npm install mobx --save
   npm install mobx-react --save

2. Install babel plugins to enable decorators.

   npm install babel-preset-react-native --save-dev
   npm install babel-plugin-transform-decorators-legacy --save-dev

3. Create a .babelrc file.

   {
    "presets": ["react-native"],
    "plugins": ["transform-decorators-legacy"]
   }

4. Done! Now you can write components like:

   import React, { Component } from 'react'
   import { TextInput } from 'react-native'
   import { action } from 'mobx'
   import { inject, observer } from 'mobx-react/native'
   
   @inject('store') @observer
   export default class CommentBox extends Component {
     render() {
       return <TextInput value={this.props.store.comment} onChangeText={this.handleChange} />
     }
     
     @action
     handleChange = value => this.props.store.comment = value
   }