Supported style properties
Not all CSS properties are available and animatable in React Native. The following table describes which style properties can be animated on which platform.
| Property | Android | iOS | Web |
|---|---|---|---|
| flex | yes | yes | yes |
| flexBasis | no | no | yes |
| flexDirection | yes | yes | yes |
| justifyContent | yes | yes | yes |
| alignItems | yes | yes | yes |
| alignSelf | yes | yes | yes |
| alignContent | yes | yes | yes |
| flexGrow | yes | yes | yes |
| flexShrink | yes | yes | yes |
| flexWrap | yes | yes | yes |
| gap | yes | yes | yes |
| rowGap | yes | yes | yes |
| columnGap | yes | yes | yes |
| start | yes | yes | no |
| end | yes | yes | no |
| direction | yes | yes | no |
| height | yes | yes | yes |
| width | yes | yes | yes |
| maxHeight | yes | yes | yes |
| maxWidth | yes | yes | yes |
| minHeight | yes | yes | yes |
| minWidth | yes | yes | yes |
| margin | yes | yes | yes |
| marginTop | yes | yes | yes |
| marginRight | yes | yes | yes |
| marginBottom | yes | yes | yes |
| marginLeft | yes | yes | yes |
| marginStart | yes | yes | yes |
| marginEnd | yes | yes | yes |
| marginBlock | yes | yes | yes |
| marginBlockEnd | yes | yes | yes |
| marginBlockStart | yes | yes | yes |
| marginInline | yes | yes | yes |
| marginInlineEnd | yes | yes | yes |
| marginInlineStart | yes | yes | yes |
| marginHorizontal | yes | yes | yes |
| marginVertical | yes | yes | yes |
| padding | yes | yes | yes |
| paddingTop | yes | yes | yes |
| paddingRight | yes | yes | yes |
| paddingBottom | yes | yes | yes |
| paddingLeft | yes | yes | yes |
| paddingStart | yes | yes | yes |
| paddingEnd | yes | yes | yes |
| paddingBlock | yes | yes | yes |
| paddingBlockEnd | yes | yes | yes |
| paddingBlockStart | yes | yes | yes |
| paddingInline | yes | yes | yes |
| paddingInlineEnd | yes | yes | yes |
| paddingInlineStart | yes | yes | yes |
| paddingHorizontal | yes | yes | yes |
| paddingVertical | yes | yes | yes |
| top | yes | yes | yes |
| left | yes | yes | yes |
| bottom | yes | yes | yes |
| right | yes | yes | yes |
| inset | yes | yes | yes |
| insetBlock | yes | yes | yes |
| insetInline | yes | yes | yes |
| insetBlockStart | yes | yes | yes |
| insetBlockEnd | yes | yes | yes |
| insetInlineStart | yes | yes | yes |
| insetInlineEnd | yes | yes | yes |
| position | yes | yes | yes |
| display | yes | yes | yes |
| overflow | yes | yes | yes |
| zIndex | yes | yes | yes |
| aspectRatio | yes | yes | yes |
| backgroundColor | yes | yes | yes |
| color | yes | yes | yes |
| textDecorationColor | no | yes | yes |
| textShadowColor | yes | yes | yes |
| borderColor | yes | yes | yes |
| borderTopColor | yes | yes | yes |
| borderBlockStartColor | yes | yes | yes |
| borderRightColor | yes | yes | yes |
| borderEndColor | yes | yes | yes |
| borderBottomColor | yes | yes | yes |
| borderBlockEndColor | yes | yes | yes |
| borderLeftColor | yes | yes | yes |
| borderStartColor | yes | yes | yes |
| borderBlockColor | yes | yes | yes |
| shadowColor | yes | yes | yes |
| overlayColor | no | no | no |
| tintColor | yes | yes | no |
| shadowOffset | no | yes | yes |
| shadowOpacity | no | yes | yes |
| shadowRadius | no | yes | yes |
| elevation | yes | no | no |
| textShadowOffset | yes | yes | yes |
| textShadowRadius | yes | yes | yes |
| boxShadow | yes | yes | yes |
| borderRadius | yes | yes | yes |
| borderTopLeftRadius | yes | yes | yes |
| borderTopStartRadius | yes | yes | yes |
| borderStartStartRadius | yes | yes | yes |
| borderTopRightRadius | yes | yes | yes |
| borderTopEndRadius | yes | yes | yes |
| borderStartEndRadius | yes | yes | yes |
| borderBottomLeftRadius | yes | yes | yes |
| borderBottomStartRadius | yes | yes | yes |
| borderEndStartRadius | yes | yes | yes |
| borderBottomRightRadius | yes | yes | yes |
| borderBottomEndRadius | yes | yes | yes |
| borderEndEndRadius | yes | yes | yes |
| borderWidth | yes | yes | yes |
| borderTopWidth | yes | yes | yes |
| borderStartWidth | yes | yes | yes |
| borderBottomWidth | yes | yes | yes |
| borderEndWidth | yes | yes | yes |
| borderLeftWidth | yes | yes | yes |
| borderRightWidth | yes | yes | yes |
| borderCurve | no | no | no |
| borderStyle | yes | yes | yes |
| transformOrigin | yes | yes | yes |
| transform | yes | yes | yes |
| transformMatrix | no | no | no |
| rotation | no | no | no |
| scaleX | no | no | no |
| scaleY | no | no | no |
| translateX | no | no | no |
| translateY | no | no | no |
| backfaceVisibility | yes | yes | yes |
| opacity | yes | yes | yes |
| fontFamily | yes | yes | yes |
| fontSize | yes | yes | yes |
| fontStyle | yes | yes | yes |
| fontVariant | yes | yes | yes |
| fontWeight | yes | yes | yes |
| textAlign | yes | yes | yes |
| textAlignVertical | yes | no | no |
| verticalAlign | no | no | yes |
| letterSpacing | yes | yes | yes |
| lineHeight | yes | yes | yes |
| textTransform | yes | yes | yes |
| textDecorationLine | yes | yes | yes |
| textDecorationStyle | no | yes | yes |
| userSelect | no | no | yes |
| writingDirection | no | no | no |
| includeFontPadding | yes | no | no |
| resizeMode | yes | yes | no |
| objectFit | no | no | no |
| cursor | yes | yes | yes |
| pointerEvents | yes | yes | yes |
| filter | no | no | yes |
| isolation | no | no | yes |
Remarks
Style Inheritance
Style inheritance is not supported. Properties that would normally inherit values (e.g., textDecorationColor inheriting from color) must be provided separately, as inheritance is not implemented.
Relative Margins
Yoga applies relative (%) margins in a different way than the web browser does. In React Native, the margin is added as a space between items without changing dimensions of the se items. As a result, the size of the parent container can change if the total size of its children with added margins exceeds the parent container size.
On the other hand, the web browser shrinks items in such a way that the specified relative margin is occupies the correct amount of space in the parent container.
Mixed-Unit Margins
Interpolation between absolute (numeric) and relative (%) margins may not work properly if dimensions of the parent component are affected by applied margins. This is a problem with our implementation and it can be seen as incorrect animation pacing (the animation can speed up/slow down when the parent size changes).
Mixed-Unit Border Radius
Yoga calculates borders in different ways for numeric values and relative (%) values. For the first one, it applies the same radius on both edges of the container which are near the rounded corner. For the second one, it applies different radius to the shorter edge and different to the longer one, depending on the length of the container edge. Currently, there is no possibility to properly interpolate between absolute (numeric) and relative (%) values.
flexBasis
Even though changes of this property are calculated properly during the animation, they aren't applied to the view. Other flex properties, such as flexGrow and flexShrink work fine, so they could be used for animations.