How to clip off the image if its outside bounds react native

Question

I'm new to react native development. I want the image to be in aspect ratio and when I try to change its bounds the area outside the bounds should be clipped off. In Android, it is working correctly but not in iOS the image is not clipping to its bounds and showing the whole image.

<View
      style={{
        backgroundColor: "#04894a",
        padding: 10,
        height: 110,
        alignItems: "center"
      }}
    >
 <View
        style={{
          alignItems: "center"
        }}
      >
        <Image
          style={{ height: 150, width: 150 }}
          source={require("../images/wow_logo.png")}
        />
      </View>

The image is going outside the view but still, it is showing in full. I want it to be cropped if going outside the bounds. Can anyone help me with this? Any links or suggestions are also appreciated. TIA

Answer 1

Use overflow: hidden - by default in react native the overflow flag is visible.

Also to maintain the aspect ratio, just have one parameter width or height to the image, then add style={{ aspectRatio: 3/2 }} so that the width:height ratio is maintained.