Repository files navigation

Style React Native components using CSS, PostCSS, Sass, Less or Stylus.

Quick links:Features •Documentation •Example Apps •Development •FAQ

• 🎉 You can share your CSS modules between React Native and React Web by usingclassName property in React Native, and by usingReact Native for Web for the browser.
• 👌 SupportsCSS,PostCSS,Sass,Less andStylus.
• 🔥 CSS Hot loading (live reloading).
• 💻 Supports responsive CSS features:CSS Media Queries andCSS Viewport Units.
• ✨ SupportsCSS variables.
• 🌐Platform-specific extensions for CSS, e.g.styles.ios.css,styles.android.css,styles.native.css.
• 🎩 Support forstyleName attribute that allows you to use CSS class names as strings, and allows hyphens in class names (like theclassName property in Web React).
• 📦 Suppports Typescript withReact Native type definitions that add support for React Native CSS modules andCSS, Sass, LESS, PostCSS, or Stylus transformers that automatically create typings for your CSS files.
• 🔍 Keep your CSS error free usinga custom stylelint config for React Native CSS modules

Using React Native CSS modules works almost the same way as using CSS modules with a Web React project, but there are some limitations. There is no support complex CSS selectors. Only simple CSS class selector (e.g..myClass) is supported. React Native also only supports a subset of browser's CSS properties for styling.

For more info about the differences between using CSS modules in Web and React Native, have a look atthis explanation in the FAQ.

App.scss

.container {flex:1;justify-content:center;align-items:center;}.blue {color:blue;}.blueText {@extend.blue;font-size:18px;}

App.js

importReactfrom"react";import{Text,View}from"react-native";importstylesfrom"./App.scss";constApp=()=>(<ViewclassName={styles.container}><TextclassName={styles.blueText}>Blue text</Text></View>);exportdefaultApp;

If you need CSS media queries or CSS viewport units, please have a look at theresponsive CSS features setup guide.

.wrapper {height:10vh;width:10vw;}@media (min-width:800px) {  .wrapper {height:20vh;width:20vw;  }}

CSS variables are not supported by default, but you can add support for them by usingPostCSS andpostcss-css-variables plugin.

Please have a look at theCSS variables setup guide.

:root {--text-color: blue;}.blue {color:var(--text-color);}

You might also need to share you variables from a CSS/Sass/Less/Stylus file to Javascript. To do that you can use the:export keyword:

colors.scss

$grey: #ccc;:export {  grey: $grey;}

App.js

importReactfrom"react";import{Text,View}from"react-native";importcolorsfrom"./colors.scss";importstylesfrom"./App.scss";constApp=()=>(<ViewclassName={styles.container}><TextclassName={styles.blueText}style={{color:colors.grey}}>      Grey text</Text></View>);exportdefaultApp;

Have a look at the example apps to see how you can use CSS modules for both React Native and Web using the same code.

• Example app
• CSS Media Queries example app
• CSS Viewport Units example app
• Example app with styleName syntax
• Typescript example app

• Setup CSS modules with CSS support
• Setup CSS modules with PostCSS support
• Setup CSS modules with Sass support
• Setup CSS modules with Less support
• Setup CSS modules with Stylus support
• Setup CSS modules with Responsive CSS support (CSS Media Queries & CSS Viewport Units)
• Setup CSS modules with CSS variables support
• Setup CSS modules with Typescript support
• Setup CSS modules with styleName attribute (use className as a string)
• Use CSS and Sass in the same project
• Setup recommended linting (ESLint & stylelint)
• Setup browser compatibility

• Frequently Asked Questions
• Stylelint config for React Native CSS modules
• List of CSS properties supported by React Native (out of date)

To see which new features are being planned and what is in progress, please have a look atthe development board.

If you want to suggest a new feature or report a bug, please open a new issue.

The idea for React Native CSS modules comes from these projects that have made a lot of work for supporting CSS and CSS modules in React Native:css-to-react-native andreact-native-sass-classname. A big thanks to them!

MIT