CODEWITHSUNDEEP
reactjsreact-native
Leo
Leo

Reputation: 19

Shadow does not appear in react native

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>

Upvotes: 1

Views: 103

Answers (1)

Luka
Luka

Reputation: 1008

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

Upvotes: 1

Related Questions