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} />