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

`

`

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...

`

`

<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