View will lost background color when set borderRadius and height is large enough on Android device

[peixin]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

No

Environment

@mjmasn's environment:

Environment:
  OS: Linux 4.13
  Node: 8.11.0
  Yarn: 1.7.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-native: ^0.55.4 => 0.55.4

@beiming's environment:

Environment:
  OS: macOS
  Node: 7.7.1
  npm: 4.1.2

Packages: (wanted => installed)
  react-native: ^0.47.2 => 0.47.2

Target Platform: 
  Android
  Android version: 4.4.4
  Screen resolution: 720 x 1280

Steps to Reproduce

// index.android.js

import React, {Component} from 'react';
import {AppRegistry, View, Text, ScrollView} from 'react-native';

class App extends Component {
    render() {
        return (
            <ScrollView>
                <View style={{
                    // if `borderRadius` > 0 and `height` is large enough like 3000 (2000 is ok on my android device), `backgroundColor` will disappear.
                    borderRadius: 1,
                    height: 3000,
                    backgroundColor: 'red',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Text>Test</Text>
                </View>
            </ScrollView>

        );
    }
}

AppRegistry.registerComponent('App', () => App);

Run react-native run-android on a device, it does not reproduce on an AVD.

Expected Behavior

It will be show a long view, with red background, and scroll view show Test in center.

Actual Behavior

It will be show a long view, but no background color (white, maybe transparent), and scroll view show Test in center.

[mike-niemand]

I have the same proble. Any resolution?

[gregblass]

Also getting this. I'm using simple Material Design card views. 2px border radius and a white background color set to a View element. If the card is long, it drops the background color and the background grey color shows through.

[gregblass]

Also worth noting that this does not happen using Genymotion - only with an actual device (Motorola Moto G).

[gregblass]

Tried updating to the latest Android on my device - this is still happening. I guess I'll be forced to remove the border radius on my Android cards until this is addressed.

If anyone knows of a workaround, please let me know!

[tikkichan4]

I got the same problem.... it is confusing because i have many large height views in my app

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[gregblass]

Hey now!

I'm not sure if this should be marked stale yet.

[gregblass]

Really common use case that I ran into is standard material design guidelines for 'Card' components, with dynamic content. If the content got long...the background color magically disappeared!!

Really gives an engineer credibility after they've pitched react native to a client.

So yeah...I'd review this one before closing it!

[JasonWoof]

I am suffering from this bug too.

I'm going to see if it's possible to simulate a tall box with rounded corners by having a short header view rounded top corners and no bottom border, then a resizing tall middle row with just left/right border, and a short bottom row with rounded bottom corners and no top border.

[JasonWoof]

That didn't work. It won't render the left/top/right borders when I set borderBottomWidth: 0.

[mjmasn]

This should still be open. Anyone want to write a bot to fight all these overeager fb bots and keep issues open? 😂

[nbaghiro]

This issue is still happening. It is happening for ScrollView in my case.

[Guodadada]

I am suffering from this bug too.