babel-plugin-react-native-unistyles

Warning

This project was designed for Unistyles version 2.0 and earlier. As of Unistyles 3.0, a built-in Babel plugin is required and it enables what this project originally aimed to do and much more.

Experimental Babel plugin for React Native Unistyles to automatically inject useStyles hook whenever stylesheet is referenced.

Before transformation:

import { View } from "react-native";
import { createStyleSheet } from "react-native-unistyles";

function App() {
  return <View style={styles.container} />;
}

const styles = createStyleSheet({
  container: {
    width: 100,
    height: 100,
  }
});

After transformation:

import { View } from "react-native";
import { createStyleSheet, useStyles as _useStyles } from "react-native-unistyles";

function App() {
  const { styles: _styles } = useStyles(_stylesheet);
  return <View style={_styles.container} />;
}

const _stylesheet = createStyleSheet({
  container: {
    width: 100,
    height: 100,
  }
});

Installation

pnpm install -D babel-plugin-react-native-unistyles

After installing, make sure to update your Babel configuration by adding "babel-plugin-react-native-unistyles" to the plugins array. This allows Babel to apply the plugin during compilation and transform your code as needed.

Contributing

Contributions are welcome. Please submit your pull requests or open issues to propose changes or report bugs.