<Circle /> inside a <Mask /> is not scaled correctly

[elmaxe]

Bug

When you nest a <Circle /> inside a <Mask /> and scale down the svg, circle will keep its initial size, and not scale down as expected. This seems to only happen for android.

For the following svg component we expect the masked circle component to be 30x30 pixels, but it keeps its size of 512x512:

<Svg height={30} width={30} viewBox="0 0 512 512">
    <Mask id="a">
      <Circle cx={256} cy={256} r={256} fill="#fff" />
    </Mask>
    <G mask="url(#a)">
        <Path
            fill="#0052b4"
            d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
        />
        <Path
            fill="#ffda44"
            d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"
        />
    </G>
</Svg>

https://github.com/software-mansion/react-native-svg/assets/33149910/25f796d7-1186-4ca5-a926-3afac2e29d3c

I tried the same svg code on the web, and it works as expected:

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">
    <mask id="a">
        <circle cx="256" cy="256" r="256" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <path fill="#0052b4" d="M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7 22.6 35.1V512H200.3l-32-19.8-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"/>
        <path fill="#ffda44" d="M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z"/>
    </g>
</svg>

Environment info

React native info output:

System:
  OS: macOS 14.1.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 162.22 MB / 32.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.0
      - iOS 17.0
      - macOS 14.0
      - tvOS 17.0
      - watchOS 10.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.0.1/15A507
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Library version: 14.1.0

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

1. git clone https://github.com/elmaxe/rnsvg-bug-repro
2. cd rnsvg-bug-repro
3. yarn
4. yarn android
5. Use the element inspector to see the sizes of the svg elements

Describe what you expected to happen:

1. Circle should be 30x30, not 512x512

[sierraleonez]

I experiencing the same thing while using SvgUri, have you found a workaround?

[jakex7]

Hey @sierraleonez, Could you share a reproduction repository? The one provided by @elmaxe no longer works for me, and I couldn't reproduce the issue using the latest version in our example app.

[sierraleonez]

Hi @jakex7, thank you for the response, I'm able to reproduce the issue here.

How to repro:

1. Scroll down (10 items)
2. Press item with index 11, 12
3. Item index 10 will be pressed instead (should be item index 11 or 12)

After I tried to inspect it, the cause of this issue is due to circle element blocking with 512x512 size, and it only happened inside flashlist, It works well on normal flatlist.