currentColor not using correct color sometimes

[believer]

Description

We have SVG icons that use currentColor for strokes and fills. These are styled using NativeWind which sets the color on the SVG.

In the screenshots below, both SVGs display that the color property is defined as rgba(171, 171, 171, 1) in light mode and rgba(94, 94, 94, 1) in dark mode. But, the left icon is clearly using some other color. They should both look like the right icon.

Reloading the app solves the problem temporarily.

We don't remember that this was happening before we upgraded to the New Architecture, so there might be something related with that?

Light	Dark

Steps to reproduce

Unfortunately, we don't have a clear reproduction.

1. Use react-native-svg-transformer to convert imported SVGs
2. Set color property of imported SVGs
3. Navigate around and some icons might loose their connection to the defined color

Snack or a link to a repository

SVG version

15.10.0

React Native version

0.76.3

Platforms

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

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[Dunedubby]

Not sure if this is the same issue, but we've also recently noticed that navigating around (particularly when doing a navigation.reset) causes getCurrentColor in RNSVGRenderable to completely crash out the app. When you say navigate, are you using react-navigation?

[Dunedubby]

As clarification: we are also occasionally seeing the issue mentioned by OP where SVGs revert back to some default color that isn't the one specified in the component tree. It also happens pretty randomly. We strongly suspect that this and the aforementioned getCurrentColor crash are the same underlying issue.

[believer]

Yes, we are using react-navigation and we've also seen crashes related to getCurrentColor so that could definitely be something.

[jakex7]

Hey, I've never come across that bug before, so please provide a minimal reproduction (can't be random), otherwise I won't be able to debug it

[believer]

Will try to create a reproduction of it next week!

[believer]

Just got a crash in RNSVGRenderable that might point to something, even if it's not a reproduction? 😅

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   App.debug.dylib     	       0x10aff097c -[RNSVGRenderable color] + 4 (RNSVGRenderable.h:22)
1   App.debug.dylib     	       0x10aff0734 -[RNSVGRenderable getCurrentColor] + 32 (RNSVGRenderable.mm:764)
2   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
3   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
4   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
5   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
6   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
7   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
8   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)
9   App.debug.dylib     	       0x10aff07ec -[RNSVGRenderable getCurrentColor] + 216 (RNSVGRenderable.mm:768)

There's hundred of lines of the [RNSVGRenderable getCurrentColor] in the call stack. Some recursive calling of the function that overflows?

[gituser8796]

@jakex7 we just experienced the exact same crash and also noticed the issue with incorrect colors, but only on iOS (Android works fine), [email protected] with new architecture enabled.

No clear repro, it seems to be frequent though

[believer]

@jakex7 I've tried to create a minimal reproduction, but I can't get it to crash or show the wrong colors.

There seems to be something though, since more people are reporting similar issues, but I'm sorry that I can't provide a clear case where it fails.

[jakex7]

Hey @believer,

Appreciate your efforts! I've implemented a blind fix in #2570 that should address the issue. Could you try applying it as a patch and test it over to confirm? Thanks!

[believer]

Ohh awesome, we've patched it in and initial results look very promising! We have a case where a logo consistently lost its color (couldn't repro it though 😅) and this now seems to work.

We'll continue testing it during the day to see if we get weird colors or crashes. Will report back later today!

[believer]

We haven't seen any crashes or color issues since we added the patch earlier today. I believe this was the fix 🎉 Thank you so much @jakex7!

[boazarad88]

Hi @believer @jakex7

My team is also experiencing this issue (no crash though, just currentColor being stale).
Unfortunately we also don't have an easy reproduce, but it reproduced for us consistently using Metro hot reloading (not sure how to demonstrate this, but I hope this helps in investigation).

After seeing #2570 I tried applying a similar fix for color_ here #2573 and can verify that it works (using the hot reloading hack).

This might not be the actual fix but I hope this helps in finding the actual cause 🙏

[gituser8796]

@jakex7 do we have expected release date for this one?

[augusthjerrild]

We are experiencing the same thing in our app. Only happens when using navigation.reset. First reset, a lot of svg's changes color and some disappears, and after second reset the app crashes completely :-)

*** After implementing the provided patch, we don't get the svg bugs and app crash as well! So great job!

[Dunedubby]

I can also confirm that the patch works! Thanks @jakex7!

[jakex7]

@jakex7 do we have expected release date for this one?

I'm planning to release a new version early next week. Thanks everyone for testing it!

[Unuuuuu]

Hi @jakex7 Thank you for your work.
Could you let me know if there’s an update on the release schedule?