Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.