Untitled

import React from 'react';
import { Area } from 'victory-native';
import { Defs, LinearGradient, Stop } from 'react-native-svg';

import { useColors } from '../../../hooks/useColors';

export const GradientArea = (props: any) => {
  const { colors }: any = useColors();
  const { style, gradientColorStops, gradientStrokeStops, strokeLine = 3 } = props;

  const getDefaults = (defaultValue: any, arr: any) => {
    return arr && arr.length > 0 ? arr : defaultValue;
  };

  const defaultColorStop = { offset: 0.1, color: colors.action, stopOpacity: 0.3 };
  const defaultStrokeStop = { offset: 1, color: 'transparent', stopOpacity: 0 };

  const stopColor = getDefaults(defaultColorStop, gradientColorStops).map((stop: any, index: any) => {
    const { offset, color, stopOpacity } = stop;
    return <Stop key={index} offset={`${offset * 100}%`} stopColor={color} stopOpacity={stopOpacity} />;
  });

  const stopStrake = getDefaults(defaultStrokeStop, gradientStrokeStops).map((stop: any, index: any) => {
    const { offset, color, stopOpacity } = stop;
    return <Stop key={index} offset={`${offset * 100}%`} stopColor={color} stopOpacity={stopOpacity} />;
  });

  const gradientId = Math.random().toString();
  const strokeId = Math.random().toString();

  const newStyle = { ...style, fill: `url(#${gradientId})`, stroke: `url(#${strokeId})`, strokeWidth: strokeLine };

  return (
    <>
      <Defs>
        <LinearGradient id={gradientId} x1="0%" y1="0%" x2="0%" y2="100%">
          {stopColor}
        </LinearGradient>
      </Defs>
      <Defs>
        <LinearGradient id={strokeId} x1="0%" y1="0%" x2="0%" y2="100%">
          {stopStrake}
        </LinearGradient>
      </Defs>
      <Area {...props} style={newStyle} />
    </>
  );
};