Shadow styling options are not applied

If you try to apply shadow styling options to you component you might notice they have no any effect, even after reloading application.

const styles = {
viewStyle: {
shadowColor: '#f44242',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 1,
},
};
const Header = () => {
const { viewStyle } = styles;
return (
<View style={viewStyle}>
<Text>Just some text</Text>
</View>
);
};

The problem is that shadow-related options are only supported on iOS.

Property

Behavior

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

You can find more about shadow properties in React Native official documentation https://facebook.github.io/react-native/docs/shadow-props

To add shadow on Android you can set up this property to desired value

elevation: 3
const styles = {
viewStyle: {
elevation: 3
},
};

You can't manage shadow parameters on Android. Like you can't change color, offset, opacity or radius directly.