fix: cleanup native SVG animations (#232)

Co-authored-by: Lewis Yearsley <[email protected]>

Author: LewisYearsley

src/native/Svg.tsx

@@ -32,6 +32,8 @@ class NativeSvg extends Component<IContentLoaderProps> {
 
   idGradient = `${this.fixedId}-animated-diff`
 
+  unmounted = false
+
   setAnimation = () => {
     // props.speed is in seconds as it is compatible with web
     // convert to milliseconds
@@ -44,7 +46,7 @@ class NativeSvg extends Component<IContentLoaderProps> {
       duration: durMs,
       useNativeDriver: true,
     }).start(() => {
-      if (this.props.animate) {
+      if (!this.unmounted && this.props.animate) {
         this.animatedValue.setValue(-1)
         this.setAnimation()
       }
@@ -63,6 +65,10 @@ class NativeSvg extends Component<IContentLoaderProps> {
     }
   }
 
+  componentWillUnmount() {
+    this.unmounted = true
+  }
+
   render() {
     const {
       children,

src/native/__tests__/ContentLoader.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { Animated } from 'react-native'
 import * as renderer from 'react-test-renderer'
 import * as ShallowRenderer from 'react-test-renderer/shallow'
 
@@ -121,4 +122,30 @@ describe('ContentLoader', () => {
       expect(propsFromFullField.rtl).toBe(true)
     })
   })
+
+  describe('when using SVG', () => {
+    describe('cleanup', () => {
+      afterAll(() => {
+        jest.useRealTimers()
+      })
+
+      it('cleans up animations when unmounted', () => {
+        jest.useFakeTimers()
+        const animationSpy = jest.spyOn(Animated, 'timing')
+
+        const mockSpeed = 10
+        const { unmount } = renderer.create(
+          <ContentLoader animate={true} height={200} speed={mockSpeed}>
+            <Rect />
+          </ContentLoader>
+        )
+
+        jest.runTimersToTime(mockSpeed)
+        unmount()
+        jest.runTimersToTime(mockSpeed)
+
+        expect(animationSpy).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
 })