How to apply shadows on React Native

Some weeks ago I spent some time researching about how to apply shadows on iOS and Android on a react-native project. It ended being a bit messy topic, with several options to use and not being able to get the same results on both platforms, so here are the conclusions of my research.

🍎 How to apply shadows on iOS platform

On iOS, we have two options to apply shadows to the elements:

Shadow props

Using the shadow props recommended by react native doc

• shadowColor: Sets the drop shadow color.
• shadowOffset: Sets the drop shadow offset.
• shadowOpacity: Sets the drop shadow opacity (multiplied by the color’s alpha component).
• shadowRadius: Sets the drop shadow blur radius.

If you’re using styled components , there’s a problem using react native’s shadow props: The shadow is always set at the top of the element, and there’s no way to move it.

It’s a known issue without solution at the time being, so if this is your case, you’ll have to use the following alternative.

Box shadow

Using CSS box-shadow property:

• inset: If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
• offset-x , offset-y: Specifies the horizontal distance and the vertical distance.
• blur-radius: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
• spread-radius: Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.
• color: If not specified, the color used depends on the browser.

🤖 How to apply shadows on Android platform

On Android, we need to use the elevation view style prop from react-native to add shadows.

• elevation: Sets the elevation of a view, using Android’s underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views.

That’s the end of the story, there are no extra properties to customize the look of the shadow.

Another matter on this is that Android’s shadow on circle buttons is really really soft, it’s difficult to appreciate, but if we turn the button to be wider, the same value on the elevation prop looks ok.

📱 Other multi-platform alternatives

There’s a library called react-native-shadow that enables managing the Android shadow like on iOS, but according to some users opinions, its performance it’s terrible.