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
Step 2: Configure .babelrc
{
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-dynamic-style"
]
}
Syntax
Single class
Example:
<Text className={styles.myClass} />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text style={_reactNativeDynamicStyleProcessor.process(styles).myClass} />;
...or with className and style:
<Text className={styles.myClass} style={{ color: "blue" }} />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={[
_reactNativeDynamicStyleProcessor.process(styles).myClass,
{ color: "blue" }
]}
/>;
Multiple classes
Using [styles.class1, styles.class2].join(" ") syntax
Example:
<Text className={[styles.class1, styles.class2].join(" ")} />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={[
_reactNativeDynamicStyleProcessor.process(styles).class1,
_reactNativeDynamicStyleProcessor.process(styles).class2
]}
/>;
...or with className and style:
<Text
className={[styles.class1, styles.class2].join(" ")}
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={[
_reactNativeDynamicStyleProcessor.process(styles).class1,
_reactNativeDynamicStyleProcessor.process(styles).class2,
{ color: "blue" }
]}
/>;
Using template literal syntax
Example:
<Text className={`${styles.class1} ${styles.class2}`} />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={[
_reactNativeDynamicStyleProcessor.process(styles).class1,
_reactNativeDynamicStyleProcessor.process(styles).class2
]}
/>;
...or with className and style:
<Text
className={`${styles.class1} ${styles.class2}`}
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={[
_reactNativeDynamicStyleProcessor.process(styles).class1,
_reactNativeDynamicStyleProcessor.process(styles).class2,
{ color: "blue" }
]}
/>;
Using ternary operator
Example:
<Text className={isTrue ? styles.class1 : styles.class2} />
↓ ↓ ↓ ↓ ↓ ↓
var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");
<Text
style={
isTrue
? _reactNativeDynamicStyleProcessor.process(styles).class1
: _reactNativeDynamicStyleProcessor.process(styles).class2
}
/>;
