{"library":"react-native-css-interop","title":"React Native CSS Interop","description":"react-native-css-interop provides a foundational layer for integrating CSS stylesheets into React Native and React Native Web projects. It is a core dependency for libraries like NativeWind, enabling the use of CSS as a styling language, including advanced features like CSS Variables, Viewport Units (rem, vw, vh, vmax, vmin), Media Queries, and Container Queries. The library is not a full CSS specification implementation but offers an opinionated approach to CSS in React Native. The current stable version is 0.2.3, with active maintenance through patch releases. A new major version of NativeWind (v5) is in preview, which renames `react-native-css-interop` to `react-native-css` and shifts it to a peer dependency, indicating a significant architectural change and decoupling for future versions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-css-interop"],"cli":null},"imports":["import { cssInterop } from 'react-native-css-interop';","import { withCssInterop } from 'react-native-css-interop';","import { rem } from 'react-native-css-interop';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\nimport { cssInterop } from 'react-native-css-interop';\n\n// Register a custom component to accept className props\ncssInterop(Text, { className: 'style' });\ncssInterop(View, { className: 'style' });\n\n// Assuming you have a global.css file imported somewhere (e.g., via NativeWind setup)\n// which defines .container and .text-style classes\n// import './global.css';\n\nexport default function App() {\n  return (\n    <View className=\"container p-4 bg-blue-500 rounded-lg\">\n      <Text className=\"text-xl font-bold text-white text-center\">\n        Hello, CSS Interop!\n      </Text>\n      <Text className=\"mt-2 text-base text-gray-200\">\n        This component uses CSS classes processed by react-native-css-interop.\n      </Text>\n    </View>\n  );\n}\n\n// Minimal StyleSheet to ensure React Native doesn't complain about missing styles\n// (actual styles would come from your CSS file/Tailwind processing)\nconst baseStyles = StyleSheet.create({\n  container: {\n    // These would be overridden by CSS/Tailwind\n    padding: 16,\n    backgroundColor: 'blue',\n    borderRadius: 8,\n  },\n  'text-xl': {\n    fontSize: 20,\n  },\n  'font-bold': {\n    fontWeight: 'bold',\n  },\n  'text-white': {\n    color: 'white',\n  },\n  'text-center': {\n    textAlign: 'center',\n  },\n  'mt-2': {\n    marginTop: 8,\n  },\n  'text-base': {\n    fontSize: 16,\n  },\n  'text-gray-200': {\n    color: 'lightgray',\n  },\n});\n","lang":"typescript","description":"Demonstrates registering `Text` and `View` components with `cssInterop` to accept `className` props, enabling CSS styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}