dev-resources.site

for different kinds of informations.

How to Dynamically Apply Colors to SVGs in React Native

Published at

1/9/2025

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 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>

Usage in React Native:

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

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;

Usage:

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

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.

themes Article's

30 articles in total

How to Choose the Right Shopify Theme for Your Business Needs