Some Icons not rendering in iOS after updating react-native-svg from version 15.3.0

[ruiqbarbosa]

Description

After updating react-native-svg from version 15.3.0, some icons stopped working on iOS. The issue does not affect Android—icons continue to render correctly on that platform.

Here is an example of the affected icons:

import Svg, { G, Mask, Path, Rect } from "react-native-svg";

import { IconType } from ".";

export const BidIcon = ({ color = "black", size = 24 }: IconType) => (
    <Svg width={size} height={size} viewBox='0 0 12 13' fill='none'>
        <Mask id='mask0_2261_4842' maskUnits='userSpaceOnUse' x={1} y={3} width={10} height={7}>
            <Path
                d='M10.8686 9.36854C10.9499 9.28734 11 9.17501 11 9.05087L11 8.45077C11 8.32644 10.9493 8.21374 10.8677 8.13216C10.7861 8.05059 10.6733 7.99995 10.5488 7.99995L10.3996 7.99995L10.3996 5.00005L10.5488 5.00005C10.6733 5.00005 10.7861 4.94941 10.8677 4.86784C10.9493 4.78626 11 4.67356 11 4.54923L11 3.94913C11 3.8248 10.9499 3.71266 10.8686 3.63146C10.7874 3.55026 10.675 3.5 10.5505 3.5L7.24641 3.5C7.12199 3.5 7.00957 3.55007 6.92831 3.63146C6.84705 3.71285 6.79694 3.82499 6.79694 3.94932L6.79694 4.54923C6.79694 4.67356 6.84761 4.78626 6.92925 4.86784C7.01088 4.94941 7.12367 5.00005 7.2481 5.00005L7.3973 5.00005L7.3973 7.99995L7.2481 7.99995C7.12367 7.99995 7.01088 8.0504 6.92925 8.13216C6.84761 8.21392 6.79694 8.32644 6.79694 8.45077L6.79694 9.05087C6.79694 9.1752 6.84705 9.28753 6.92831 9.36873C7.00957 9.44993 7.12199 9.5 7.24641 9.5L10.5505 9.5C10.675 9.5 10.7874 9.44974 10.8686 9.36854ZM6.79675 5.9L5.24603 5.9C5.24603 5.73422 5.17885 5.58439 5.07019 5.47581C4.96153 5.36723 4.81139 5.30009 4.64568 5.30009L1.60036 5.30009C1.43446 5.30009 1.28432 5.36723 1.17585 5.47581C1.06719 5.58439 0.999999 5.73441 0.999999 5.9L0.999999 7.1C0.999999 7.26578 1.06719 7.4158 1.17585 7.52438C1.28451 7.63296 1.43464 7.70009 1.60054 7.70009L4.64587 7.70009C4.81177 7.70009 4.9619 7.63296 5.07056 7.52438C5.17922 7.4158 5.24641 7.26578 5.24641 7.10019L6.79713 7.10019L6.79675 5.9Z'
                fill={color}
            />
        </Mask>
        <G mask='url(#mask0_2261_4842)'>
            <Rect x={12} y={0.5} width={12} height={12} transform='rotate(90 12 0.5)' fill='white' />
        </G>
    </Svg>
);

Here’s a screenshot illustrating the issue:

The icon works fine in version 15.3.0, but fails to render in any version up to 15.3.0.

Steps to reproduce

1. Install react-native-svg with latest version
2. Use the icon code shown above
3. The icon is not going to be render in iOS

Snack or a link to a repository

https://snack.expo.dev/@bcabuyerappeu/react-native-svg-issue

SVG version

15.7.1

React Native version

0.75.2

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[bohdanprog]

It works from our main branch. That problem was resolved in that PR.

Unfortunately, it would help if you waited until the next release.