import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={[styles.view, styles.withBottomBorder]}>
<Text>Only bottom border with color</Text>
</View>
<View style={[styles.view, styles.withBorderRadius]}>
<Text>Only bottom border with radius</Text>
</View>
<View style={[styles.view, styles.withBorderRadius, styles.withBottomBorder]}>
<Text>Bottom border with radius and color, but only backgroundColor applies, green bottom border is missing</Text>
</View>
<View style={[styles.view, styles.withBottomBorder, styles.withBorderRadius]} >
<Text>Bottom border with color and radius, but only backgroundColor applies, green bottom border is missing</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
view: {
width: 200,
height: 100,
backgroundColor: '#ffa',
margin: 10,
padding: 10
},
withBorderRadius: {
borderTopRightRadius: 5,
borderTopLeftRadius: 5
/* the same is ofr the borderBottomRight/Left */
},
withBottomBorder: {
borderBottomColor: '#0f0',
borderBottomWidth: 1,
backgroundColor: '#faa'
}
});
Last two should look like first one, but with border radius at the top.
Look minimal example above with screens.
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: Windows 10
Node: 8.6.0
Yarn: Not Found
npm: 5.3.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003
Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3
Steps to Reproduce
Minimal example:
Expected Behavior
Last two should look like first one, but with border radius at the top.
Actual Behavior
Border is missing when using borderRadius
Reproducible Demo
Look minimal example above with screens.