ImageStyleProps borderRadius

[Tatious]

Environment

react-native-cli: 2.0.1
react-native: 0.60.6
-- (empty) -- react-native-windows@0.60.0-vnext.32
node: v10.16.3
npm: 6.9.0
yarn: 1.17.3

• SDK Version(s):
  10.0.18362.0

• Target Device(s):
  Desktop

• Visual Studio Version:
  Visual Studio 2017

• Build Configuration:
  Debug

Steps to Reproduce

This is the expected way to create a round image:

return (
    <Image
        source={{ uri: getResizeUrl(url, pixelSize, pixelSize) }}
        style={{ height: size, width: size, borderRadius: size }}
    />
);

However, this does not work and results in no change from a square image, but I found view does apply the borderRadius attribute as follows:

return (
    <View style={{borderRadius: size}}>
        <Image
            source={{ uri: getResizeUrl(url, pixelSize, pixelSize) }}
            style={{ height: size, width: size }}
        />
    </View>
);

Expected Behavior

The image would be rounded

Actual Behavior

There is no effect on the image

Additional context

Adam Gorman(adamgor)
Austin Beaulieu(aubeauli)

[namrog84]

Confirming this is a member on my team and should be flagged as Partner(Xbox)

[chrisglein]

CornerRadius (which is how XAML does rounded corners) doesn't have universal support on all elements. In particular... it's not available on Image. It actually had extremely uneven support on various controls although the most recent drop of WinUI has cleaned that up.

I'm fairly certain we'll either need WinUI3 to be available and then add support for this to Image.