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