The .svgrrc file, found at the root of the project. The version of it at the time of writing is

{
  "replaceAttrValues": {
    "black": "{props.fill}"
  }
}

Essentially, we are telling svg-react-native-transformer to replace the color "black" in a .svg file we import with the fill property of the React Component that corresponds to the .svg file. You need to have the line fill="black" in the path tag.

This means you must set fill to "black" for any .svg file for which you want to change colours programatically.

NOTE that if you do this, you must have a fill property for your corresponding React Component, or else fill defaults to none and the svg won't show up.

See this for further explanation.

Assume the .svg file below is saved as "logo.svg"

  <svg fill="black"> </svg>

Import your .svg file inside a React component:

import Logo from "./logo.svg";

You can then use your image as a component:

<Logo fill={"#ff0000"} />

and the fill property in the svg file is functionally replaced by #ff0000 when rendered. You can also set other properties like width, height, etc. You can also style it, as normal.