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).