Using the Stroke CSS property on my SVG in a React Native App

Question

I have imported an svg using the react-native-svg-transformer into my react native app and svg is rendered fine. I would like to change the stroke & stroke width of this svg image.

This can be accomplished by doing the following in my.tsx file:

<Car stroke='black' strokeWidth=2></Car>

However, I have to specify the stroke and strokeWidth instead within my linked style.js files, however whenever I simply write:

Car: {
    stroke: 'black',
    strokeWidth: 2
}

I get the following error message:

Invariant Violation: "stroke" is not a valid style property

However, stroke and strokeWidth are valid css properties.

Answer 1

You should use curly braces for the value of strokeWidth .

Instead of:

<Car stroke='black' strokeWidth=2></Car>`  

try using:

<Car stroke={'black'} strokeWidth={2}></Car>