When I try to add shadows to components, I receive an error message.
View #128489 of type ABI49_0_0RCTView has a shadow set but cannot calculate shadow efficiently. To resolve this, consider setting a background color or applying the shadow to a more specific component.
In my CSS, I have specified where the shadows should be applied. I prefer to keep the SHADOW styles separate so that I can easily change background colors.
const SHADOW = {
// For iOS
light: {
shadowColor: COLORS.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 4,
},
medium: {
shadowColor: COLORS.black,
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.2,
shadowRadius: 2,
},
// For Android
android: {
elevation: 5,
},
};
const BUTTON = {
padding: 15,
backgroundColor: COLORS.button,
borderRadius: 10,
marginBottom: 10,
alignItems: 'center',
...Platform.select({
ios: {
...SHADOW.medium,
},
android: {
...SHADOW.android,
},
}),
}
const CARD = {
padding: 15,
backgroundColor: 'rgba(48, 48, 48, 1)',
borderRadius: 8,
marginBottom: 10,
alignItems: 'center',
...Platform.select({
ios: {
...SHADOW.medium,
},
android: {
...SHADOW.android,
},
}),
}
I was hoping to avoid getting warning errors with this setup.