Registry / web-framework / react-native-svg-transformer

react-native-svg-transformer

library1.5.3jsnpmunverified

React Native SVG Transformer enables developers to import SVG files directly into their React Native projects, treating them as React components. This mimics the development experience of web applications using libraries like SVGR, facilitating code sharing between web and mobile platforms. The package is currently at version 1.5.3 and demonstrates an active release cadence, frequently updating to support new versions of React Native and Expo SDK, as indicated by multiple releases within recent months addressing compatibility issues. It's a crucial tool for projects aiming for scalable vector graphics that can be dynamically styled and manipulated, differentiating itself by seamlessly integrating SVG assets into the Metro bundler workflow for both bare React Native and Expo projects.

web-framework

npm install react-native-svg-transformer

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-SVG-T

react-native-svg-transformer

web-frameworkjavascriptv1.5.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SVG as Component

✓ import Logo from "./assets/logo.svg"; // ... <Logo width={100} height={100} fill="blue" />

✗ import Logo from "./assets/logo.svg?url"; // Common mistake in some bundlers import { SvgXml } from 'react-native-svg'; // For XML strings, not direct file import

After configuring Metro, .svg files are imported directly as React components, accepting `react-native-svg` props.

Metro Config Path (Bare React Native)

✓ babelTransformerPath: require.resolve("react-native-svg-transformer/react-native")

✗ babelTransformerPath: require.resolve("react-native-svg-transformer")

Use this specific path for `babelTransformerPath` in `metro.config.js` for bare React Native projects (v0.59+).

Metro Config Path (Expo)

✓ babelTransformerPath: require.resolve("react-native-svg-transformer/expo")

✗ babelTransformerPath: require.resolve("react-native-svg-transformer/react-native")

Use this specific path for `babelTransformerPath` in `metro.config.js` for Expo projects (SDK v41.0.0+).

Demonstrates how to install `react-native-svg-transformer` and `react-native-svg`, configure Metro for a bare React Native project, and then import and render an SVG file as a React component.

npm install --save-dev react-native-svg-transformer npm install react-native-svg cd ios && pod install # For iOS projects // metro.config.js (for React Native v0.72.1 or newer) const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config"); const defaultConfig = getDefaultConfig(__dirname); const { assetExts, sourceExts } = defaultConfig.resolver; const config = { transformer: { babelTransformerPath: require.resolve( "react-native-svg-transformer/react-native" ) }, resolver: { assetExts: assetExts.filter((ext) => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; module.exports = mergeConfig(defaultConfig, config); // App.js or any component file import React from 'react'; import { View, StyleSheet } from 'react-native'; import Logo from './assets/logo.svg'; // Assuming logo.svg is in an assets folder const App = () => { return ( <View style={styles.container}> <Logo width={200} height={200} fill="#FF6347" /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); export default App;

Debug

Known issues

breakingVersion 1.0.0 introduced breaking changes, dropping support for `react-native` versions older than 0.59 and `react-native-svg` versions older than 12. Projects on older versions must upgrade their React Native and `react-native-svg` dependencies before updating to `react-native-svg-transformer` v1.0.0 or newer.

fix

Upgrade `react-native` to `0.59.0` or newer and `react-native-svg` to `12.0.0` or newer before updating `react-native-svg-transformer`.

affects: >=1.0.0

gotchaMetro configuration is highly sensitive to the project type (bare React Native vs. Expo) and the React Native/Expo SDK version. Incorrectly configured `metro.config.js` is the most common cause of issues.

fix

Carefully follow the installation instructions in the README for your specific project setup. Ensure you use `react-native-svg-transformer/react-native` for bare React Native and `react-native-svg-transformer/expo` for Expo, matching the relevant `getDefaultConfig` import style.

affects: >=0.1.0

gotchaSVG files with non-globally unique IDs can lead to rendering artifacts when multiple SVGs are inlined as React components, as their internal IDs may conflict. This is common when porting SVGs from web contexts where `<img>` tags prevent ID 'leakage'.

fix

Utilize SVGR's configuration (via a `.svgrrc` file) to generate unique ID prefixes. The `@svgr/plugin-svgo` dependency can be configured for this. For example, add `"svgoConfig": { "plugins": [{ "name": "prefixIds" }] }` to your `.svgrrc` to ensure unique IDs.

affects: >=0.1.0

gotchaTypeScript projects require a declaration file (`declarations.d.ts` or similar) to properly type SVG imports, otherwise, TypeScript will report errors for unknown module types.

fix

Create a `declarations.d.ts` file in your project root with content like: `declare module "*.svg" { import React from "react"; import { SvgProps } from "react-native-svg"; const content: React.FC<SvgProps>; export default content; }`

affects: >=0.1.0

Errors

Common errors & fixes

Unable to resolve module `./path/to/icon.svg`

Metro bundler is not configured to recognize '.svg' files as source extensions or to use the SVG transformer.

fix

Ensure `metro.config.js` is correctly configured: `assetExts` should filter out 'svg', and `sourceExts` should include 'svg'. Restart Metro with `npm start -- --reset-cache` or `yarn start --reset-cache`.

Invariant Violation: requireNativeComponent: `RNSVG...` was not found in the UIManager.

`react-native-svg` native modules are not correctly linked, especially common on iOS or Android after installation or upgrades.

fix

For iOS, navigate to your `ios` directory and run `pod install`. For Android, ensure a clean build by running `cd android && ./gradlew clean` and then rebuilding your app. Ensure `react-native-svg` is properly installed and linked according to its documentation.

TypeError: transformer.transform is not a function

The `babelTransformerPath` in `metro.config.js` is pointing to an incorrect or non-existent transformer module, or there's a version mismatch between packages.

fix

Verify that `babelTransformerPath` is set correctly to either `require.resolve("react-native-svg-transformer/react-native")` or `require.resolve("react-native-svg-transformer/expo")` based on your project type and that `react-native-svg-transformer` is installed. Check for conflicts if multiple transformers are used.

Error: While trying to resolve module `metro/src/reactNativeTransformer` from file `/node_modules/react-native-svg-transformer/index.js`, the package `metro` is not found.

This error often occurs in older configurations or when `react-native-svg-transformer`'s internal dependency on `metro`'s transformer path is not met, typically in Expo projects when using the bare React Native transformer path.

fix

For Expo projects, ensure your `metro.config.js` uses `require.resolve("react-native-svg-transformer/expo")`. If the issue persists, review Expo SDK and `react-native-svg-transformer` compatibility.

Upgrade

Version history

1.5.3latest on npm

Audit

Dependencies

react-nativerequiredRequired for React Native project environments.

react-native-svgrequiredProvides the underlying components for rendering SVG elements in React Native.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/kristerkari/react-native-svg-transformer ↗

packagehttps://www.npmjs.com/package/react-native-svg-transformer ↗