Skip to main content
Version: 4.x

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.

PropertyAndroidiOSWeb
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
boxSizing
no
no
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
outlineColor
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
outlineOffset
yes
yes
yes
outlineStyle
yes
yes
yes
outlineWidth
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
mixBlendMode
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.

Animating text shadow styles​

On the web, all text shadow styles (i.e. textShadowColor, textShadowOffset, textShadowRadius) need to be specified in the animation keyframes to preserve the style during animation.

iOS and Android text shadow styles doesn't have this limitations and work as intended.

So, for example, if we want to have a shadow color and animate the shadow radius, we can't specify textShadowColor just in the element style but we also have to add it to every keyframe of the animation, even though only the textShadowRadius is the style we want to animate. Consider this:

<Animated.Text
  style={{
    animationName: {
      from: {
        textShadowRadius: 8, // while the shadow radius correctly animates from 8 ✅
      },
      to: {
        textShadowRadius: 16, // to 16 ✅
      },
    },
    textShadowColor: 'red', // 🚨 the shadow color would be overridden in the animation keyframes
    // that means the shadow would be black!
  }}>
  Reanimated
</Animated.Text>

To mitigate this limitation, you need to specify the textShadowColor in every keyframe definition:

<Animated.Text
  style={{
    animationName: {
      from: {
        textShadowColor: 'red', // shadows starts 'red'
        textShadowRadius: 8,
      },
      to: {
        textShadowColor: 'red', // and keeps being 'red' throughout the animation
        textShadowRadius: 16,
      },
    },
  }}>
  Reanimated
</Animated.Text>

Why do I need this?

In CSS the text-shadow is a single property but in React Native that's three separate properties for color, offset and radius. Because of that Reanimated has to provide these default values to every keyframe definition:

{
  "textShadowColor": "#000",
  "textShadowRadius": 0,
  "textShadowOffset": { "width": 0, "height": 0 }
}

and the shadow styles aren't inherited from the style object provided to the element. To retain the styles in an animation you need to override these styles to achieve your expected result.

Animating box shadow styles​

Similarly to the text shadow styles - all shadow styles (i.e. shadowColor, shadowOffset, shadowOpacity, shadowRadius) need to be specified in the animation keyframes to preserve the style during animation on the Web. Keep in mind that shadowOffset, shadowOpacity, shadowRadius style properties aren't implemented on Android in React Native so they also can't be animated.

We highly recommend to use the boxShadow property which doesn't have this limitation and also works on Android.

We are Software Mansion.

Hire us