Using ES2016 Decorators in React Native

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.