Skip to content

Commit aead726

Browse files
committed
Document supported CSS property mappings
1 parent b8ea206 commit aead726

1 file changed

Lines changed: 49 additions & 0 deletions

File tree

README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,55 @@ React Native's `box-shadow` and `filter` properties are passed through as
7272

7373
`border{Top,Right,Bottom,Left}` shorthands are not supported, because `borderStyle` cannot be applied to individual border sides.
7474

75+
## Supported Properties
76+
77+
Most React Native style properties work without a custom mapping table. Write the
78+
React Native property name in kebab-case and this library will convert it back to
79+
the camel-cased React Native key for you.
80+
81+
| CSS input | React Native output |
82+
| --- | --- |
83+
| `align-content` | `alignContent` |
84+
| `background-color` | `backgroundColor` |
85+
| `border-top-left-radius` | `borderTopLeftRadius` |
86+
| `font-size` | `fontSize` |
87+
| `justify-content` | `justifyContent` |
88+
| `text-decoration-color` | `textDecorationColor` |
89+
| `text-shadow-radius` | `textShadowRadius` |
90+
91+
That rule covers the standard one-to-one mappings. The library also supports the
92+
following shorthand and special-case transforms:
93+
94+
| CSS input | React Native output |
95+
| --- | --- |
96+
| `aspect-ratio` | `aspectRatio` |
97+
| `background` | `backgroundColor` |
98+
| `border` | `borderWidth`, `borderColor`, `borderStyle` |
99+
| `border-color` | `borderTopColor`, `borderRightColor`, `borderBottomColor`, `borderLeftColor` |
100+
| `border-radius` | `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius` |
101+
| `border-width` | `borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth` |
102+
| `flex` | `flexGrow`, `flexShrink`, `flexBasis` |
103+
| `flex-flow` | `flexDirection`, `flexWrap` |
104+
| `font` | `fontStyle`, `fontWeight`, `fontVariant`, `fontSize`, `lineHeight`, `fontFamily` |
105+
| `font-family` | `fontFamily` |
106+
| `font-variant` | `fontVariant` |
107+
| `font-weight` | `fontWeight` |
108+
| `margin` | `marginTop`, `marginRight`, `marginBottom`, `marginLeft` |
109+
| `padding` | `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft` |
110+
| `place-content` | `alignContent`, `justifyContent` |
111+
| `shadow-offset` | `shadowOffset` |
112+
| `text-decoration` | `textDecorationLine`, `textDecorationColor`, `textDecorationStyle` |
113+
| `text-decoration-line` | `textDecorationLine` |
114+
| `text-shadow` | `textShadowOffset`, `textShadowRadius`, `textShadowColor` |
115+
| `text-shadow-offset` | `textShadowOffset` |
116+
| `transform` | `transform` |
117+
| `box-shadow` | `boxShadow` passthrough |
118+
| `filter` | `filter` passthrough |
119+
120+
If you are unsure whether a property is available in React Native itself, check
121+
the React Native style docs and convert the property name to kebab-case when you
122+
write it in CSS.
123+
75124
# API
76125

77126
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.

0 commit comments

Comments
 (0)