react-native-svg
react-native-svg copied to clipboard
Mask type does not work correctly on Android
Bug
Unexpected behavior
objects don't appear on Android when inside a mask which should show them. iOS shows them as expected.
code
/* eslint-disable i18next/no-literal-string */
import * as React from "react";
import Svg, { G, Mask, Path, SvgProps } from "react-native-svg";
export const SVGWithMask = (props: SvgProps): JSX.Element => (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={304}
height={271}
fill="none"
{...props}
>
<Mask
id="e"
width={28}
height={28}
x={240}
y={108}
>
<Path fill="#fff" d="M267.568 108.903h-26.867v26.867h26.867v-26.867Z" />
</Mask>
<G mask="url(#e)"> // <---- removing this, makes the element appear as expected
<Path
fill="#2D3142"
d="M250.321 116.318c2.337 1.713 4.455 5.751 5.502 6.48 1.041.722 7.913 3.053 7.913 3.053s3.309 1.021 3.477 1.321c.168.299-.187.51-.187.51l-10.86-2.729a10.21 10.21 0 0 0-.075.879.68.68 0 0 1-.137.461.648.648 0 0 1-.399.262s1.221 1.788 1.408 2.043c.181.256.106 1.166.106 1.166l-3.956-2.916-.897.442-1.976 3.894c.424 0 .835.025 1.259.075.611.068.287.324.33.542.038.218-.648-.106-.648-.106s-.685-.075-1.227-.075c0 .156-.019.318-.038.474 0 0 .904-.038 1.44-.112a1.106 1.106 0 0 1 1.084.548c.181.293-.686-.106-.686-.106s-.317.15-.392.293c-.075.149-.904.218-1.115.181-.218-.038-.979 0-1.259 0-.511.149-1.016.33-1.514.548-.287.075-1.221.037-1.184-.112.037-.15.897-.287.897-.287l-.791-.181-1.146.038s-.256-.218-.219-.324c.038-.106 1.153-.075 1.153-.075l.791-.075s.106-.143.219-.068c.461.118.947.106 1.401-.038.462-.187.505-.479.505-.479a8.47 8.47 0 0 0-.791.037c-.611.025-1.221.012-1.832-.037a.805.805 0 0 1-.573-.362c-.038-.106-.287-.037-.611-.324a1.583 1.583 0 0 1 1.115.144c.387.074.792.074 1.184 0 .262-.019.524-.094.754-.219a19.388 19.388 0 0 0 2.449-3.638c-8.2.511-9.384-5.639-9.558-7.602-.175-1.963.872-4.037.872-4.037s.324-1.097-.106-1.564c-.43-.468-1.308-.549-1.258-.692.043-.149.972-.33 1.302-.368 0 0 .866-2.436 2.879-2.199 2.006.237 3.669.903 5.427 5.352h-.013l-.019-.018Z"
/>
</G>
</Svg>
);
Environment info
expo 48
Library version: 13.4.0
Steps To Reproduce
Describe what you expected to happen:
- copy the above code
- view on android and ios. you'll see a bird appear on ios but not on android
- remove the G tag and both platforms show the same content.