React Native CSS modules

Quick links: Features • Documentation • Examples

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

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
• 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 + Typescript
• Setup CSS modules with styleName attribute (use className as a string)
• Use CSS and Sass in the same project
• Setup Web compatibility for React Native CSS modules

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

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!