css-to-react-native
Converts CSS text to a React Native stylesheet object.
fontSize: 18 lineHeight: 24 color: 'red'
Converts all number-like values to numbers, and string-like to strings.
Automatically converts indirect values to their React Native equivalents.
));
textShadowOffset: width: 10 height: 5 fontVariant: 'small-caps' // Fixes backwards transform order transform: translateY: 10 translateX: 10 scale: 5
Also allows shorthand values.
/16
fontFamily: 'Helvetica' fontSize: 14 fontWeight: 'bold' fontStyle: 'normal' fontVariant: lineHeight: 16 marginTop: 5 marginRight: 7 marginBottom: 2 marginLeft: 7
Shorthands will only accept values that are supported in React, so background
will only accept a colour, backgroundColor
There is also support for the box-shadow
shorthand, and this converts into shadow-
properties. Note that these only work on iOS.
Shorthand Notes
border{Top,Right,Bottom,Left}
shorthands are not supported, because borderStyle
cannot be applied to individual border sides.
API
The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is an array of [property, value]
tuples.
;// or const transform = require('css-to-react-native').default; ; // => { fontFamily: 'Helvetica', ... }
We don't provide a way to get these style tuples in this library, so you'll need to do that yourself. I expect most people will use postCSS or another CSS parser. You should try avoid getting these with string.split
, as that has a lot of edge cases (colons and semi-colons apearing in comments etc.)
For implementors, there is also a few extra APIs available.
These are for specific use-cases, and most people should just be using the API above.
; ; // => 'borderWidth'; // => { borderTopWidth: 1, ... }
Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to transform
.
;// { borderRadius: 50 } rather than { borderTopLeft: ... }
This can also be done by passing a third argument, false
to getStylesForProperty
.
License
Licensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.
See LICENSE.md for more information.