图像从带有阴影的容器中溢出

Question

I'm trying to create a custom card view for my RN app, right now I'm working the on the card's cover image but it seems the image container is overflowing the main container which seems to be caused by a conflict with box shadow ( Here I removed my styling).

Here the code for my card component

export const LocationCard: React.FC<Props> = ({
  name,
  imageURI,
  description,
}) => {
  return (
    <View style={styles.card}>
      <View style={styles.imagecontainer}>
        <Image
          source={{ uri: imageURI }}
          style={{ width:"100%",height:"100%", borderRadius: 25, flexWrap:"wrap"}}
          resizeMode="cover"
        />
      </View>
      <View style={styles.content}>
        <Text>{name}</Text>
        <Text>{description}</Text>
      </View>
    </View>
  );
};

Here's a picture for comparison

Answer 1

You can use => overflow: 'hidden'

<View style={[styles.imagecontainer, {overflow: 'hidden'}]}>
  <Image
    source={{uri: imageURI}}
    style={{width: '100%', height: '100%', borderRadius: 25, flexWrap: 'wrap'}}
    resizeMode="cover"
  />
</View>;