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