Unable to do one sided rounded corner using react-native-svg. I have written following code for ,
<code> <Svg height="30" width="100%">
<Defs>
<Mask id="clipRoundLeftSquareRight">
<Rect x="10" y="10" fill="white" width="35%" height="10" />
</Mask>
<Mask id="clipSquare">
<Rect x="0" y="10" fill="white" width="100%" height="10" />
</Mask>
<Mask id="clipSquareLeftRoundRight">
<Rect x="20" y="10" fill="white" width="100%" height="10" />
</Mask>
</Defs>
{arrayData.map((expenses, index) => {
let lineWidth = floor((totalWidth * expenses.percentage) / 100);
if (expenses.percentage > 0) {
const rect = (
<Rect
key={`line-${index}`}
width={startX + lineWidth}
x={index === 2 ? 0 : startX}
y="10"
mask={getClipPathForIndex(index)}
fill={getColorForType(expenses.type)}
height="10"
rx={getRadius(index)}
/>
);
startX = startX + lineWidth;
return rect;
}
})}
</Svg>
</code>
<code> <Svg height="30" width="100%">
<Defs>
<Mask id="clipRoundLeftSquareRight">
<Rect x="10" y="10" fill="white" width="35%" height="10" />
</Mask>
<Mask id="clipSquare">
<Rect x="0" y="10" fill="white" width="100%" height="10" />
</Mask>
<Mask id="clipSquareLeftRoundRight">
<Rect x="20" y="10" fill="white" width="100%" height="10" />
</Mask>
</Defs>
{arrayData.map((expenses, index) => {
let lineWidth = floor((totalWidth * expenses.percentage) / 100);
if (expenses.percentage > 0) {
const rect = (
<Rect
key={`line-${index}`}
width={startX + lineWidth}
x={index === 2 ? 0 : startX}
y="10"
mask={getClipPathForIndex(index)}
fill={getColorForType(expenses.type)}
height="10"
rx={getRadius(index)}
/>
);
startX = startX + lineWidth;
return rect;
}
})}
</Svg>
</code>
<Svg height="30" width="100%">
<Defs>
<Mask id="clipRoundLeftSquareRight">
<Rect x="10" y="10" fill="white" width="35%" height="10" />
</Mask>
<Mask id="clipSquare">
<Rect x="0" y="10" fill="white" width="100%" height="10" />
</Mask>
<Mask id="clipSquareLeftRoundRight">
<Rect x="20" y="10" fill="white" width="100%" height="10" />
</Mask>
</Defs>
{arrayData.map((expenses, index) => {
let lineWidth = floor((totalWidth * expenses.percentage) / 100);
if (expenses.percentage > 0) {
const rect = (
<Rect
key={`line-${index}`}
width={startX + lineWidth}
x={index === 2 ? 0 : startX}
y="10"
mask={getClipPathForIndex(index)}
fill={getColorForType(expenses.type)}
height="10"
rx={getRadius(index)}
/>
);
startX = startX + lineWidth;
return rect;
}
})}
</Svg>
To get dynamic getClipPathForIndex
,
<code>const getClipPathForIndex = (index: number) => {
switch (index) {
case 0:
return 'url(#clipRoundLeftSquareRight)';
case 1:
return 'url(#clipSquare)';
case 2:
return 'url(#clipSquareLeftRoundRight)';
default:
return 'url(#clipSquare)';
}
};
</code>
<code>const getClipPathForIndex = (index: number) => {
switch (index) {
case 0:
return 'url(#clipRoundLeftSquareRight)';
case 1:
return 'url(#clipSquare)';
case 2:
return 'url(#clipSquareLeftRoundRight)';
default:
return 'url(#clipSquare)';
}
};
</code>
const getClipPathForIndex = (index: number) => {
switch (index) {
case 0:
return 'url(#clipRoundLeftSquareRight)';
case 1:
return 'url(#clipSquare)';
case 2:
return 'url(#clipSquareLeftRoundRight)';
default:
return 'url(#clipSquare)';
}
};
To get dynamic getColorForType
,
<code>const getColorForType = (type: string) => {
switch (type) {
case 'First':
return theme.colors.TERTIARY.VIOLET[500];
case 'Second:
return theme.colors.TERTIARY.YELLOW[500];
case 'Third':
return theme.colors.PRIMARY[400];
default:
return 'grey';
}
};
</code>
<code>const getColorForType = (type: string) => {
switch (type) {
case 'First':
return theme.colors.TERTIARY.VIOLET[500];
case 'Second:
return theme.colors.TERTIARY.YELLOW[500];
case 'Third':
return theme.colors.PRIMARY[400];
default:
return 'grey';
}
};
</code>
const getColorForType = (type: string) => {
switch (type) {
case 'First':
return theme.colors.TERTIARY.VIOLET[500];
case 'Second:
return theme.colors.TERTIARY.YELLOW[500];
case 'Third':
return theme.colors.PRIMARY[400];
default:
return 'grey';
}
};
Mock data for expenseData as below,
<code> const arrayData = {
expenses: [
{ type: 'First', percentage: 40, value: 40000.0 },
{ type: 'Second', percentage: 30, value: 30000.0 },
{ type: 'Third', percentage: 30, value: 30000.0 },
],
};
export default expensesData;
</code>
<code> const arrayData = {
expenses: [
{ type: 'First', percentage: 40, value: 40000.0 },
{ type: 'Second', percentage: 30, value: 30000.0 },
{ type: 'Third', percentage: 30, value: 30000.0 },
],
};
export default expensesData;
</code>
const arrayData = {
expenses: [
{ type: 'First', percentage: 40, value: 40000.0 },
{ type: 'Second', percentage: 30, value: 30000.0 },
{ type: 'Third', percentage: 30, value: 30000.0 },
],
};
export default expensesData;
I’m getting following output,
But expected output is as below,