babel-plugin-react-native-classname-to-style

 

Transform JSX className property to style property in react-native.

Usage

$3

``sh
yarn add --dev babel-plugin-react-native-classname-to-style
`

or

`sh
npm install --save-dev babel-plugin-react-native-classname-to-style
`

$3

`
{
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-style"
]
}
`

Syntax

Single class

Example:

`jsx

`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

---

...or with className and style:

`jsx

`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

Multiple classes

#### Using [styles.class1, styles.class2].join(" ") syntax

Example:

`jsx

`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

---

...or with className and style:

`jsx
className={[styles.class1, styles.class2].join(" ")}
style={{ color: "blue" }}
/>
`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

#### Using template literal syntax

Example:

`jsx
${styles.class1} ${styles.class2}} />
`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

---

...or with className and style:

`jsx
className={${styles.class1} ${styles.class2}}
style={{ color: "blue" }}
/>
`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

`

Using ternary operator

Example:

`jsx

`

↓ ↓ ↓ ↓ ↓ ↓

`jsx

``