React Native sass transformer

 

what is the React Native Sass Transformer?

Use Sass to style your React Native apps.

Behind the scenes the Sass files are transformed to react native style objects (look at the examples).

This transformer can be used together with React Native CSS modules.

Please use the .scss file extension for SCSS syntax and the .sass file extension for indented Sass syntax.

Stackoverflow.com

 

React-Native styling using CSS stylesheets and class names

need to config react native sass /css transformer https://github.com/kristerkari/react-native-sass-transformer

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.

Please check out this link : https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

When using React native typescript, you need to install this package also https://github.com/kristerkari/react-native-types-for-css-modules

Installation and configuration

Step 1: Install

```yarn add --dev react-native-sass-transformer sass```

Step 2: Configure the react native packager

For React Native v0.57 or newer / Expo SDK v31.0.0 or newer

Add this to metro.config.js in your project's root (create the file if it does not exist already):

``` 

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-sass-transformer")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

``` 

If you are using Expo, you also need to add this to app.json:

```

{
  "expo": {
    "packagerOpts": {
      "config": "metro.config.js",
      "sourceExts": ["js", "jsx", "scss", "sass"]
    }
  }
}

``` 

For Expo SDK v30.0.0 or older

If you are using Expo, instead of adding the rn-cli.config.js file, you need to add this to app.json:

{
  "expo": {
    "packagerOpts": {
      "sourceExts": ["js", "jsx", "scss", "sass"],
      "transformer": "node_modules/react-native-sass-transformer/index.js"
    }
  }
}

Platform specific extensions

If you need React Native's platform specific extensions for your Sass files, you can use babel-plugin-react-native-platform-specific-extensions. Platform specific extensions for files imported using Sass' @import are supported by default.

Sass options

If you need to pass options (e.g. functions) to sass, you can do so by creating a transformer.js file and doing the following:

// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");

// For React Native version 0.56-0.58
// var upstreamTransformer = require("metro/src/reactNativeTransformer");

// For React Native version 0.52-0.55
// var upstreamTransformer = require("metro/src/transformer");

// For React Native version 0.47-0.51
// var upstreamTransformer = require("metro-bundler/src/transformer");

// For React Native version 0.46
// var upstreamTransformer = require("metro-bundler/build/transformer");

var sassTransformer = require("react-native-sass-transformer");

module.exports.transform = function({ src, filename, options }) {
  if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
    var opts = Object.assign(options, {
      sassOptions: {
        functions: {
          "rem($px)": px => {
            px.setValue(px.getValue() / 16);
            px.setUnit("rem");
            return px;
          }
        }
      }
    });
    return sassTransformer.transform({ src, filename, options: opts });
  } else {
    return upstreamTransformer.transform({ src, filename, options });
  }
};

After that in metro.config.js point the babelTransformerPath to that file:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./transformer.js")
    },
    resolver: {
      sourceExts: [...sourceExts, "scss", "sass"]
    }
  };
})();

Reference:
https://github.com/najathi/expo-sdk-48-sass-transformer
https://github.com/najathi/expo-sass-transformer-ts