Image with resizeMode='contain' and BorderRadius defined, repeat last pixel until complete container

[vpsgvitor]

Description

When using image with an aspectRatio of 3 / 5, width 80% of the screen and resizeMode 'contain' and borderRadius defined, the last vertical row is repeated until the end of the image container in android devices, all right in IOS. Only borderRadius defined.

Version

^0.68.1

Output of npx react-native info

System:
    OS: macOS 12.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 54.98 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Watchman: 2021.11.01.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/vitor/.rvm/rubies/ruby-3.0.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.0.0 => 18.0.0 
    react-native: ^0.68.1 => 0.68.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

### Steps to reproduce

Use Image with resizeMode='contain', style borderRadios: [ANY_VALUE] and aspectRatio: 3 / 5

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

<Image
  resizeMode="contain"
  source={{ uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQggwjVq0QWVYM0cVvz7jQzna5o5sCfNZbLS4uLVcBNHAW-yiPBs9yV7V2pyvyxOj45A4g&usqp=CAU' }}
  style={[styles.image, { width: '80%' }]}
  width={undefined}
  height={undefined} />
      
      
      
image: {
  aspectRatio: 5 / 3,
  borderRadius: 20,
  marginTop: 20,
  marginBottom: 30,
  alignSelf: 'center',
},

[CodingByJerez]

I have the same problem

[markholland]

I have this as well but without applying any aspectRatio. Started with React Native 0.68

[lucasuracosta]

I have the same issue

[koty2155]

I have similar issue. For me workaround is wrap image with View and set borderRadius there. You need also hide overflow.

<View style={{ borderRadius: 20, overflow: 'hidden' }}>
    <Image
        style={ownStyles.headerImage}
        source={{ uri: `https://unsplash.it/300/200` }}
        resizeMode="contain"
    />
</View>

[Lump01]

Same issue here as well on Android only. iOS works as expected with empty spacing on either side of the image.

[Lump01]

@vpsgvitor I fixed it by removing border styling from my Image component. For me I need the resizeMode more than I need a borderRadius or borderWidth style so it was worth removing.

[vpsgvitor]

@Lump01 Yes, as I put in the description, it only happens with defined borderRadius

[lightrow]

wrapping with View is not a fix, as it breaks animated border radius when used with react-native-shared-element, the image must be direct descendant of SharedElement component and have border radius property applied to it directly.

also it's not only borderRadius but also just borderWidth alone that causes this

[szmarczak]

Same here.

[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.

[GregoryEsberci]

Still relevant