React Library HubReact Library Hub
RE

React Native Css Interop

react-native-css-interop

Provides a layer of interoperability between React Native and CSS stylesheets allowing to use CSS as a styling language for both React Native and React Native Web. The interoperability goes beyond basic styles allows the use of modern features such as CSS

React Native Libraries
react-native
react
native
theme
style
react-native-css-interop
React Native Libraries
javascript
npm
frontend
Documentation GitHub npm
Stars
8.1k
Weekly
0
Open issues
69
Bundle
~60 kB

Installation

npm install react-native-css-interop

Code example

import { View, Text, StyleSheet } from "react-native";
import { CssInterop } from "react-native-css-interop";

export function Example() {
  return (
    <View style={styles.box}>
      <Text style={styles.title}>CssInterop</Text>
      <CssInterop />
    </View>
  );
}

const styles = StyleSheet.create({
  box: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
  title: { fontSize: 18, fontWeight: "600" },
});

Pros & cons

Pros

  • Actively maintained by Mark Lawlor
  • 0 weekly downloads. Battle tested
  • First-class TypeScript definitions
  • MIT licensed

Considerations

  • Adds roughly ~60 kB to your bundle
  • Needs client-only rendering in SSR frameworks
  • 69 open issues on GitHub

FAQs

Alternatives & similar libraries