ClipPath is not working properly on Android without clipRule prop

[ObidosDev]

Bug

Looks like ClipPath has only id prop, but at the same time code below do not working properly on android without this prop

Environment info

 System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 19.82 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.2.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 9.0.4 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.1.0

Steps To Reproduce

Issues without reproduction steps or code are likely to stall.

1. Use code below
2. Try it with // @ts-ignore clipRule={'evenodd'} and without

Describe what you expected to happen:

1. It should work without it OR need to fix the TS (types)

Short, Self Contained, Correct (Compilable), Example

<Svg width={'100%'} height={'100%'} viewBox={'0 0 256 340'}>
              <Defs>
                <Rect
                  id={'backgroundRect'}
                  x={-1}
                  y={-1}
                  width={258}
                  height={342}
                  fill={BACKGROUND_COLOR}
                />
                <Rect
                  id={'faceOvalRect'}
                  x={1}
                  y={1}
                  width={254}
                  height={338}
                  ry={127}
                  stroke={'#fff'}
                  strokeWidth={2}
                />

                <ClipPath
                  id={'clip'}
                  // @ts-ignore
                  clipRule={'evenodd'}
                >
                  <G>
                    <Use href={'#backgroundRect'} />

                    <Use href={'#faceOvalRect'} />
                  </G>
                </ClipPath>
              </Defs>

              <Use
                href={'#backgroundRect'}
                clipPath={'url(#clip)'}
                clipRule={'evenodd'}
              />

              <Use href={'#faceOvalRect'} />
            </Svg>

[mtourj]

Yep, that was my problem too. Thanks for this

[Gabrielfcs]

I tested the property and it works perfectly, just the type for this component was not added. So I opened a PR with a fix for this issue.

[magicismight]

Fixed in [email protected]

[SaeedZhiany]

@magicismight

why the new version does not follow semantic version rules? is it a stable version or an RC version? (I just think 12.1.1 was better)

also, please consider updating the changelog if you have time for it. Thanks

[magicismight]

@magicismight

why the new version does not follow semantic version rules? is it a stable version or an RC version? (I just think 12.1.1 was better)

also, please consider updating the changelog if you have time for it. Thanks

It's a RC version, I will release 12.1.1 later.

[hehex9]

it looks like it's already marked as latest on npm

[SaeedZhiany]

@hehex9 is right, it's marked as the latest version on npm.

[mahdieh-dev]

I finally got around this issue with an odd solution! (I also update react-native-svg to12.1.1 but no luck)

It was working fine in iOS even without clipRule parameter, so I ended up changing clipRule to its other variant whenever the props.data was changing (only when the device is android). so this is my workaround that works on both iOS and android:

    const [clipRule, setClipRule] = React.useState('evenodd')
    React.useEffect(()=>{
     if(Platform.OS === 'android') {
       setClipRule(clipRule==='evenodd' ? 'nonzero' : 'evenodd')
     }

and finally give this clipRule state as a prop to your <ClipPath/> component, like:

    <ClipPath id={"clip"} clipRule={clipRule} >
     ...
    </ClipPath>

I wish I was kidding but this works!

[Loovery]

It worked for me, but I need to add clipRule not for ClipPath

<Defs>
  <ClipPath id="testClipPath">
    <Path d={myPath} />
  </ClipPath>
</Defs>

<Rect clipRule={Platform.isAndroid ? 'nonzero' : 'evenodd'} clipPath="url(#testClipPath)"/>

[zhiqingchen]

It worked for me, but I need to add clipRule not for ClipPath

<Defs>
  <ClipPath id="testClipPath">
    <Path d={myPath} />
  </ClipPath>
</Defs>

<Rect clipRule={Platform.isAndroid ? 'nonzero' : 'evenodd'} clipPath="url(#testClipPath)"/>

Does anyone know why this can be fixed by setting clipRule to nonzero