`<Mask>` and `<Pattern>` does not play nice on iOS

[alexdonh]

Bug

Using <Mask> with <Pattern> inside does not render consistently on Android and iOS.

Unexpected behavior

The <Rect> with pattern filled looks too small in iOS, which is unexpected. A simple <Rect>, however, renders normally on all platforms.

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 73.06 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1
    Yarn: 1.22.19
    npm: 9.2.0 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.0
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 28, 29, 30, 31, 32, 33
      Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0
      System Images: android-31 | ARM 64 v8a, android-31 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.6 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.5 => 0.71.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
✨  Done in 2.23s.

Library version: 13.9.0

Steps To Reproduce

1. Create a clean project
2. Install react-native-svg
3. App.tsx -> put the below code snippet somewhere to show (dont forget to import all required elements from react-native-svg

<View style={{width: 200, height: 200}}>
  <Svg width="100%" height="100%">
    <Defs>
      <Pattern id="pattern1" patternUnits="userSpaceOnUse" width="20" height="40">
        <Path d="M0 0l20 20V0z" fill="rgb(255,255,255)" />
        <Path d="M0 20zv20L20 20z" fill="rgb(255,255,255)" />
      </Pattern>
      <Mask id="mask1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
        <Rect width="100%" height="100%" fill="url(#pattern1)" />
        <Rect x="100" y="100" width="50" height="50" fill="white" />
      </Mask>
    </Defs>
    <Rect width="100%" height="100%" fill="red" />
    <Rect width="100%" height="100%" fill="yellow" mask="url(#mask1)" />
  </Svg>
</View>

Snack's also available: https://snack.expo.dev/@alex.donh/svg-with-mask-and-pattern

Describe what you expected to happen:

1. The pattern should render consistently.
2. Or, I don't know if there is missing configurations or an alternative way to achieve the same result.

[iankberry]

I think I'm experiencing the same issue, though I'm not using a mask. On Android (right) the striped pattern appears correctly. On iOS it's rendering oddly.

SVG source:

<Svg>
    <Defs>
        <Pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <Rect x="0" y="0" width="5" height="10" fill={theme.text.primary} opacity={currentScheme === 'light' ? 0.1 : 0.15} />
            <Rect x="5" y="0" width="5" height="10" fill={theme.text.secondary} opacity={currentScheme === 'light' ? 0.1 : 0.15} />
        </Pattern>
    </Defs>
    <Rect width="100" height="100" fill="url(#diagonalStripes)" />
</Svg>