babel-plugin-transform-react-native-style-optimizer

Optimize inline style attributes in react-native. Removes duplicate style definitions and moves styles to a StyleSheet.

Example

In

<View style={[{ width: 100, height: 100 }]} />;
<View style={[
    { width: 100, height: 200 },
    { height: 100, width: 100 },
    { width: 100, height: 200 },
    { width: 100, height: 100 }
  ]}
/>;

Out

<View style={[_styles.s0]} />;
<View style={[_styles.s1, _styles.s0]} />;
 
const _styles = require("react-native").StyleSheet.create({
  s0: { width: 100, height: 100 },
  s1: { width: 100, height: 200 }
});

Installation

npm install --save-dev babel-plugin-transform-react-native-style-optimizer

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-native-style-optimizer"]
}

Via CLI

babel --plugins transform-react-native-style-optimizer script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-native-style-optimizer"]
});

References

• https://facebook.github.io/react-native/docs/stylesheet.html