Memory Leak When Rendering SVG with Filters on iOS and High Memory/CPU Consumption on Android

[roni-castro-shipt]

Description

When an SVG image has a filter tag, it causes a memory leak on iOS and requires significant RAM and CPU to render on both Android and iOS. I noticed this happening also on the old arch apps

iOS

ios_memory_leak.mov

Android

android_too_much_memory.mp4

Steps to reproduce

1. Run the demo app
2. Tap on show svg

Snack or a link to a repository

https://github.com/roni-castro-shipt/react-native-svg-memory-leak

SVG version

15.12.0

React Native version

0.79.1

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[roni-castro-shipt]

Applying this change to remove any filter tag mitigates this problem temporarily, but it does not fix the memory leak on iOS:

diff --git a/node_modules/react-native-svg/src/elements/G.tsx b/node_modules/react-native-svg/src/elements/G.tsx
index 602cde2..d0dce07 100644
--- a/node_modules/react-native-svg/src/elements/G.tsx
+++ b/node_modules/react-native-svg/src/elements/G.tsx
@@ -41,6 +41,7 @@ export default class G<P> extends Shape<GProps & P> {
     if (hasProps(font)) {
       extractedProps.font = font;
     }
+    extractedProps.filter = undefined
     return (
       <RNSVGGroup
         ref={(ref) => this.refMethod(ref as (G<P> & NativeMethods) | null)}