Skip to content

Instantly share code, notes, and snippets.

@chenzhongchen27
Forked from darklight721/INSTRUCTIONS.md
Created June 21, 2018 13:15
Show Gist options
  • Save chenzhongchen27/13e8eb4bc3e38610c2f1e3211a2cf213 to your computer and use it in GitHub Desktop.
Save chenzhongchen27/13e8eb4bc3e38610c2f1e3211a2cf213 to your computer and use it in GitHub Desktop.
Using MobX with decorators in React Native

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
    }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment