React-native-fast-image: Android 7 Border Radius Problem

[hks]

Border Radius is not working properly on Android 7. I tried all android versions beginning from 5 and iOS versions. I only saw it in Android 7. Border Radius is not working "sometimes". Some elements' borderRadius disappears or reappears when scrollview is scrolled.

I am giving borderRadius in style prop and I am showing remote image files from a web server.
When I am using Image element of React Native Core it works without problem.

Dependency versions

• React Native version: 0.60.4
• React version: 16.8.6
• React Native Fast Image version: 7.0.2

[vkozinec]

Hi, we were having same problem on Android 7 devices and "somehow" fixed it. Tested on real devices and it works !

So to summarise problem:

• ScrollView with list items, used FastImage for avatars
• Wrapped FastImagewith View, applying borderRadius + overflow: hidden didn't help

Without fix

With fix

Applied fix - how to do it?

• what I did was wrapped FastImage and "fix thingy" with some container.
• add position: relative to container
• add position: absolute to fixOverlay and some zIndex: xx, bigger than FastImage one, so overlay is above image

<View style={styles.container}>
    <View style={styles.fixOverlay} />
    <FastImage
        style={styles.fastImage}
    />
</View>

That was just a setup for a fix. What fixed this blew my mind 🤯. I had some idea in my mind but I thought that can't work for sure, but whatever, this is Android.

I added following styles to fixOverlay view:

• Same width and height as image
• Same borderRadius as image
• Position it exactly above image ( centered it )
• Added 1pt border around and this stopped image from overflowing. ( even when borderColor was transparent )

So somehow ( only God knows how ) this "hidden border" stopped image rendering outside of borderRadius and stopped flickering when scrolling.

Biggest mistery in all of this is that we have a lot of images in ScrollView and we didn't see this problem on all images. It happened only to images that were uploaded by user - eg. user avatar which we display here, but removed real data for demo. Other user avatars didn't have this problem. Could be there is some caching happening with images and they render differently on screen.

[abdurrahmanekr]

Hello @vkozinec could you share a sample code. I did what you said, but the problem wasn't solved.

[abdurrahmanekr]

I think I understand the problem. If the width of the image is larger than the height, this problem occurs. So I'm going to bring the pictures as square.

[vkozinec]

Hi @abdurrahmanekr

Our images are same in height and width and problem occurs. I think this whole problem is due some rendering issues and this somehow forces something in render engine to run properly in UI.

This is sample code from real project

Layout:

<View style={styles.userAvatarOverflowFixContainerAndroidNougat}>
    <View style={styles.userAvatarOverflowFixOverlayAndroidNougat} />
    <FastImage
    source={{ uri: createdBy.image }}
    style={styles.cellIconMediumRounded}
    />
</View>

Styling:

userAvatarOverflowFixContainerAndroidNougat: {
    position: "relative"
},
userAvatarOverflowFixOverlayAndroidNougat: {
    position: "absolute",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "transparent",
    width: 44,
    height: 44,
    borderRadius: 22,
    zIndex: 4
},
cellImageRoundedMedium: {
    width: 44,
    height: 44,
    borderRadius: 22,
    overflow: "hidden",
    backgroundColor: "#eee",
    zIndex: 2,
    position: "relative"
}

[zubinraja]

works perfect with resizeMode={FastImage.resizeMode.cover}

[thanhluantl2304]

any update on this? none of the above works

[lucidlive]

None of the above works for me either.

[code-by]

issue not solved (

[code-by]

may be this will help:

    top: 1,
    transform: [{translateY: -1}],

[code-by]

None of the above works for me either.

try:

    top: 1,
    transform: [{translateY: -1}],