Closed jakex7 closed 1 week ago
While animating filters, I discovered a memory leak due to not releasing the CGImage after creating the mask.
CGImage
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> ); }
Summary
While animating filters, I discovered a memory leak due to not releasing the
CGImage
after creating the mask.Test Plan
Compatibility