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
.babelrc
Step 2: Configure 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 ="wrapper"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <Text>Foo</Text></View>;
Multiple classes
import "./Button.css"; <View ="wrapper red-background"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <Text>Foo</Text></View>;
Expression
import "./Button.css";const name = "wrapper"; <View => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";const name = "wrapper"; <View => <Text>Foo</Text></View>;
Expression with ternary
import "./Button.css"; const condition = true;const name = "wrapper"; <View => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; const condition = true;const name = "wrapper"; <View => <Text>Foo</Text></View>;
styleName
and style
:
with import "./Button.css"; <View ="wrapper" => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <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 ="foo.wrapper"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import foo from "./Button.css"; <View => <Text>Foo</Text></View>;
Multiple classes
import foo from "./Button.css";import bar from "./Grid.css"; <View ="foo.wrapper bar.column"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import foo from "./Button.css";import bar from "./Grid.css"; <View => <Text>Foo</Text></View>;