xuqianjin/babel-plugin-react-native-classname-to-dynamic-style

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.

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

Transform JSX className property to a style property that calculates styles 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.

Usage

Step 1: Install

yarn add --dev babel-plugin-react-native-classname-to-dynamic-style-extend

or

npm install --save-dev babel-plugin-react-native-classname-to-dynamic-style-extend

Step 2: Configure .babelrc

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

Syntax

Single class

Example:

<Text className={styles.myClass} />

↓ ↓ ↓ ↓ ↓ ↓

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

<Text style={_reactNativeDynamicStyleProcessor.process(styles).myClass} />;

<Text className={isTrue && styles.myClass} />

↓ ↓ ↓ ↓ ↓ ↓

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

<Text
  style={isTrue && _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" }
  ]}
/>;

Multiple classes

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

Example:

<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" }
  ]}
/>;

Using template literal syntax

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" }
  ]}
/>;

Using ternary operator

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

Using array

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

Using array operator

Example:

<Text className={[styles.class1, isTrue && styles.class2]} />

↓ ↓ ↓ ↓ ↓ ↓

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    isTrue && _reactNativeDynamicStyleProcessor.process(styles).class2
  ]}
/>;

---

<Text className={[styles.class1, isTrue ? styles.class2 : styles.class3]} />

↓ ↓ ↓ ↓ ↓ ↓

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    isTrue
      ? _reactNativeDynamicStyleProcessor.process(styles).class2
      : _reactNativeDynamicStyleProcessor.process(styles).class3
  ]}
/>;