react-native-css

library3.0.7jsnpmunverified

React Native CSS (v3.0.7) lets you write standard CSS stylesheets in React Native components. It uses Lightning CSS under the hood for fast parsing and supports features like CSS variables, nesting, and media queries. Unlike styled-components or other CSS-in-JS libraries, it compiles CSS files into native styles at build time via Metro, offering near-zero runtime overhead. Active development with weekly releases. Requires React 19, React Native >=0.81, and Expo SDK 54+.

testing

npm install react-native-css

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-CSS

react-native-css

testingjavascriptv3.0.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createStyleSheet

✓ import { createStyleSheet } from 'react-native-css'

✗ const createStyleSheet = require('react-native-css')

ESM-only; CommonJS require() fails because the package is type: module.

css

✓ import { css } from 'react-native-css'

✗ import css from 'react-native-css'

css is a named export, not default.

StyleProvider

✓ import { StyleProvider } from 'react-native-css'

Use StyleProvider at the root of your app to enable CSS theming. Required for CSS variables and media queries.

useStyle

✓ import { useStyle } from 'react-native-css'

✗ import { useStyle } from 'react-native-css/hooks'

useStyle is a named export from the main entry, not a subpath.

Creates a simple React Native app using a CSS stylesheet. Shows createStyleSheet, StyleProvider, and applying styles to components.

// App.js import React from 'react'; import { View, Text } from 'react-native'; import { createStyleSheet, StyleProvider } from 'react-native-css'; const styles = createStyleSheet(` .container { flex: 1; justify-content: center; align-items: center; background-color: #f0f0f0; } .title { font-size: 24; color: #333; font-weight: bold; } `); function App() { return ( <StyleProvider> <View style={styles.container}> <Text style={styles.title}>Hello from CSS!</Text> </View> </StyleProvider> ); } export default App;

Debug

Known issues

breakingVersion 3.x requires React 19, React Native >=0.81, and Expo SDK 54+.

fix

Upgrade your project to React 19, React Native 0.81+, and Expo SDK 54+.

affects: >=3.0.0

breakingESM-only: CommonJS require() is not supported. Use ESM imports.

fix

Change require() calls to import statements and ensure your project uses ES modules.

affects: >=3.0.0

deprecatedThe 'style' prop no longer accepts plain objects; use the compiled style object from createStyleSheet.

fix

Replace inline style objects with class references from stylesheet.

affects: >=2.0.0

gotchaCSS variables must be defined in the StyleProvider's theme prop; they are not read from :root automatically.

fix

Pass variables via <StyleProvider theme={{ colors: { primary: 'blue' } }}>.

affects: >=3.0.0

gotchaMedia queries in createStyleSheet are evaluated at build time, not runtime. They will not respond to device orientation changes dynamically.

fix

Use useWindowDimensions or similar for dynamic layout changes.

affects: >=3.0.0

Errors

Common errors & fixes

SyntaxError: Cannot use import statement outside a module

Trying to use ESM imports in a CommonJS project or Node.js without type: module.

fix

Add "type": "module" to your package.json or rename file to .mjs.

TypeError: (0 , _reactNativeCss.createStyleSheet) is not a function

Importing from wrong package (e.g., react-native-css/native) or using default import instead of named.

fix

Use import { createStyleSheet } from 'react-native-css'.

Error: StyleProvider is missing. Wrap your app in <StyleProvider> to use CSS.

Using createStyleSheet without wrapping root component in StyleProvider.

fix

Add <StyleProvider> as the root component of your app.

Module not found: Can't resolve 'lightningcss'

Missing peer dependency lightningcss.

fix

Run npm install lightningcss@>=1.27.0.

Upgrade

Version history

3.0.7latest on npm

Audit

Dependencies

reactrequiredpeer dependency: React >=19

react-nativerequiredpeer dependency: React Native >=0.81

lightningcssrequiredpeer dependency: CSS parser >=1.27.0

@expo/metro-configrequiredpeer dependency: for Metro bundler integration >=54

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/nativewind/react-native-css ↗

packagereact-native-css ↗

homepagehttps://github.com/nativewind/react-native-css#readme ↗