1 | 'use strict';
|
2 |
|
3 | import React, {
|
4 | Component,
|
5 | PropTypes,
|
6 | } from 'react';
|
7 |
|
8 | import {
|
9 | StyleSheet,
|
10 | View,
|
11 | processColor,
|
12 | requireNativeComponent,
|
13 | } from 'react-native';
|
14 |
|
15 | export default class LinearGradient extends Component {
|
16 | static propTypes = {
|
17 | start: PropTypes.arrayOf(PropTypes.number),
|
18 | end: PropTypes.arrayOf(PropTypes.number),
|
19 | colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
20 | locations: PropTypes.arrayOf(PropTypes.number),
|
21 | ...View.propTypes,
|
22 | };
|
23 |
|
24 | render() {
|
25 | const {
|
26 | children,
|
27 | colors,
|
28 | end,
|
29 | locations,
|
30 | start,
|
31 | style,
|
32 | ...otherProps,
|
33 | } = this.props;
|
34 |
|
35 | if ((colors && locations) && (colors.length !== locations.length)) {
|
36 | console.warn('LinearGradient colors and locations props should be arrays of the same length');
|
37 | }
|
38 |
|
39 |
|
40 |
|
41 | const flatStyle = StyleSheet.flatten(style) || {};
|
42 | const borderRadius = flatStyle.borderRadius || 0;
|
43 |
|
44 |
|
45 |
|
46 | const borderRadiiPerCorner = [
|
47 | flatStyle.borderTopLeftRadius || borderRadius,
|
48 | flatStyle.borderTopLeftRadius || borderRadius,
|
49 | flatStyle.borderTopRightRadius || borderRadius,
|
50 | flatStyle.borderTopRightRadius || borderRadius,
|
51 | flatStyle.borderBottomRightRadius || borderRadius,
|
52 | flatStyle.borderBottomRightRadius || borderRadius,
|
53 | flatStyle.borderBottomLeftRadius || borderRadius,
|
54 | flatStyle.borderBottomLeftRadius || borderRadius,
|
55 | ];
|
56 |
|
57 | return (
|
58 | <View {...otherProps} style={style}>
|
59 | <NativeLinearGradient
|
60 | style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
|
61 | colors={colors.map(processColor)}
|
62 | start={start}
|
63 | end={end}
|
64 | locations={locations ? locations.slice(0, colors.length) : null}
|
65 | borderRadii={borderRadiiPerCorner}
|
66 | />
|
67 | {children}
|
68 | </View>
|
69 | );
|
70 | }
|
71 | }
|
72 |
|
73 | const NativeLinearGradient = requireNativeComponent('ExponentLinearGradient', null);
|