React native svg transformer does not color svg using replaceAttrValues

[Pabluor]

I'm trying to color a svg using react-native-svg-transformer and react-native-svg but it does not work. I have the impression that the file .svgrrc is not taken into consideration because wether I change its content or even I delete it it does not change anything.

I made sure to carefully follow the configuration steps described in the react-native-svg-transformer doc and created a metro.config.js witht the code given in the doc.

SVG file

<svg width="5988" height="4684" viewBox="0 0 5988 4684" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="5988" height="4684" fill="#f01"/> <rect x="3144" y="200" width="2644" height="4284" fill="#000"/> <path d="M3174 200H3593L3383.5 1895.5L3174 200Z" fill="#f01"/> <path d="M3607 200H4026L3816.5 1895.5L3607 200Z" fill="#ff1"/> <path d="M4040 200H4459L4249.5 1895.5L4040 200Z" fill="#f01"/> <path d="M4473 200H4892L4682.5 1895.5L4473 200Z" fill="#ff1"/> <path d="M4906 200H5325L5115.5 1895.5L4906 200Z" fill="#f01"/> <path d="M5339 200H5758L5548.5 1895.5L5339 200Z" fill="#ff1"/> <path d="M3593 4483.5H3174L3383.5 2788L3593 4483.5Z" fill="#f01"/> <path d="M4026 4483.5H3607L3816.5 2788L4026 4483.5Z" fill="#ff1"/> <path d="M4459 4483.5H4040L4249.5 2788L4459 4483.5Z" fill="#f01"/> <path d="M4892 4483.5H4473L4682.5 2788L4892 4483.5Z" fill="#ff1"/> <path d="M5325 4483.5H4906L5115.5 2788L5325 4483.5Z" fill="#f01"/> <path d="M5758 4483.5H5339L5548.5 2788L5758 4483.5Z" fill="#ff1"/> <rect x="200" y="200" width="2644" height="4284" fill="#000"/> <path d="M230 200H649L439.5 1895.5L230 200Z" fill="#f01"/> <path d="M663 200H1082L872.5 1895.5L663 200Z" fill="#ff1"/> <path d="M1096 200H1515L1305.5 1895.5L1096 200Z" fill="#f01"/> <path d="M1529 200H1948L1738.5 1895.5L1529 200Z" fill="#ff1"/> <path d="M1962 200H2381L2171.5 1895.5L1962 200Z" fill="#f01"/> <path d="M2395 200H2814L2604.5 1895.5L2395 200Z" fill="#ff1"/> <path d="M649 4483.5H230L439.5 2788L649 4483.5Z" fill="#f01"/> <path d="M1082 4483.5H663L872.5 2788L1082 4483.5Z" fill="#ff1"/> <path d="M1515 4483.5H1096L1305.5 2788L1515 4483.5Z" fill="#f01"/> <path d="M1948 4483.5H1529L1738.5 2788L1948 4483.5Z" fill="#ff1"/> <path d="M2381 4483.5H1962L2171.5 2788L2381 4483.5Z" fill="#f01"/> <path d="M2814 4483.5H2395L2604.5 2788L2814 4483.5Z" fill="#ff1"/> </svg>

Component

<SVGBoard width={300} height={300} primary='#5A391A' secondary='#FFFFFF' tertiary='#000000' quaternary='#6CC6BB'/>

.svgrrc file

{ "replaceAttrValues": { "#000": "{props.primary}", "#f01": "{props.secondary}", "#ff1": "{props.tertiary}", "#f00": "{props.quaternary}" } }

However, for another svg file and component that has only one color, like...

<svg width="40" height="100" viewBox="0 0 40 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 0L40 100H0L20 0Z" fill="#000"/> </svg>

<Triangle fill='green'/>

... it successfully changes the fill color to the one specified by the fill prop.

[Pauligrinder]

I have the same problem, except my SVG that doesn't work is similar to the one that works for you.

Anyway, I don't think that code should work, as you aren't replacing props.fill value in the .svgrrc at all. So it seems like the .svgrrc is being loaded from somewhere else.

[Pabluor]

@Pauligrinder
Managed to make it work, it was a cache issue. Just start the server with npx expo start r -c

[Pauligrinder]

Awesome, got it working now too.
I'm not using expo, so the corresponding command was npm start -- --reset-cache. I already tried to reset the cache, but I think I may have just written npm start --reset-cache without the extra --, which didn't actually pass the parameters...

[Pabluor]

Yeah, such a simple thing to do and yet spent hours to grasp it haha