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

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`]),
}

[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

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