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

Primary LanguageJavaScriptMIT LicenseMIT

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

NPM version Build Status Build status Coverage Status Downloads per month Contributions welcome

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

or

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

Step 2: Configure .babelrc

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

Syntax

Single class

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

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