image will be stretched when borderRadius appears

[ArsFy]

Description

When borderRadius is included in <Image /> style, the entire image range will be forced to fill according to resizeMode.

Example Image

<Image
    source={{ uri: 'image_url' }}
    style={{ height: 200, borderRadius: 10 }}
    resizeMethod={"auto"}
    resizeMode={'contain'}
/>

if no borderRadius

<Image
    source={{ uri: 'image_url' }}
    style={{ height: 200 }}
    resizeMethod={"auto"}
    resizeMode={'contain'}
/>

This problem appeared after I upgraded from 0.66 to 0.69, I used the way to recreate the project, so I think it is a bug

Version

0.69.0

Output of npx react-native info

(My Android Studio is installed on another disk)

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i5-10400F CPU @ 2.90GHz
    Memory: 7.23 GB / 15.78 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.4.1 - ~\AppData\Roaming\npm\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 26, 27, 28, 29, 30, 31
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0
      System Images: android-26 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom_64, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64
      Android NDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
  IDEs:
    Android Studio: Not Found
    Visual Studio: Not Found
  Languages:
    Java: 17.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: 0.69.0 => 0.69.0
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Please see the Description

Snack, code example, screenshot, or link to a repository

<Image
    source={{ uri: 'image_url' }}
    style={{ height: 200, borderRadius: 10 }}
    resizeMethod={"auto"}
    resizeMode={'contain'}
/>

[fortmarek]

Hey @ArsFy

I was not able to reproduce the bug. Could you attach a sample, for example with https://snack.expo.dev/, that will reproduce this behaviour?

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[ArsFy]

Hey @ArsFy

I was not able to reproduce the bug. Could you attach a sample, for example with https://snack.expo.dev/, that will reproduce this behaviour?

https://github.com/ArsFy/rn_img_bug

[cortinico]

I believe this is a duplicate of #34027

[ArsFy]

I believe this is a duplicate of #34027

so... you know why?

[markholland]

This started in React Native 0.68 for me

[ArsFy]

This started in React Native 0.68 for me

I have never used 0.68, but about this issue you can nest View outside

<View style={{ overflow: 'hidden', borderRadius: 10 }}>
    <Image>
</View>

[valn1]

I can confirm that this is still happening in 0.70.5, my component has the following props:

                borderRadius={25}
                borderBottomLeftRadius={0}
                resizeMode={'contain'}
                
                

[MateusPitura]

With the same issue in 0.72.6

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.