Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:14 (2 by maintainers)

Top GitHub Comments

6reactions

react-native-botcommented, Nov 8, 2018

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.

2reactions

chillios-tscommented, Nov 8, 2018

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