{"id":11801,"library":"react-native-svg-transformer","title":"React Native SVG Transformer","description":"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.","status":"active","version":"1.5.3","language":"javascript","source_language":"en","source_url":"https://github.com/kristerkari/react-native-svg-transformer","tags":["javascript"],"install":[{"cmd":"npm install react-native-svg-transformer","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-svg-transformer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-svg-transformer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React Native project environments.","package":"react-native","optional":false},{"reason":"Provides the underlying components for rendering SVG elements in React Native.","package":"react-native-svg","optional":false}],"imports":[{"note":"After configuring Metro, .svg files are imported directly as React components, accepting `react-native-svg` props.","wrong":"import Logo from \"./assets/logo.svg?url\"; // Common mistake in some bundlers\nimport { SvgXml } from 'react-native-svg'; // For XML strings, not direct file import","symbol":"SVG as Component","correct":"import Logo from \"./assets/logo.svg\";\n// ...\n<Logo width={100} height={100} fill=\"blue\" />"},{"note":"Use this specific path for `babelTransformerPath` in `metro.config.js` for bare React Native projects (v0.59+).","wrong":"babelTransformerPath: require.resolve(\"react-native-svg-transformer\")","symbol":"Metro Config Path (Bare React Native)","correct":"babelTransformerPath: require.resolve(\"react-native-svg-transformer/react-native\")"},{"note":"Use this specific path for `babelTransformerPath` in `metro.config.js` for Expo projects (SDK v41.0.0+).","wrong":"babelTransformerPath: require.resolve(\"react-native-svg-transformer/react-native\")","symbol":"Metro Config Path (Expo)","correct":"babelTransformerPath: require.resolve(\"react-native-svg-transformer/expo\")"}],"quickstart":{"code":"npm install --save-dev react-native-svg-transformer\nnpm install react-native-svg\ncd ios && pod install # For iOS projects\n\n// metro.config.js (for React Native v0.72.1 or newer)\nconst { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n\nconst defaultConfig = getDefaultConfig(__dirname);\nconst { assetExts, sourceExts } = defaultConfig.resolver;\n\nconst config = {\n  transformer: {\n    babelTransformerPath: require.resolve(\n      \"react-native-svg-transformer/react-native\"\n    )\n  },\n  resolver: {\n    assetExts: assetExts.filter((ext) => ext !== \"svg\"),\n    sourceExts: [...sourceExts, \"svg\"]\n  }\n};\n\nmodule.exports = mergeConfig(defaultConfig, config);\n\n// App.js or any component file\nimport React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport Logo from './assets/logo.svg'; // Assuming logo.svg is in an assets folder\n\nconst App = () => {\n  return (\n    <View style={styles.container}>\n      <Logo width={200} height={200} fill=\"#FF6347\" />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n});\n\nexport default App;\n","lang":"javascript","description":"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."},"warnings":[{"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`.","message":"Version 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"Metro 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"SVG 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'.","severity":"gotcha","affected_versions":">=0.1.0"},{"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; }`","message":"TypeScript projects require a declaration file (`declarations.d.ts` or similar) to properly type SVG imports, otherwise, TypeScript will report errors for unknown module types.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"Metro bundler is not configured to recognize '.svg' files as source extensions or to use the SVG transformer.","error":"Unable to resolve module `./path/to/icon.svg`"},{"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.","cause":"`react-native-svg` native modules are not correctly linked, especially common on iOS or Android after installation or upgrades.","error":"Invariant Violation: requireNativeComponent: `RNSVG...` was not found in the UIManager."},{"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.","cause":"The `babelTransformerPath` in `metro.config.js` is pointing to an incorrect or non-existent transformer module, or there's a version mismatch between packages.","error":"TypeError: transformer.transform is not a function"},{"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.","cause":"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.","error":"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."}],"ecosystem":"npm"}