React Native CSS modules

Quick links: Features • Documentation • Examples

A guide for using CSS modules (with some limitations) for both Web React and React Native.

Why?

React Native does not offer any kind of built-in support for loading CSS from .css files and using it for styling. Many of us are already using CSS modules in an existing project and want to continue using CSS modules when developing React Native apps.

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.

Features

• 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.
• Hot loading for CSS/PostCSS/Sass/Less/Stylus files.
• Platform-specific extensions for CSS, e.g. .ios.css, .android.css, .native.css.
• Supports 2 syntaxes for using multiple CSS classes that work with React Native CSS modules and regular CSS modules.
• Support for CSS Media Queries (not by default, needs to be enabled).
• Typescript types that are compatible with React Native CSS modules
• Custom stylelint config for React Native CSS modules

React Native CSS modules Example Apps

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
• Typescript example app

Documentation

Setup

• 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 + CSS media queries
• Setup CSS modules + Typescript
• Use CSS and Sass in the same project
• Setup Web compatibility for React Native CSS modules

Other docs

• Stylelint config for React Native CSS modules
• List of CSS properties supported by React Native
• List of React Native CSS modules limitations

---

Special thanks

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!