babel-plugin-react-native-classname-to-dynamic-style
Transform JSX className
property to a style
property that gets calculated at runtime in React Native. The plugin is used to match style objects containing parsed CSS media queries and CSS viewport units with React Native.
Usage
Step 1: Install
yarn add --dev babel-plugin-react-native-classname-to-dynamic-style
or
npm install --save-dev babel-plugin-react-native-classname-to-dynamic-style
.babelrc
Step 2: Configure {
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-dynamic-style"
]
}
Syntax
Single class
Example:
<Text = />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text = />;
...or with className
and style
:
<Text = = />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;
Multiple classes
[styles.class1, styles.class2].join(" ")
syntax
Using Example:
<Text = />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;
...or with className
and style
:
<Text = =/>
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;
Using template literal syntax
Example:
<Text = />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;
...or with className
and style
:
<Text = =/>
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;
Using ternary operator
Example:
<Text = />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = ; <Text =/>;