dev-resources.site
for different kinds of informations.
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 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.
Featured ones: