Skip to content

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

License

Notifications You must be signed in to change notification settings

kristerkari/react-native-css-modules

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

React Native CSS modules

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

Quick links: FeaturesDocumentationExample AppsDevelopmentFAQ

Features

Examples

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

App.scss

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

.blue {
  color: blue;
}

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

App.js

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>
  </View>
);
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:

colors.scss

$grey: #ccc;

:export {
  grey: $grey;
}

App.js

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
    </Text>
  </View>
);
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.

Documentation

📚 Setup

📚 Other documentation

Development

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!


License

MIT