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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay