react-konva How to set Shape width and height to fill it's Group container? - konvajs

Question

I want to have the same animation movement on both a Text and a Rect. I put them into a group and apply a tween on the group. However, the x and y props are inherited, width and height are not, which means the Rect's width and height don't have smooth tween. Is there any way to set Rect's width and height to equal to 100% of its Group container's width and height all the time and along with their change?
const { scaleFactor, DynamicData, isPause } = props;
const groupRef = useRef<Konva.Group>(null);
const start = DynamicData.startData;
const end = DynamicData.endData;
useEffect(() => {
if (start && end && groupRef.current) {
const animation = new Tween({
node: groupRef.current,
duration: DynamicData.endTime - DynamicData.startTime,
x: scaleFactor * end.x,
y: scaleFactor * end.y,
width: scaleFactor * end.width,
height: scaleFactor * end.height,
easing: Easings.Linear,
});
if (isPause) {
animation.pause();
} else {
animation.play();
}
}
});
return (
<>
{!_.isUndefined(end) && (
<Group
ref={groupRef}
x={scaleFactor * start.x}
y={scaleFactor * start.y}
width={scaleFactor * start.width}
height={scaleFactor * start.height}
>
<Text
text={start.concept}
/>
<Rect
stroke={start.stroke}
/>
</Group>
)}
</>
);
};
update: for now I add a new Tween on Rect to track the width and height changes:
const sizeAnimation = new Tween({
node: rectRef.current,
duration: DynamicData.endTime - DynamicData.startTime,
width: scaleFactor * end!.width,
height: scaleFactor * end!.height,
easing: Easings.Linear,
});
if (isPause) {
sizeAnimation.pause();
} else {
sizeAnimation.play();
}

Answer 1

width and height properties of Konva.Group do nothing. They don't affect rendering.
You have to add another tween for rectangle.