Optimize inline style attributes in react-native. Removes duplicate style definitions and moves styles to a StyleSheet.
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 }
});npm install --save-dev babel-plugin-transform-react-native-style-optimizer.babelrc
{
"plugins": ["transform-react-native-style-optimizer"]
}babel --plugins transform-react-native-style-optimizer script.jsrequire("babel-core").transform("code", {
plugins: ["transform-react-native-style-optimizer"]
});