software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.51k stars 1.14k forks source link

fix: filters memory leak on apple #2534

Closed jakex7 closed 1 week ago

jakex7 commented 1 week ago

Summary

While animating filters, I discovered a memory leak due to not releasing the CGImage after creating the mask.

Test Plan

import {useEffect} from 'react';
import Animated, { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
import Svg, {FeOffset, Filter, Rect} from 'react-native-svg';

const AnimatedFilter = Animated.createAnimatedComponent(Filter);
const AnimatedFeOffset = Animated.createAnimatedComponent(FeOffset);
const AnimatedRect = Animated.createAnimatedComponent(Rect);
export default function Example() {
  const offset = useSharedValue(0.5);

  useEffect(() => {
    offset.value = withRepeat(withTiming(300, {duration: 3000}), -1, true);
  }, []);

  return (
    <Svg height="300" width="300">
      <AnimatedFilter id="filter">
        <AnimatedFeOffset dx={offset} dy={offset} result="offOut" />
      </AnimatedFilter>
      <AnimatedRect
        x="0"
        y="0"
        width="300"
        height="300"
        fill="red"
        filter="url(#filter)"
      />
    </Svg>
  );
}

Compatibility

OS Implemented
iOS
macOS