React Native CSS modules

Quick links: Features • Documentation • Examples • Development

React Native does not offer any kind of built-in support for loading CSS from .css files and using it for styling.

So far the only way has been to use React Native's style property or any of the available CSS-in-JS libraries. Now you can use className property and keep your styles in separate CSS files.

• 🎉 You can share your CSS modules between React Native and React Web by using className property in React Native, and by using React Native for Web for the browser.
• 👌 Supports CSS, PostCSS, Sass, Less and Stylus.
• 🔥 CSS Hot loading (live reloading).
• 💻 Supports responsive CSS features: CSS Media Queries and CSS Viewport Units.
• 🌐 Platform-specific extensions for CSS, e.g. styles.ios.css, styles.android.css, styles.native.css.
• 🎩 Support for styleName attribute that allows you to use CSS class names as strings, and allows hyphens in class names.
• 📦 Typescript typings that are compatible with React Native CSS modules
• 🔍 Custom stylelint config for React Native CSS modules

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

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

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 recommended linting (ESLint & stylelint)
• 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 browser compatibility

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

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 and react-native-sass-classname. A big thanks to them!