react-native-css-modules ·

Use CSS modules in React Native & React Native Web

npm i react-native-css-modules

Note: this package is in early development, use with caution

Must be used with Metro web

Features

• Minimal selector support (.button.small)
• CSS Vars

Setup

For app developers

Metro config for React Native

SWC plugin for Next.js

For library developers

Babel plugin

Usage

.Button {
  background-color: white;
  padding: 10px;
  border-radius: 5px;

  &.disabled {
    background-color: grey;
  }

  &.small {
    padding: 5px;
  }
}

import {View} from "react-native";

import styles from "./Button.module.scss";

import {useDynamicStyles} from "react-native-css-modules";

const Button = ({children, disabled, small}) => {
  const dynamicStyles = useDynamicStyles();

  return <View style={dynamicStyles([
    styles.Button,
    disabled && styles.disabled,
    small && styles.small
  ])}>
    {children}
  </View>;
};

export default Button;

<Button></Button>

All style props must be wrapped in a dynamicStyles() call from the useDynamicStyles hook to support selectors & CSS vars. If you want to automatically create wrapped versions of the primitive components from RN, use dynamicallyStyled():