Awesome
babel-plugin-react-native-classname-to-style
Transform JSX className
property to style
property in react-native.
Usage
Step 1: Install
yarn add --dev babel-plugin-react-native-classname-to-style
or
npm install --save-dev babel-plugin-react-native-classname-to-style
Step 2: Configure .babelrc
{
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-style"
]
}
Syntax
Single class
Example:
<Text className={styles.myClass} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={styles.myClass} />
...or with className
and style
:
<Text className={styles.myClass} style={{ color: "blue" }} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[styles.myClass, { color: "blue" }]} />
Multiple classes
Using [styles.class1, styles.class2].join(" ")
syntax
Example:
<Text className={[styles.class1, styles.class2].join(" ")} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[styles.class1, styles.class2]} />
...or with className
and style
:
<Text
className={[styles.class1, styles.class2].join(" ")}
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[styles.class1, styles.class2, { color: "blue" }]} />
Using template literal syntax
Example:
<Text className={`${styles.class1} ${styles.class2}`} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[styles.class1, styles.class2]} />
...or with className
and style
:
<Text
className={`${styles.class1} ${styles.class2}`}
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[styles.class1, styles.class2, { color: "blue" }]} />
Using ternary operator
Example:
<Text className={isTrue ? styles.class1 : styles.class2} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={isTrue ? styles.class1 : styles.class2} />