ClipPath rendering white background on iOS

[Relax594]

Bug

Svg is displayed with a white background and because of that not visible on iOS. Android is totally fine somehow. This is happening after upgrading from 9.9.0 to 9.10.0. Every version before 9.9.0 worked. We haven't tested the versions between 9.9.0 and 9.10.0.

This is how it should be:

And this is how it is after upgrading:

Environment info

React native info output:

 React Native Environment Info:
    System:
      OS: Windows 8.1
      CPU: (8) x64 Intel(R) Xeon(R) CPU           E5630  @ 2.53GHz
      Memory: 41.90 GB / 48.00 GB
    Binaries:
      Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312

Library version: 9.10.0

Steps To Reproduce

1. Just use the Svg on a button or whatever with 9.10.0
2. Use the same Svg on the same button with every version below 9.9.0

Describe what you expected to happen:

1. I wanted this
   

2. but got this
   

Reproducible sample code

<Svg width={32} height={32}>
        <G transform="matrix(.9382 0 0 .93123 2 .926)" fill="#fff">
            <ClipPath id="prefix__a">
                <Path d="M27.11 12.782l-4.266-4.219L23.4 8H18V2h5.367l-.523-.529L24.331 0H0v32h32V7.837z" fill="#FFF" />
            </ClipPath>
            <G clipPath="url(#prefix__a)">
                <Path d="M30 28H0V4h30zM2 26h26V8.445L17.949 17.88c-.936.823-1.866 1.206-2.925 1.206h-.019c-1.079 0-2.026-.39-2.979-1.227l-.024-.022L2 8.445zm11.358-9.633c.577.504 1.07.719 1.647.719h.019c.556 0 1.033-.209 1.593-.698L27.683 6H2.317z" />
            </G>
            <Path d="M27.094.08l4.882 4.937-4.882 4.936-1.422-1.406L28.191 6H20V4h8.158l-2.486-2.513z" />
        </G>
    </Svg>

[msand]

Try wrapping the ClipPath inside a Defs element:

export default class App extends React.Component {
 render() {
   return (
     <View style={styles.container}>
       <Svg width={32} height={32}>
         <Defs>
           <ClipPath id="prefix__a">
             <Path
               d="M27.11 12.782l-4.266-4.219L23.4 8H18V2h5.367l-.523-.529L24.331 0H0v32h32V7.837z"
               fill="#FFF"
             />
           </ClipPath>
         </Defs>
         <G transform="matrix(.9382 0 0 .93123 2 .926)" fill="#fff">
           <G clipPath="url(#prefix__a)">
             <Path d="M30 28H0V4h30zM2 26h26V8.445L17.949 17.88c-.936.823-1.866 1.206-2.925 1.206h-.019c-1.079 0-2.026-.39-2.979-1.227l-.024-.022L2 8.445zm11.358-9.633c.577.504 1.07.719 1.647.719h.019c.556 0 1.033-.209 1.593-.698L27.683 6H2.317z" />
           </G>
           <Path d="M27.094.08l4.882 4.937-4.882 4.936-1.422-1.406L28.191 6H20V4h8.158l-2.486-2.513z" />
         </G>
       </Svg>
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   backgroundColor: 'black',
   justifyContent: 'center',
   alignItems: 'center',
   flex: 1,
 },
});

[Relax594]

That worked, thank you! In 9.11.1 this workaround is still needed.

[msand]

I have a fix in the develop branch, could you test it out?
yarn add react-native-svg@react-native-community/react-native-svg#2534537

[Relax594]

Will give it a try tomorrow, thanks!

[Relax594]

@msand seems to be fine! Thanks for the quick fix!

[msand]

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[harshitaahuja]

Still facing this issue on latest version 9.13.3 when using "react-native-svg-transformer": "^0.13.0",

[msand]

@harshitaahuja Can you provide a reproduction? And perhaps open a new issue, as this one is closed / resolved already.

[harshitaahuja]

@msand Below is the svg file I am using

<svg xmlns="http://www.w3.org/2000/svg" id="copyright" width="13.563" height="13.563" viewBox="0 0 13.563 13.563">
    <defs>
        <style>
            .cls-1{fill:#fff}
        </style>
    </defs>
    <path id="Path_701" d="M6.781 13.563a6.781 6.781 0 1 1 6.781-6.781 6.789 6.789 0 0 1-6.781 6.781zm0-12.715a5.934 5.934 0 1 0 5.934 5.934A5.94 5.94 0 0 0 6.781.848z" class="cls-1" data-name="Path 701"/>
    <path id="Path_702" d="M114.214 117.6a3.391 3.391 0 1 1 2.423-5.763l-.606.593a2.543 2.543 0 1 0 0 3.559l.605.594a3.364 3.364 0 0 1-2.422 1.018z" class="cls-1" data-name="Path 702" transform="translate(-107.432 -107.432)"/>
</svg>

Usage
<Copyright width={13} height={13} fill={'#a5a'} />

Its working fine on android but showing white background on iOS.

[msand]

Can you try upgrading react-native-svg-transformer to the just released v0.14.0 ?
kristerkari/react-native-svg-transformer#54 (comment)

[harshitaahuja]

@msand yes it fixed the background issue but introduced a new issue where fill atribute is no longer working. I will take that issue there. thanks