react-native-linear-gradient/index.android.js

54 lines
1.9 KiB
JavaScript
Raw Normal View History

2015-09-30 17:06:36 +00:00
var React = require('react-native');
var flattenStyle = React.StyleSheet.flatten;
2016-01-27 13:38:15 +00:00
var { requireNativeComponent, processColor, PropTypes, View } = React;
2015-09-30 17:06:36 +00:00
var LinearGradient = React.createClass({
propTypes: {
2016-01-27 13:38:15 +00:00
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
2015-09-30 17:06:36 +00:00
},
render: function() {
2016-01-27 13:38:15 +00:00
var { style, children, colors, locations, start, end, ...otherProps } = this.props;
2016-01-19 17:31:20 +00:00
// inherit container borderRadius until this issue is resolved:
// https://github.com/facebook/react-native/issues/3198
var flatStyle = style && flattenStyle(style);
var borderRadius = flatStyle.borderRadius || 0;
// this is the format taken by:
// http://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF, float[], android.graphics.Path.Direction)
var borderRadiiPerCorner = [
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius
];
2016-01-19 17:31:20 +00:00
2015-09-30 17:06:36 +00:00
return (
2016-01-27 13:38:15 +00:00
<View {...otherProps} style={style}>
2015-09-30 17:06:36 +00:00
<NativeLinearGradient
style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
colors={colors.map(processColor)}
start={start}
end={end}
2016-01-19 17:31:20 +00:00
locations={locations}
borderRadii={borderRadiiPerCorner}
2016-01-19 17:31:20 +00:00
/>
2015-09-30 17:06:36 +00:00
{ children }
</View>
);
}
})
2016-01-27 13:38:15 +00:00
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
2015-09-30 17:06:36 +00:00
module.exports = LinearGradient;