Shadow does not appear in react native - reactjs

Question

I want to add a shadow to my card component but it does not appear neither ios nor android, what is the problem?
function Card(props) {
return (
<View style={styles.box}>
<View style={styles.inner}>{props.children}</View> {// Takes an image}
</View>
);
}
const styles = StyleSheet.create({
box: {
width: "50%",
height: "50%",
padding: 15,
shadowColor: "#000", {// the shadow styles for android and ios}
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
},
inner: {
flex: 1,
backgroundColor: "#eee",
alignItems: "center",
justifyContent: "center",
},
});
Note: It takes an image and the image cover my whole Card component
Also Here is the parent components styles:
container: {
width: "100%",
height: "85%",
padding: 10,
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
alignItems: "center",
justifyContent: "center",
},
imageStyle: {
resizeMode: "stretch",
width: "100%",
height: "100%",
borderRadius: 10,
overflow: "hidden",
},
An example of parent component:
<View style={styles.container}>
<Card>
<Image
style={styles.imageStyle}
source={require("../assets/games/Among-us.png")}
/>
</Card>
</View>

Answer 1

Problem lies in the fact that you're not applying backgroundColor to your styles.box
Update your styles.box to match this:
box: {
width: "50%",
height: "50%",
padding: 15,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
backgroundColor: '#ffffff'
}
And you'll get to see your shadow.
This is known bug as you can read here Android - elevation style property does not work without backgroundColor