Transform JSX className property to style property in react-native.
npm install babel-plugin-react-native-classname-to-style
 




Transform JSX className property to style property in react-native.
``sh`
yarn add --dev babel-plugin-react-native-classname-to-style
or
`sh`
npm install --save-dev babel-plugin-react-native-classname-to-style
``
{
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-style"
]
}
Example:
`jsx`
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
---
...or with className and style:
`jsx`
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
#### Using [styles.class1, styles.class2].join(" ") syntax
Example:
`jsx`
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
---
...or with className and style:
`jsx`
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
#### Using template literal syntax
Example:
`jsx} />`
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
---
...or with className and style:
`jsx${styles.class1} ${styles.class2}}`
style={{ color: "blue" }}
/>
↓ ↓ ↓ ↓ ↓ ↓
`jsx`
Example:
`jsx`
↓ ↓ ↓ ↓ ↓ ↓
`jsx``