Awesome
babel-plugin-react-native-stylename-to-style
Transform JSX styleName
property to style
property in react-native. The styleName
attribute and syntax are based on babel-plugin-react-css-modules.
Usage
Step 1: Install
yarn add --dev babel-plugin-react-native-stylename-to-style
or
npm install --save-dev babel-plugin-react-native-stylename-to-style
Step 2: Configure .babelrc
You must give one or more file extensions inside an array in the plugin options.
{
"presets": [
"react-native"
],
"plugins": [
["react-native-stylename-to-style", {
"extensions": ["css"]
}]
]
}
Syntax
Anonymous reference
Anonymous reference can be used when there is only one stylesheet import.
Single class
import "./Button.css";
<View styleName="wrapper">
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";
<View style={Button.wrapper}>
<Text>Foo</Text>
</View>;
Multiple classes
import "./Button.css";
<View styleName="wrapper red-background">
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";
<View style={[Button.wrapper, Button["red-background"]]}>
<Text>Foo</Text>
</View>;
Expression
import "./Button.css";
const name = "wrapper";
<View styleName={name}>
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";
const name = "wrapper";
<View
style={(name || "")
.split(" ")
.filter(Boolean)
.map(function(name) {
Button[name];
})}
>
<Text>Foo</Text>
</View>;
Expression with ternary
import "./Button.css";
const condition = true;
const name = "wrapper";
<View styleName={condition ? name : "bar"}>
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";
const condition = true;
const name = "wrapper";
<View
style={((condition ? name : "bar") || "")
.split(" ")
.filter(Boolean)
.map(function(name) {
Button[name];
})}
>
<Text>Foo</Text>
</View>;
with styleName
and style
:
import "./Button.css";
<View styleName="wrapper" style={{ height: 10 }}>
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";
<View style={[Button.wrapper, { height: 10 }]}>
<Text>Foo</Text>
</View>;
Named reference
Named reference is used to refer to a specific stylesheet import.
Single class
import foo from "./Button.css";
<View styleName="foo.wrapper">
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import foo from "./Button.css";
<View style={foo.wrapper}>
<Text>Foo</Text>
</View>;
Multiple classes
import foo from "./Button.css";
import bar from "./Grid.css";
<View styleName="foo.wrapper bar.column">
<Text>Foo</Text>
</View>;
↓ ↓ ↓ ↓ ↓ ↓
import foo from "./Button.css";
import bar from "./Grid.css";
<View style={[foo.wrapper, bar.column]}>
<Text>Foo</Text>
</View>;