[Android] FastImage component with borderRadius above Video shows flickering clipped content

[n1ru4l]

react-native-fast-image version: 4.0.14 (also appears on branch master)
react-native-video version: 3.1.0

android version: 7.0.0, 7.1.1

The application that I am building contains videos (Video component) which have an image overlay (FastImage component). The overlay image has a borderRadius property to appear in a circle shape. However on android the FlatList image component is flickering and showing the clipped content of the image. However when rendered above anything else than a Video component , this issue does not occur. When using the Image component that react-native provides this issue does not occur.

react-native-video uses exoplayer and react-native-fast-image uses glide, so this might be a conflict between those two libraries. I am not a native android developer so my know-how is limited. Any hints are appreciated. Also I had not the opportunity to test on android version 8.x.x yet.

Video that demonstrates the issue: https://s3.eu-central-1.amazonaws.com/groove.cat/.misc/2018_07_30_12_22_02.mp4

This is the code of the image component:

import React, { Component } from 'react'
import { View } from 'react-native'
import PropTypes from 'prop-types'
import FastImage from 'react-native-fast-image'

const sizes = {
  small: 25,
  medium: 50,
  large: 100,
}

export default class GcRoundedImage extends Component {
  shouldComponentUpdate() {
    return false
  }

  render() {
    const {
      props: { imageSource, size = `medium`, style = {} },
    } = this
    const width = sizes[size]
    return (
      <View
        style={{
          height: width,
          width: width,
          borderRadius: width / 2,
          overflow: `hidden`,
          ...style,
        }}
      >
        <FastImage
          resizeMode={FastImage.resizeMode.contain}
          source={imageSource}
          style={{
            height: width,
            width: width,
            borderRadius: width / 2,
            overflow: `hidden`,
            ...style
          }}
          borderRadius={width / 2}
        />
      </View>
    )
  }
}

GcRoundedImage.propTypes = {
  imageSource: PropTypes.object.isRequired,
  size: PropTypes.oneOf([`large`, `medium`, `small`]),
}

[n1ru4l]

I was able to patch a workaround onto master:

patch-package
--- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
+++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java
@@ -84,12 +84,21 @@ class FastImageViewConverter {
             case IMMUTABLE:
                 // Use defaults.
         }
-        return new RequestOptions()
+        RequestOptions options = new RequestOptions()
                 .diskCacheStrategy(diskCacheStrategy)
                 .onlyRetrieveFromCache(onlyFromCache)
                 .skipMemoryCache(skipMemoryCache)
                 .priority(priority)
                 .placeholder(TRANSPARENT_DRAWABLE);
+        try {
+            if (source.getBoolean("circle") == true) {
+                options = options.circleCropTransform();
+            }
+        } catch (NoSuchKeyException e) {
+
+        }
+
+        return options;
     }
 
     private static FastImageCacheControl getCacheControl(ReadableMap source) {

This allows a new boolean property circle to the source object. This is a use case specific solution and might not apply to anyone, however it works fine for me 😕

[dochathuc]

I think this is react-native issue facebook/react-native#20278
Only happen on android

[dochathuc]

I also fork this lib base on @n1ru4l code. I passed borderRadius prop from style to native code, then apply RoundedConner to it.

https://github.com/dochathuc/react-native-fast-image

[n1ru4l]

@dochatuc That is awesome, have you thought about making a pull request for your changes?

[dochathuc]

@n1ru4l In my opinion, the fork is a temperate approach. We should wait for a fix from react-native lib

[n1ru4l]

This link might be helpful, seems like we could implement border-radius cropping on the native android thread:
https://github.com/wasabeef/glide-transformations/blob/master/transformations/src/main/java/jp/wasabeef/glide/transformations/RoundedCornersTransformation.java

@DylanVann What is your opinion on this? If you feel alright with it I could sent a pull request based upon glide-transformations.

[nehacs09]

Is this issue fixed?

[n1ru4l]

@nehacurefit No it is not fixed

[nehacs09]

@DylanVann are we planning to fix this anytime soon in this library?

[andrewkslv]

I observe the same issue with Android in the FlatList of images while using borderRadius as style property.

[hotdev405]

@andrewkslv did you manage to fix it? i have the same issue as well

[andrewkslv]

@hotdev405 I didn't. I've decided to use Image component from React Native for Android and Fast Image for iOS.

[birgernass]

Thanks @dochathuc. Your temporary solution works for me.

[vikjovanov]

Any fix ?

I have exactly the same problem when I scroll my horizontal list, the images inside the flatlist items have their borderRadius flickering and this only happens on Android too!