{"id":10696,"library":"css-to-react-native","title":"CSS to React Native Style Transformer","description":"css-to-react-native is a utility library that converts standard CSS-like style declarations into React Native stylesheet objects. Currently at version 3.2.0, it is actively maintained by the styled-components organization, indicating a stable release cadence. This library is essential for bridging web CSS styling conventions with React Native's unique styling model, automatically handling unit conversions, shorthand expansions, and platform-specific property transformations (e.g., `text-shadow-offset` to `{ width, height }`). A key differentiator is its ability to handle complex transformations like reversing `transform` order for React Native compatibility and expanding various shorthands such as `font` and `margin`. It focuses on transforming already parsed CSS property-value pairs, delegating the initial CSS parsing to external tools like PostCSS.","status":"active","version":"3.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/styled-components/css-to-react-native","tags":["javascript","styled-components","React","ReactNative","styles","CSS","typescript"],"install":[{"cmd":"npm install css-to-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add css-to-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-to-react-native","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary default export for converting CSS property-value tuples. For CommonJS, explicitly access the '.default' property as shown in the package's documentation to avoid undefined values.","wrong":"const transform = require('css-to-react-native');","symbol":"transform","correct":"import transform from 'css-to-react-native';"},{"note":"Named export for converting a dashed CSS property name (e.g., 'border-width') to its camelCase React Native equivalent ('borderWidth'). Available since v1.","wrong":"const getPropertyName = require('css-to-react-native').getPropertyName;","symbol":"getPropertyName","correct":"import { getPropertyName } from 'css-to-react-native';"},{"note":"Named export for transforming a single CSS property and value into a React Native style object. Useful for advanced implementors or custom parsing scenarios.","wrong":"const getStylesForProperty = require('css-to-react-native').getStylesForProperty;","symbol":"getStylesForProperty","correct":"import { getStylesForProperty } from 'css-to-react-native';"}],"quickstart":{"code":"import transform from 'css-to-react-native';\n\nconst cssStyleTuples = [\n  ['font', 'bold 14px/16px \"Helvetica\"'],\n  ['margin', '5px 7px 2px'],\n  ['border-left-width', '5px'],\n  ['text-shadow-offset', '10px 5px'],\n  ['transform', 'translate(10px, 5px) scale(2) rotate(45deg)']\n];\n\nconst reactNativeStyles = transform(cssStyleTuples);\n\nconsole.log(reactNativeStyles);\n/*\nExpected output similar to:\n{\n  fontFamily: 'Helvetica',\n  fontSize: 14,\n  fontWeight: 'bold',\n  fontStyle: 'normal',\n  fontVariant: [],\n  lineHeight: 16,\n  marginTop: 5,\n  marginRight: 7,\n  marginBottom: 2,\n  marginLeft: 7,\n  borderLeftWidth: 5,\n  textShadowOffset: { width: 10, height: 5 },\n  transform: [\n    { rotate: '45deg' },\n    { scale: 2 },\n    { translateY: 5 },\n    { translateX: 10 }\n  ]\n}\n*/","lang":"typescript","description":"Demonstrates converting an array of CSS property-value tuples, including shorthands and complex values, into a React Native stylesheet object. Shows how `transform` order is handled."},"warnings":[{"fix":"Ensure all properties requiring units have them explicitly defined (e.g., `width: '10px'` instead of `width: 10`).","message":"As of v3.0.0, the library will now `console.warn` when units are omitted on properties that require them (e.g., `top`, `width`).","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Provide `line-height` values with explicit units (e.g., `font: '14px/16px Helvetica'` instead of `font: '14px/1.5 Helvetica'`).","message":"Unitless `line-height` is no longer supported within the `font` shorthand as of v3.0.0.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Be aware that `box-shadow` styles will not render on Android. Consider platform-specific styling or alternative visual effects for cross-platform support.","message":"The `box-shadow` CSS shorthand only converts to `shadow-` properties which are exclusively supported on iOS in React Native.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use individual properties like `borderTopWidth`, `borderTopColor`, `borderTopLeftRadius`, etc., for precise border styling.","message":"Individual `border{Top,Right,Bottom,Left}` shorthands are not supported due to limitations in applying `borderStyle` to individual border sides in React Native.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"No manual fix required, but developers should be aware that the internal transformation order might differ from web CSS to ensure correct visual output in React Native.","message":"Complex `transform` values are automatically reordered by `css-to-react-native` to match React Native's inverse application order.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Utilize a robust CSS parser (e.g., PostCSS, `stylis`) to reliably extract property-value pairs. `css-to-react-native` expects an array of `[property, value]` tuples as its input, not raw CSS strings.","cause":"Attempting to pass raw CSS strings or manually parsing CSS with simple string manipulation methods (like `.split`) leading to incorrect `[property, value]` tuples.","error":"No explicit error message, but output styles are incorrect or incomplete when processing CSS."},{"fix":"Decompose complex CSS shorthands into individual, supported React Native style properties. Consult React Native's style documentation for specific property support.","cause":"Shorthands are often limited to the subset of properties supported by React Native. For example, `background` only converts to `backgroundColor` as `backgroundImage` is not a direct RN style property.","error":"A CSS shorthand property (e.g., `background`, `border`) does not produce the expected comprehensive React Native styles."}],"ecosystem":"npm"}