[IOS] ClipPath component does not animate

[ryzr]

Bug

I have provided a sample SVG snippet. It contains two identical <Rect> elements, one of which is inside of a <ClipPath>. Both are animated in the same way, yet the <Rect> inside the <ClipPath> does not animate. I assume there may be some rendering cache, which keeps the initial shape on screen, even after the props are animated.

1. npm install react-native-svg (postinstall script runs jetify)
2. cd ios/
3. `pod install
4. Create component (code listed below)
5. react-native start
6. Run in xcode on iPhone 11 Simulator

Environment info

React native info output:

System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 36.89 MB / 8.00 GB
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.9.1 - /var/folders/q1/gv6xxwls7p74f7h_ndz9whw80000gn/T/fnm-shell-4665265/bin/node
    Yarn: 1.17.3 - /var/folders/q1/gv6xxwls7p74f7h_ndz9whw80000gn/T/fnm-shell-4665265/bin/yarn
    npm: 6.11.3 - /var/folders/q1/gv6xxwls7p74f7h_ndz9whw80000gn/T/fnm-shell-4665265/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 22, 23, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 26.0.0, 26.0.1, 27.0.3, 28.0.3
      System Images: android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64
  IDEs:
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 9.9.5

Steps To Reproduce

Describe what you expected to happen:

1. The <Rect> component (ref saved as this._rect) should move from offscreen left, to offscreen right.
2. The <Path> component should be invisible initially, and "wipe" in from the left as the <Rect> element above comes in to view. Then, after a 1500ms delay, it should "wipe" out to the right, again, following the animation of the <Rect> above.

What actually happened:

1. The <Rect> animated as expected.
2. The <Path> did not "wipe" in. The <ClipPath> with id #clip, which contains the exact same <Rect> as above, did not animate.

Reproducible sample code

import React, { Component } from 'react'
import { Animated, Easing } from 'react-native'
import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg'

export class LoadingSpinner extends Component {
  state = {
    clip: {
      x: new Animated.Value(-1080),
    },
  }

  componentDidMount () {
    this.state.clip.x.addListener((x) => {
      this._clip && this._clip.setNativeProps({
        x: x.value
      })

      this._rect && this._rect.setNativeProps({
        x: x.value
      })
    })

    let clipAnimation = Animated.sequence([
      Animated.timing(this.state.clip.x, {
        toValue: 0,
        duration: 750,
        easing: Easing.inOut(Easing.ease)
      }),
      Animated.delay(1500),
      Animated.timing(this.state.clip.x, {
        toValue: 1080,
        duration: 750,
        easing: Easing.inOut(Easing.ease)
      }),
      Animated.delay(500),
    ])

    Animated.loop(clipAnimation).start()
  }

  render () {
    return (
      <Svg
        viewBox="0 0 1080 1080"
        width="70%"
        height="70%">
        <Defs>
          <ClipPath id="clip">
            <Rect
              ref={component => (this._clip = component)}
              x={-1080}
              y={0}
              width={1080}
              height={1080} />
          </ClipPath>
        </Defs>
        <Rect
          ref={component => (this._rect = component)}
          x={-1080}
          y={0}
          width={1080}
          height={1080} />
        <G>
          <Path
            fill="#ffffff"
            clipPath="url(#clip)"
            d="M580 598h-86l-57-66-57 66h-73v-42h54l76-89 77 89h66v42z M610 598h-34v-42h34a121 121 0 0 0 121-121h42c0 90-73 163-163 163z"
          />
        </G>
      </Svg>
    )
  }
}

[msand]

🎉 This issue has been resolved in version 9.9.6 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[wcandillon]

@msand This is incredible.
I can confirm that it works as well with an animated Path (not only an animation with setNativeProps).

    <Svg {...{ width, height }}>
      <Defs>
        <ClipPath id="wave">
          <AnimatedPath {...{ d }} />
        </ClipPath>
      </Defs>
      <Image
        clipPath="url(#wave)"
        href={require("./assets/image.png")}
        preserveAspectRatio="xMidYMid slice"
        x={0}
        y={0}
        {...{ width, height }}
      />
    </Svg>