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.
yarn add --dev babel-plugin-react-native-classname-to-dynamic-style
or
npm install --save-dev babel-plugin-react-native-classname-to-dynamic-style
.babelrc{
"presets": [
"react-native"
],
"plugins": [
"react-native-classname-to-dynamic-style"
]
}
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 " }
] }
/> ;
[styles.class1, styles.class2].join(" ") syntaxExample:
< 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 " }
] }
/> ;
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 " }
] }
/> ;
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
}
/> ;
