We have the proptype elevation
in react-native (doc), but how can I set the color of the "android-shadow" it's producing?
3 Answers
You can change shadow colors on Views starting API 28 (Pie) with View#setOutlineAmbientShadowColor(int color) and View#setOutlineSpotShadowColor(int color) if you use elevation.
-
1You're right but how do I get this working on a React Native app? For sure I need to change or invoke it but where? Sep 15, 2019 at 3:12
-
-
2@MayankMehtani No, with elevation color is not possible for me. But I managed to "fake" this behaviour haha. You can change the color of the border, and then create more than one border at the component (using layers of views) by using colors that is similar to a fading effect. Jan 9, 2020 at 16:10
-
@FrederikoCesar - hahaha.. good one.. can you plz share that shadow component .. like you did it?– idleMindAug 22, 2020 at 9:36
Unfortunately, the color of the shadow produced by Android's setElevation
cannot be changed. Also, their Material Design guidelines around the web like here don't seem to indicate that you can change the color.
https://developer.android.com/training/material/shadows-clipping.html
In addition, box shadows in React Native are also not supported on Android, based on this.
-
if anyone is reading this, its a very old question, you can now do it I actually just did– maslanOct 5, 2021 at 19:04
As per @rclai Answer, You cannot change the Elevation color in Android.
Instead of using Elevation you can try this React Native Shadow library which uses svg to produce shadow that let you set color, offset, opacity: https://github.com/879479119/react-native-shadow