React Native SVG Mask child not transforming - react-native

Question

I am drawing a couple circles ontop of a zoomable image. I want the circles to be hole views so the holes highlight the image behind it. So I am using a mask to draw the rect to darken the image and then circles to highlight parts of the image. I group together the mask and the rectangle and do the transformation on the mask. When the image is not zoomed in, everything is perfect. When I zoom in and pan the image, the circles stay where they are supposed to, but the background rect does not translate from the transformations.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}} >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" strokeWidth='5' stroke='white'
originX={delta.x * delta.zoom}
width={imageDetails.WIDTH * delta.zoom} height={imageDetails.HEIGHT} />
{data.map(item =>
<Circle r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width={imageDetails.WIDTH} height={imageDetails.HEIGHT} clipRule={'evenodd'}
fillRule={'nonzero'} stroke='blue' strokeWidth='2' vectorEffect='inherit'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</G>
</Svg>
I have played around with trying to transform the mask and the rect inside, but nothing.
Here are my screen shots show the full image, then zooming in, and the zooming in even more.

Answer 1

So my knowledge of SVG is limited, but I am learning. What I believe was happening was that the transformation was being applied to the everything, but the masked rect width and height are set to a value. Upon doing a scale, the width and height stay the exact same, so that is why it is being cut off. I had to change it so the transformation was being applied to the mask circles. So the mask rect will fill the whole screen always, and the circles will receive the transformation. Hopefully this helps anyone facing this issue.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" width='100%' height='100%' />
{data.map(item =>
<Circle
transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}}
r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width='100%' height='100%'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</Svg>