Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Properly set the border color when there are round borders on Android (…
…facebook#25649) Summary: Drawing the border in one pass should only be done with the borderWidth and borderColor are the same for all directions (top, left, bottom and right), otherwise React may draw wrong colors. This commit adds a check to verify if all the colors are the same, otherwise it will draw each quadrilateral independently. ## Changelog [Android] [Fix] - Properly paint the border colors and there are round borders Pull Request resolved: facebook#25649 Test Plan: Using the code below one must see the correct border colors just like the example below: ### Without the fix ![Screen Shot 2019-07-14 at 19 41 49](https://user-images.githubusercontent.com/984610/61190322-eb8dd680-a670-11e9-9db0-c7f85557eb52.png) Notice that the first rectangle does not have a transparent top bar and the third rectangle have all borders black ### With the fix ![Screen Shot 2019-07-14 at 19 40 52](https://user-images.githubusercontent.com/984610/61190338-0bbd9580-a671-11e9-8339-c26547cfa1a3.png) All borders are properly colored. ```javascript import React from "react"; import { ScrollView, StyleSheet, Text, View } from "react-native"; export default class App extends React.Component<Props> { render() { return ( <ScrollView style={styles.container}> <View style={styles.react1}> <Text>Top border transparent</Text> </View> <View style={styles.react5}> <Text>Top border transparent - no round corners</Text> </View> <View style={styles.react2}> <Text>all borders green</Text> </View> <View style={styles.react3}> <Text>Green, Red, Blue, Purple colors</Text> </View> <View style={styles.react4}> <Text>Green, Red, Blue, Purple colors - no round corners</Text> </View> </ScrollView> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, react1: { alignItems: 'center', borderWidth: 1, borderColor: 'red', borderTopColor: 'transparent', borderBottomLeftRadius: 15, borderBottomRightRadius: 15, paddingVertical: 10, margin: 10, marginBottom: 20, }, react5: { alignItems: 'center', borderWidth: 1, borderColor: 'red', borderTopColor: 'transparent', paddingVertical: 10, margin: 10, marginBottom: 20, }, react2: { alignItems: 'center', borderWidth: 1, borderColor: 'green', borderRadius: 20, paddingVertical: 10, margin: 10, marginBottom: 20, }, react3: { alignItems: 'center', borderWidth: 1, borderTopColor: 'green', borderLeftColor: 'red', borderBottomColor: 'blue', borderRightColor: 'purple', borderBottomLeftRadius: 15, borderBottomRightRadius: 15, borderTopLeftRadius: 30, borderTopRightRadius: 30, paddingVertical: 10, margin: 10, marginBottom: 20, }, react4: { alignItems: 'center', borderWidth: 1, borderTopColor: 'green', borderLeftColor: 'red', borderBottomColor: 'blue', borderRightColor: 'purple', paddingVertical: 10, margin: 10, marginBottom: 20, }, }); ``` Closes facebook#25643 Differential Revision: D16258526 Pulled By: mdvacca fbshipit-source-id: 2d43eade23a5a78ccfda8693cc4e2e336ccec156
- Loading branch information