AnimatedGlow cause memory leak, eventual crash

[joeroganDOTca]

In my app I'm trying to have multiple glows (3 max right now) on the same screen at the same time. I've noticed that this causes the memory size when taking a heap snapshot in Chrome to increase in size, eventually leading to a crash. This occurs in Expo Go on Android as well, although I don't know how to monitor the exact memory usage there yet.

I have made a test screen to reduce the chances that it was something else in my app causing this. No buttons or anything to interact with, just simple View and Text within the Animated Glow on a single screen. At first I thought this was only occurring when the box of the glows overlap, but it seems to still occur when there is enough distance between them that they don't overlap.

When monitoring the heap snapshots size, the first few minutes there isn't much change. With this simple example my screen was coming in at about 183 MB. After about 5 minutes or so, things start to increase, roughly around 50-100 MB per minute. I just let the screen it open in my browse taking periodic snapshots. Around 25 min in it was at 1GB. After about an hour it was over 2 GB, then crashed:

Uncaught Error
Aborted(). Build with -sASSERTIONS for more info.
Call Stack
Ja
node_modules/canvaskit-wasm/bin/full/canvaskit.js
De.a
node_modules/canvaskit-wasm/bin/full/canvaskit.js

node_modules/canvaskit-wasm/bin/full/canvaskit.js
a.Canvas.prototype.clear
node_modules/canvaskit-wasm/bin/full/canvaskit.js
fetchAsync.then$argument_0
node_modules/@expo/metro-runtime/src/async-require/fetchThenEvalJs.ts
fetchAsync.then$argument_0
node_modules/@expo/metro-runtime/src/async-require/fetchThenEvalJs.ts
Collapse all 6 frames

My minimal screen with two glows.

`
<SafeAreaView
style={[{
backgroundColor: "black",
flex: 1,
}]}
>

    <AnimatedGlow 
      preset={glimmerGlow1}
      activeState={"default"}
      style={{ 
        height: "auto",
        position: "absolute",
        top: 50,
        left: 50,
      }}
    >
      <View style={{ flex: 1, borderRadius: 14, borderWidth: 2, borderColor: "red" }}>
        <Text style={[{ color: "white" }]}>Test 1</Text>
      </View>
    </AnimatedGlow>

    <AnimatedGlow 
      preset={glimmerGlow2}
      activeState={"default"}
      style={{ 
        height: "auto",
        position: "absolute",
        top: 400,
        left: 100,
      }}
    >
      <View style={{ flex: 1, borderRadius: 14, borderWidth: 2, borderColor: "red" }}>
        <Text style={[{ color: "white" }]}>Test 2</Text>
      </View>
    </AnimatedGlow>

</SafeAreaView>`

The packages that I think are relevant:

"react": "19.0.0",
"react-native": "0.79.5",
"react-native-animated-glow": "^3.0.1",
"react-native-reanimated": "~3.17.4",
"@shopify/react-native-skia": "v2.0.0-next.4",
"expo": "~53.0.22",

Let me know if there's anymore info that would be helpful to provide. I'm not sure from all this if the problem is from react-native-animated-glow or deeper into something like react-native-reanimated.

[joeroganDOTca]

Updated the title of this, I no longer believe this is limited to having more than one AnimatedGlow. In my sample above I reduced the code further to have only one AnimatedGlow. After about 5 minutes of things being stable, the memory then starts to increase.

[joeroganDOTca]

Just noting that the problem persists with upgraded:

"react": "19.1.0",
"react-native": "0.81.4",
"react-native-animated-glow": "^3.0.1",
"react-native-reanimated": "~4.1.0",
"@shopify/react-native-skia": "v2.2.14",
"expo": "~54.0.4",