Creating a UI with box shadow in react native

Question

I am trying to create a UI in react native, the UI contains a box with outer shadow. using the image I have done that, but is there any proper way to do that?

Answer 1

You will have to use different style props for iOS and Android.

Android

It's very simple for android, just use the elevation style prop (See docs) . An example:

boxWithShadow: {     elevation: 5 } 

iOS

In iOS you have more flexibility, use the Shadow props (See docs). An example:

boxWithShadow: {     shadowColor: '#000',     shadowOffset: { width: 0, height: 1 },     shadowOpacity: 0.8,     shadowRadius: 1,   } 

Summary

In summary, to get box shadow for both platforms, use both sets of style props:

boxWithShadow: {     shadowColor: '#000',     shadowOffset: { width: 0, height: 1 },     shadowOpacity: 0.8,     shadowRadius: 2,       elevation: 5 } 

Attention: Do not use overflow: 'hidden';, in iOS all of the shadows disappear by this property.