{"id":11802,"library":"react-native-svg","title":"React Native SVG","description":"React Native SVG is a comprehensive library that brings Scalable Vector Graphics (SVG) support to React Native applications across various platforms, including iOS, Android, macOS, and Windows, with a compatibility layer for the web. The current stable version is 15.15.4. The project maintains an active release cadence, frequently publishing patch and minor versions to address bugs, improve performance, and ensure compatibility with the latest React Native nightly builds and stable releases. A key differentiator is its extensive support for most SVG elements and properties, facilitating the rendering of complex vector graphics directly within native mobile applications. It also simplifies the process of integrating existing SVG assets by supporting conversion tools like SVGR. Furthermore, `react-native-svg` has adapted to React Native's evolving architecture, including early and ongoing support for the Fabric rendering system, though specific versions are required for compatibility.","status":"active","version":"15.15.4","language":"javascript","source_language":"en","source_url":"https://github.com/react-native-community/react-native-svg","tags":["javascript","react-component","react-native","ios","android","windows","SVG","ART","VML","typescript"],"install":[{"cmd":"npm install react-native-svg","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by all React Native components.","package":"react","optional":false},{"reason":"Core peer dependency for all React Native applications.","package":"react-native","optional":false}],"imports":[{"note":"Svg is a named export, not a default export.","wrong":"import Svg from 'react-native-svg'","symbol":"Svg","correct":"import { Svg } from 'react-native-svg'"},{"note":"All fundamental SVG elements (e.g., Circle, Path, Line, G) are named exports.","symbol":"Rect","correct":"import { Rect } from 'react-native-svg'"},{"note":"Used for rendering SVG directly from XML strings. Primarily used with ES modules in modern React Native projects.","wrong":"const { SvgXml } = require('react-native-svg')","symbol":"SvgXml","correct":"import { SvgXml } from 'react-native-svg'"}],"quickstart":{"code":"import React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Svg, Rect, Circle, Line, Text } from 'react-native-svg';\n\nconst MySVGComponent = () => {\n return (\n \n \n \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 MySVGComponent;","lang":"typescript","description":"This quickstart renders a basic SVG with a rectangle, circle, text, and line, demonstrating fundamental usage."},"warnings":[{"fix":"Upgrade your `react-native` version to 0.78.0 or higher, or use an older `react-native-svg` version compatible with your `react-native` version.","message":"Version 15.13.0 and newer drops support for React Native versions older than 0.78. Ensure your React Native project is updated.","severity":"breaking","affected_versions":">=15.13.0"},{"fix":"Consult the `react-native-svg` documentation for a compatibility matrix. For example, `v13.0.0` supports `RN 0.69.0+`, while `v13.10.0` supports `RN 0.72.0+`.","message":"Support for Fabric (React Native's new rendering system) has specific version requirements. Using incompatible versions can lead to build failures or runtime errors.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Upgrade to `react-native-svg@15.15.1` or newer, which contains a patch reverting the changes that caused the regression.","message":"A performance regression was introduced in `v15.15.0` related to shadow node propagation and `ForeignObject` rendering.","severity":"gotcha","affected_versions":"15.15.0"},{"fix":"Update to `react-native-svg@15.15.3` or a newer version to receive the fix.","message":"An iOS `RCTImage use-after-free` crash was present in some versions due to breaking changes in React Native.","severity":"gotcha","affected_versions":">=15.15.0 <15.15.3"},{"fix":"Upgrade to `react-native-svg@15.15.3` or newer, which replaces `buffer` decoding with `atob`.","message":"Older versions might encounter 'ReferenceError: Buffer is not defined' due to attempts to use Node.js `Buffer` for decoding, which is not available in React Native environments by default.","severity":"gotcha","affected_versions":"<15.15.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For iOS/macOS, navigate to the `ios` directory and run `pod install`, then rebuild your application. Ensure that you have followed the linking instructions for your specific React Native version and platform (e.g., `npx react-native-windows-init --overwrite` for Windows).","cause":"The native module for `react-native-svg` was not correctly linked or built into your React Native application.","error":"Invariant Violation: requireNativeComponent: \"RNSVG\" was not found in the UIManager."},{"fix":"Upgrade `react-native-svg` to version `15.15.3` or newer, which uses `atob` for decoding, resolving this issue.","cause":"An older version of `react-native-svg` attempted to use the Node.js `Buffer` API for base64 decoding in a React Native environment where it's not globally available.","error":"ReferenceError: Buffer is not defined"},{"fix":"Ensure you are on the latest `react-native-svg` version (`15.15.3` or newer fixes recent iOS issues). Clean your build folder (`Xcode -> Product -> Clean Build Folder`), reset Metro cache, and reinstall pods (`cd ios && rm -rf Pods && pod install`). For macOS, specifically check for patches in patch versions like `15.15.2`.","cause":"Platform-specific breaking changes in React Native or Xcode, or incorrect build configurations for `react-native-svg`.","error":"Build errors on iOS/macOS (e.g., 'RCTImage' use-after-free crash, 'UIImage' build issues)"}],"ecosystem":"npm"}