Gradient Fill Help for React Native Area Chart

[jjcfatras]

Hello Everyone, I'm running into some issues when trying to use a gradient fill for an area chart. This is my code:

import Svg, { Defs, LinearGradient, Stop } from 'react-native-svg';
import { CustomFonts, type FontWeight, useAppTheme } from '@theme';
import dayjs from 'dayjs';
import { VictoryArea, VictoryAxis, VictoryChart, VictoryGroup, VictoryScatter } from 'victory-native';

import { getCustomFontFamily } from '@cp/system-ui/src/components/forms/constants';
import { Box } from '@ui/components';

import type { DataTrendType } from '@cp/common/modules/pfm/constants/types';

type Props = {
	data: DataTrendType[];
};

const dummyData: DataTrendType[] = [
	{
		date: '2022-12',
		amounts: {
			member: 50,
			peers: 0,
			nationalAvg: 0,
		},
	},
	{
		date: '2023-01',
		amounts: {
			member: 0,
			peers: 0,
			nationalAvg: 0,
		},
	},
	{
		date: '2023-02',
		amounts: {
			member: 10,
			peers: 0,
			nationalAvg: 2,
		},
	},
	{
		date: '2023-03',
		amounts: {
			member: 20,
			peers: 0,
			nationalAvg: 0,
		},
	},
	{
		date: '2023-04',
		amounts: {
			member: 20,
			peers: 0,
			nationalAvg: 0,
		},
	},
	{
		date: '2023-05',
		amounts: {
			member: 60,
			peers: 0,
			nationalAvg: 0,
		},
	},
];

const TestChartComponent = ({ data }: Props) => {
	const {
		colors: { textPrimary, selectBorder },
		textVariants: { bodyFooter },
	} = useAppTheme();
	return (
		<Box>
			<Svg width={0} height={0}>
				<Defs>
					<LinearGradient id="gradient" x1="0%" x2="0%" y1="0%" y2="100%">
						<Stop offset="0%" stopColor="#E3016E" stopOpacity={0} />
						<Stop offset="100%" stopColor="#E3016E" stopOpacity={0.16} />
					</LinearGradient>
				</Defs>
			</Svg>
			<VictoryChart>
				<VictoryAxis
					data={dummyData}
					x={(d: DataTrendType) => dayjs(d.date).format('MMM').toUpperCase()}
					style={{
						grid: {
							stroke: selectBorder,
							strokeDasharray: 5,
						},
						tickLabels: {
							fill: textPrimary,
							fontSize: bodyFooter.fontSize,
							lineHeight: bodyFooter.lineHeight,
							fontFamily: getCustomFontFamily(CustomFonts.LibreFranklin, bodyFooter.fontWeight as FontWeight),
						},
						axis: { stroke: textPrimary },
					}}
				/>
				<VictoryAxis
					dependentAxis
					style={{
						tickLabels: { fill: 'none' },
						axis: { stroke: textPrimary },
					}}
				/>
				<VictoryGroup>
					<VictoryArea
						standalone={false}
						data={dummyData}
						x={(d: DataTrendType) => dayjs(d.date).format('MMM').toUpperCase()}
						y={(d: DataTrendType) => d.amounts.member}
						style={{
							data: { fill: 'url(#gradient)', stroke: '#E3016E', strokeWidth: 5 },
						}}
					/>
					<VictoryScatter
						data={dummyData}
						x={(d: DataTrendType) => dayjs(d.date).format('MMM').toUpperCase()}
						y={(d: DataTrendType) => d.amounts.member}
						size={6}
						style={{
							data: { fill: '#E3016E', stroke: '#E3016E' },
						}}
					/>
				</VictoryGroup>
			</VictoryChart>
		</Box>
	);
};

export default TestChartComponent;

When I run this I get

and I'm trying to get this