DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on • Edited on

2 1 2

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The fill="#EFF2F6" in the <path> element is hardcoded. If you pass a color 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 color property dynamic is to replace the hardcoded color value with currentColor. The currentColor value inherits the color 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>
Enter fullscreen mode Exit fullscreen mode

Usage in React Native:

<ThreeDots height="100%" color="#707070" />
Enter fullscreen mode Exit fullscreen mode

Now, the color 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 color as a prop.

Here’s an example:

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

const ThreeDots = ({ height = "100%", color = "#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={color}
    />
  </Svg>
);

export default ThreeDots;
Enter fullscreen mode Exit fullscreen mode

Usage:

<ThreeDots height="100%" color="#FF0000" />
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay