Image rounding on Android but not on iOS

Question

Edit 3: What worked for me

          <View 
            style={{
              minHeight: 200
            }}
          >
            <Image
              resizeMode="contain"
              source={{ uri: props.item.thumbnailURL }}
              style={{
                flex: 1,
                width: 350,
                height: 200,
                borderBottomLeftRadius: 30,
                borderBottomRightRadius: 30,
                borderTopLeftRadius: 30,
                borderTopRightRadius: 30,
                borderColor: "orange",
                borderWidth: 1,
                overflow: "hidden",
                flexDirection: "row",
                alignSelf: "center",
              }}
            />
          </View>

Edit 2: Added full code

Edit: I added borderWidth: 3, borderColor: "orange"

and noticed that the parent of the image is rounding screenshot ... But why? I didn't want that.

I also tried with borderRadius: Platform.OS === "ios" ? 30/2 : 30 but it didn't have any effect. What more can I do?

Answer 1

You must specify border radius value for all of the corners for ios for example:

{
  flex: 1,
  width: 350,
  height: 200,
  borderRadius:30,
  overflow: "hidden",
  borderBottomLeftRadius: 30,
  borderBottomRightRadius: 30,
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
}