Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
July 13, 2016

Using ES2016 Decorators in React Native

Application Development

*picture courtesy of pixabay

Decorators are a popular bit of functionality currently in Stage 1 of proposals for a future ECMAScript version. Experimental support of decorators is also available in TypeScript. Using decorators allows us to extend a function (class or property) by wrapping a function (decorator) around it. This can be useful for making properties read-only or suppressing warnings from a function. You can read more about decorators here and see the proposal here.

Using Decorators in React Native

Now that you’ve read about how great decorators are, you must be itching to use them in your React Native app. An excellent use for decorators is binding methods to the scope of the object instance. If you’ve read Jay Garcia’s excellent post on using ES6 Arrow functions with React Native, he highlights this issue and proposes a solution of using an arrow function.

Using the @autobind decorator will do the equivalent of this.fn = this.fn.bind(this); for a function defined on a class. Let’s see how we would go about using @autobind or any other decorator in our React Native application.

Setup and npm install {allthethings}

With version 0.22, React Native moved to Babel 6. Unfortunately, one of the breaking changes in the move to a plugin-based architecture was the loss of Decorator support. The status of the issue can be tracked on Babel’s Issue Tracker. Fortunately, in the meantime there is a workaround by Logan Smyth that allows us to use decorators as we did in Babel 5.

  1. First, we need to install this workaround.
    npm install --save babel-plugin-transform-decorators-legacy
  2. Next, we need to create a .babelrc file in the root of our React Native application (where we have our index js files and package.json)
            {
        "presets": [
            "react-native"
        ],
        "plugins": [
            "transform-decorators-legacy"
        ]
    }

What we have done here is tell babel that we will be using the react-native (default) set of plugins alongside the transform-decorators-legacy we just installed. Now we can use decorators!

@autobind

Once you have decorators working, it is extremely easy to use @autobind in our React Native app.

As with everything else, we will need to install the library:

npm install --save autobind-decorator

Before we may have had the following snippet:

Let’s switch it up to use @autobind:

Conclusion

Decorators are an excellent feature brought over from languages such as Python and Java (known as Annotations). They are used to wrap functionality over existing class functions at design time. I hope this has given you a better understanding of how to use them in React Native apps. If you have some useful decorators you have come across or created yourself, please let me know in the comments below.

Posted in Application Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top