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
    }
@eduardojunio

This comment has been minimized.

Copy link

eduardojunio commented Oct 8, 2018

It doesn't work, I'm getting this error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled
Myreact-native version is 0.56.0

@fernando-pascoal

This comment has been minimized.

Copy link

fernando-pascoal commented Jul 2, 2019

It doesn't work, I'm getting this error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled
Myreact-native version is 0.56.0

It work for me ~> https://stackoverflow.com/questions/52758721/how-to-use-mobx-with-decorators-in-react-native-0-57

@avatari1

This comment has been minimized.

Copy link

avatari1 commented Jul 17, 2019

actually u need mobx-react@5 specifically which is known to work and also your babel.config.js to look like this

module.exports = function(api) {
api.cache(true);
   return {
      presets: ['babel-preset-expo'],
      "plugins": [
         [
            "@babel/plugin-proposal-decorators",
            {
               "legacy": true

            }
         ]
      ]
   
   };
};

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.