Permalink
Browse files

Implement border(Left|Right|Top|Bottom)Color for rounded borders

Reviewed By: achen1

Differential Revision: D6009609

fbshipit-source-id: 6a247a14aa48ac2edc637bf064216407a3a9a81f
  • Loading branch information...
RSNara authored and facebook-github-bot committed Oct 19, 2017
1 parent 4994d6a commit f7888310d4a831a65f929b058c8e871a81b63015
@@ -124,6 +124,44 @@ var styles = StyleSheet.create({
borderBottomColor: 'transparent',
borderLeftColor: 'red',
},
border12: {
borderStyle: 'solid',
overflow: 'hidden',
borderTopWidth: 10,
borderRightWidth: 20,
borderBottomWidth: 30,
borderLeftWidth: 40,
borderRadius: 20,
},
border13: {
borderStyle: 'solid',
overflow: 'hidden',
borderTopWidth: 10,
borderRightWidth: 20,
borderBottomWidth: 30,
borderLeftWidth: 40,
borderTopColor: 'red',
borderRightColor: 'green',
borderBottomColor: 'blue',
borderLeftColor: 'magenta',
borderRadius: 20,
},
border14: {
borderStyle: 'solid',
overflow: 'hidden',
borderTopWidth: 10,
borderRightWidth: 20,
borderBottomWidth: 30,
borderLeftWidth: 40,
borderTopColor: 'red',
borderRightColor: 'green',
borderBottomColor: 'blue',
borderLeftColor: 'magenta',
borderTopLeftRadius: 10,
borderTopRightRadius: 40,
borderBottomRightRadius: 30,
borderBottomLeftRadius: 40,
}
});
exports.title = 'Border';
@@ -228,4 +266,25 @@ exports.examples = [
return <View style={[styles.border11]} />;
}
},
{
title: 'Curved border(Left|Right|Bottom|Top)Width',
description: 'Make a non-uniform width curved border',
render() {
return <View style={[styles.box, styles.border12]} />;
}
},
{
title: 'Curved border(Left|Right|Bottom|Top)Color',
description: 'Make a non-uniform color curved border',
render() {
return <View style={[styles.box, styles.border13]} />;
}
},
{
title: 'Curved border(Top|Bottom)(Left|Right)Radius',
description: 'Make a non-uniform radius curved border',
render() {
return <View style={[styles.box, styles.border14]} />;
}
}
];
Oops, something went wrong.

0 comments on commit f788831

Please sign in to comment.