View will lost background color when set borderRadius and height is large enough on Android device #15826
Description
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.