@@ -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
77126The 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