Invisible content of large View with borderRadius > 0 (Android 7.0, RN >= 0.57.1)

[mefjuu]

Environment

 React Native Environment Info:
 System:
 OS: macOS High Sierra 10.13.6
 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 Memory: 31.61 MB / 16.00 GB
 Shell: 3.2.57 - /bin/bash
 Binaries:
 Node: 8.12.0 - /usr/local/bin/node
 Yarn: 1.10.1 - /usr/local/bin/yarn
 npm: 6.4.1 - /usr/local/bin/npm
 Watchman: 4.9.0 - /usr/local/bin/watchman
 SDKs:
 iOS SDK:
 Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
 IDEs:
 Android Studio: 3.1 AI-173.4907809
 Xcode: 10.0/10A255 - /usr/bin/xcodebuild
 npmPackages:
 react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
 react-native: 0.57.4 => 0.57.4 
 npmGlobalPackages:
 react-native-cli: 2.0.1
 react-native-git-upgrade: 0.2.7

AVD: Nexus_5X_API_24 (Android 7.0)

Description

Large <View /> with borderRadius > 0 gets invisible on Android 7.0 (API level 24) using RN >= 0.57.1.
It's regression, because it rendered correctly using RN 0.57.0.

Reproducible Demo

This is rendered expectedly:

export default class App extends React.Component {
 render() {
 return (
 <ScrollView style={{ flex: 1 }}>
 <View style={{ borderRadius: 10, backgroundColor: "violet", height: 731 }} />
 </ScrollView>
 );
 }
}

However after increasing the height, the violet content disappears, but ScrollView is aware of it so can be scrolled vertically.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The "⏪Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[ice-chillios]

It is not related to the Old Version you sneaky @react-native-bot

[mefjuu]

It seems to be resolved in RN 0.57.5

[michbil]

It seems to be resolved in RN 0.57.5

Updated 0.57.5, problem persists

[michbil]

Only one way to overcome this issue currently is to split big view to 3 subviews, with rounded corners assigned to top and bottom one, so big content will be without rounded corners at all

[DanGDroid]

same here

Environment:

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
Memory: 1.78 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.7.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 22.0.1, 23.0.1, 23.0.3, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 27.0.0, 27.0.1, 27.0.2, 27.0.3
API Levels: 19, 21, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4670197
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1

i have View 0.75% of screen size with style:

modalContent : {
 alignItems:'center',
 backgroundColor:'white',
 borderWidth : 1,
 borderColor : 'black',
 borderRadius : 5,
 width:modalWidth,
 height: modalHeight,
 },

checked on Samsung s7, Android 7.0

works fine on Android !== 7.0

[mefjuu]

For me, as I've written, it started working properly after upgrading RN to 0.57.5.
However, on a cheap device equipped with poor GPU, screens containing those large <View/>s with rounded corners suffer for jerky scrolling again (on 0.57.1 it was smooth).