How to Dynamically Apply Colors to SVGs in React Native

SVGs are a powerful way to display scalable, vector-based graphics in React Native applications. However, customizing attributes like fill can sometimes be tricky if the SVG code isn't properly set up. A common issue arises when the fill property is hardcoded in the SVG, preventing dynamic color changes.

This blog explains why this happens and provides solutions to make SVG colors customizable in React Native.

---

Installation and setup:

a) Install:

yarn add react-native-svg && yarn add react-native-svg-transformer --dev

b) In root directory create/update metro.config.js with:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

Now you can use svg files in react native.

---

Understanding the Problem

Consider this example of an SVG file:

<svg
  width="4"
  height="18"
  viewBox="0 0 4 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
    fill="#EFF2F6"
  />
</svg>

The fill="#EFF2F6" in the <path> element is hardcoded. If you pass a fill prop to the SVG component, it won’t override this value. This makes the graphic static and unresponsive to dynamic styles.

---

Solution 1: Use currentColor

The simplest way to make the fill property dynamic is to replace the hardcoded fill value with currentColor. The currentColor value inherits the color or fill property passed to the component.

Updated SVG:

<svg
  width="4"
  height="18"
  viewBox="0 0 4 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
    fill="currentColor"
  />
</svg>

Usage in React Native:

<ThreeDots height="100%" fill="#707070" />

Now, the fill property dynamically controls the color of the SVG.

---

Solution 2: Use React Native's react-native-svg

If you are using react-native-svg to handle SVGs, you can create a React component for the SVG (svg to react native tool) and pass the fill as a prop.

Here’s an example:

import Svg, { Path } from 'react-native-svg';

const ThreeDots = ({ height = "100%", fill = "#707070" }) => (
  <Svg width="4" height="18" viewBox="0 0 4 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <Path
      d="M1.9987 4.41667C0.986176 4.41667 0.165365 3.59586 0.165365 2.58333C0.165365 1.57081 0.986176 0.75 1.9987 0.75C3.01122 0.75 3.83203 1.57081 3.83203 2.58333C3.83203 3.59586 3.01122 4.41667 1.9987 4.41667Z"
      fill={fill}
    />
  </Svg>
);

export default ThreeDots;

Usage:

<ThreeDots height="100%" fill="#FF0000" />

The fill prop is now passed dynamically to the <Path> element.

---

Conclusion

By using currentColor, react-native-svg, or customizing SVG components, you can dynamically control the fill property in your React Native app. This allows for greater flexibility and ensures your designs are dynamic and responsive to user interaction or theme changes.