Use CSS to style your React Native apps.
Behind the scenes the
When you import your stylesheet:
Your imported styles will look like this:
You can then use that style object with an element:
Plain React Native:
React Native CSS modules using className property:
React Native CSS modules using styleName property:
If you are using Expo, you also need to add this to
Behind the scenes the
.css
files are transformed to react native style objects (look at the examples).This transformer can be used together with React Native CSS modules.
How does it work?
YourApp.css
file might look like this:.myClass {
color: blue;
}
.myOtherClass {
color: red;
}
.my-dashed-class {
color: green;
}
When you import your stylesheet:
import styles from "./App.css";
Your imported styles will look like this:
var styles = {
myClass: {
color: "blue"
},
myOtherClass: {
color: "red"
},
"my-dashed-class": {
color: "green"
}
};
You can then use that style object with an element:
Plain React Native:
<MyElement style={styles.myClass} />
<MyElement style={styles["my-dashed-class"]} />
React Native CSS modules using className property:
<MyElement className={styles.myClass} />
<MyElement className={styles["my-dashed-class"]} />
React Native CSS modules using styleName property:
<MyElement styleName="myClass my-dashed-class" />
Installation and configuration
Step 1: Install
yarn add --dev react-native-css-transformer
Step 2: Configure the react native packager
For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
Add this tometro.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-css-transformer")
},
resolver: {
sourceExts: [...sourceExts, "css"]
}
};
})();
If you are using Expo, you also need to add this to
app.json
:{
"expo": {
"packagerOpts": {
"config": "metro.config.js"
}
}
}
For React Native v0.56 or older
If you are using React Native without Expo, add this torn-cli.config.js
in your project's root (create the file if you don't have one already):module.exports = {
getTransformModulePath() {
return require.resolve("react-native-css-transformer");
},
getSourceExts() {
return ["js", "jsx", "css"];
}
};
For Expo SDK v30.0.0 or older
If you are using Expo, instead of adding thern-cli.config.js
file, you need to add this to app.json
:{
"expo": {
"packagerOpts": {
"sourceExts": ["js", "jsx", "css"],
"transformer": "node_modules/react-native-css-transformer/index.js"
}
}
}