Android: overflow + borderRadius clipping disappears for short moment after rerender

[n1ru4l]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
      Memory: 80.73 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.3 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 23.0.2, 25.0.2, 26.0.2, 27.0.3, 28.0.0
        API Levels: 23, 25, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4819257
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0

Description

This issue appears only on android.

When scrolling trough a FlatList that renders components which have an Image component with the borderRadius property, the Image components sometimes (typically after new content was added to the list, or also when some stuff inside the list item rerenders) show the unclipped image. Also adding an additional View wrapper (with a borderRadius and overflow:hidden) around the Image component results in the same problem. After a few seconds the clipping is reapplied most of the time. But sometimes the clipping is missing until something else causes a rerender e.g. an additional scroll.

Here a screenshot of the issue (upper rectangle image is wrong, lower circle image is correct):

The occurrence of this issue is not consistent and happens from time to time.

Reproducible Demo

Reproduction Component that results in

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View, Image } from 'react-native'

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

export default class GcRoundedImage extends Component {
  render() {
    const {
      props: { imageSource, size = `medium` },
    } = this
    const width = sizes[size]
    return (
      <View
        style={{
          height: width,
          width: width,
          borderRadius: width / 2,
          overflow: `hidden`,
        }}
      >
        <Image
          source={imageSource}
          style={{
            height: width,
            width: width,
            borderRadius: width / 2,
          }}
        />
      </View>
    )
  }
}

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

[dochathuc]

+1

[n1ru4l]

I am closing this because this seems to be not an issue related to react-native core.

[dochathuc]

I have the same issue. I am using react-native-fast-image which wrapped android glide lib in native code. This issue only happen on android with FastImage in react-native-fast-image, not Image in react-native android and only happen with some items on the listview. I think borderRadius in parent view does not work with FastImage child.