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.

[chrisglein]

Getting feedback that XAML may actually support this level of masking, but not natively on Image (it'd need to be wrapped).

@Tatious does this work if you wrap it on a View and apply the borderRadius there? That may be a viable workaround. Let us know if that does or does not work.

[ddalp]

cornerRadius and other border properties are supported now, background on image is still not supported (I will open a new issue to track).