2015-09-30 17:06:36 +00:00
|
|
|
var React = require('react-native');
|
2016-03-16 18:47:14 +00:00
|
|
|
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),
|
2015-12-07 18:15:01 +00:00
|
|
|
...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
|
2016-02-22 08:53:09 +00:00
|
|
|
var borderRadius = style && flattenStyle(style).borderRadius || 0;
|
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)}
|
2015-10-01 16:48:02 +00:00
|
|
|
start={start}
|
|
|
|
end={end}
|
2016-01-19 17:31:20 +00:00
|
|
|
locations={locations}
|
|
|
|
borderRadius={borderRadius}
|
|
|
|
/>
|
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;
|