1import React from 'react';
2import { StyleSheet, View } from 'react-native';
3import { requireNativeViewManager } from '@unimodules/core';
4
5type Props = {
6  colors: number[];
7  locations?: number[] | null;
8  startPoint?: Point | null;
9  endPoint?: Point | null;
10} & React.ComponentProps<typeof View>;
11
12type Point = [number, number];
13
14export default class NativeLinearGradient extends React.Component<Props> {
15  render() {
16    let { colors, locations, startPoint, endPoint, children, style, ...props } = this.props;
17
18    // TODO: revisit whether we need to inherit the container's borderRadius since this issue has
19    // been resolved: https://github.com/facebook/react-native/issues/3198
20    let flatStyle = StyleSheet.flatten(style) || {};
21    let borderRadius = flatStyle.borderRadius || 0;
22
23    // This is the format from:
24    // https://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF,%20float[],%20android.graphics.Path.Direction)
25    let borderRadiiPerCorner = [
26      flatStyle.borderTopLeftRadius || borderRadius,
27      flatStyle.borderTopLeftRadius || borderRadius,
28      flatStyle.borderTopRightRadius || borderRadius,
29      flatStyle.borderTopRightRadius || borderRadius,
30      flatStyle.borderBottomRightRadius || borderRadius,
31      flatStyle.borderBottomRightRadius || borderRadius,
32      flatStyle.borderBottomLeftRadius || borderRadius,
33      flatStyle.borderBottomLeftRadius || borderRadius,
34    ];
35
36    return (
37      <View {...props} style={style}>
38        <BaseNativeLinearGradient
39          style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
40          colors={colors}
41          startPoint={startPoint}
42          endPoint={endPoint}
43          locations={locations}
44          borderRadii={borderRadiiPerCorner}
45        />
46        {children}
47      </View>
48    );
49  }
50}
51
52const BaseNativeLinearGradient = requireNativeViewManager('ExpoLinearGradient');
53