Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

React Native CSS modules

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

Quick links: Features β€’ Documentation β€’ Example β€’ Development β€’ FAQ



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 at this explanation in the FAQ.

Basic example using Sass


.container {
  flex: 1;
  justify-content: center;
  align-items: center;

.blue {
  color: blue;

.blueText {
  @extend .blue;
  font-size: 18px;


import React from "react";
import { Text, View } from "react-native";
import styles from "./App.scss";

const App = () => (
  <View className={styles.container}>
    <Text className={styles.blueText}>Blue text</Text>
export default App;

CSS media queries and CSS viewport units

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

.wrapper {
  height: 10vh;
  width: 10vw;

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

CSS variables

CSS variables are not supported by default, but you can add support for them by using PostCSS and postcss-css-variables plugin.

Please have a look at the CSS variables setup guide.

:root {
  --text-color: blue;

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

Exporting variables from CSS to Javascript

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:


$grey: #ccc;

:export {
  grey: $grey;


import React from "react";
import { Text, View } from "react-native";
import colors from "./colors.scss";
import styles from "./App.scss";

const App = () => (
  <View className={styles.container}>
    <Text className={styles.blueText} style={{ color: colors.grey }}>
      Grey text
export default App;

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.


πŸ“š Setup

πŸ“š Other documentation


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.

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!




No releases published


No packages published