ChargEco/Strides-SPAPP/app/components/VbeRadialGradient.js

import React from 'react';
import Svg, {
  Defs,
  RadialGradient,
  Rect,
  Stop,
} from 'react-native-svg';

const VbeRadialGradient = ({ colorList=[], x, y, rx, ry }) => {
  return (
    <Svg height="100%" width="100%">
      <Defs>
        <RadialGradient
          id="grad"
          cx={x}
          cy={y}
          rx={rx}
          ry={ry}
          gradientUnits="userSpaceOnUse"
        >
          { colorList.map((value, index) => (
            <Stop
              key={`RadialGradientItem_${index}`}
              offset={value.offset}
              stopColor={value.color}
              stopOpacity={value.opacity}
            />
          ))}
        </RadialGradient>
      </Defs>
      <Rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
    </Svg>
  );
};

export default VbeRadialGradient;