Question 1

How to configure react-native-svg-transformer with Expo?

Accepted Answer

For Expo SDK v41.0.0 or newer, merge the provided metro.config.js code, which adjusts the transformer and resolver settings to handle SVG files as source extensions instead of assets. Ensure react-native-svg is installed first.

Question 2

react-native-svg-transformer vs using react-native-svg directly?

Accepted Answer

This transformer simplifies importing SVGs as components with web-like syntax, whereas react-native-svg alone requires manual SVG parsing or inline JSX. It's better for consistency with web projects, but adds build-time transformation overhead.

Question 3

How to change SVG fill color dynamically with this transformer?

Accepted Answer

Configure a .svgrrc file with replaceAttrValues to map hex codes to {props.fill}, then pass fill props in JSX. The README shows an example replacing #000 with {props.fill} for dynamic coloring.

Question 4

Does it work with React Native's new architecture (Fabric)?

Accepted Answer

Yes, as a Metro transformer, it should work with Fabric since Metro handles the build process. However, check compatibility with react-native-svg, which must support the new architecture for rendering.

Question 5

How to test components with SVG imports in Jest?

Accepted Answer

Create a mock file (e.g., svgMock.js) and update Jest config to map .svg imports to it, as detailed in the README's usage with Jest section, ensuring tests run without transformation errors.

Question 6

Can I use SVGR plugins or custom options with this transformer?

Accepted Answer

Yes, via .svgrrc configuration files, you can customize SVGR options like removing attributes or adding plugins, leveraging the underlying SVGR ecosystem for advanced transformations.

react-native-svg-transformer

What is react-native-svg-transformer?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions