Load Sass files to react native style objects.

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

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

Add this to your rn-cli.config.js (make one if you don't have one already):

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-sass-transformer");
  },
  getSourceExts() {
    return ["js", "jsx", "scss", "sass"];
  }
};

...or if you are using Expo, in app.json:

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

Your App.scss file might look like this:

.myClass {
  color: blue;
}
.myOtherClass {
  color: red;
}

When you import your stylesheet:

import styles from "./App.scss";

Your imported styles will look like this:

var styles = {
  myClass: {
    color: "blue"
  },
  myOtherClass: {
    color: "red"
  }
};

You can then use that style object with an element:

<MyElement style={styles.myClass} />