Registry / web-framework / react-native-svg

react-native-svg

library15.15.4jsnpmunverified

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.

web-framework serialization

npm install react-native-svg

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-SVG

react-native-svg

web-frameworkjavascriptv15.15.4

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

✓ import { Svg } from 'react-native-svg'

✗ import Svg from 'react-native-svg'

Svg is a named export, not a default export.

Rect

✓ import { Rect } from 'react-native-svg'

All fundamental SVG elements (e.g., Circle, Path, Line, G) are named exports.

SvgXml

✓ import { SvgXml } from 'react-native-svg'

✗ const { SvgXml } = require('react-native-svg')

Used for rendering SVG directly from XML strings. Primarily used with ES modules in modern React Native projects.

This quickstart renders a basic SVG with a rectangle, circle, text, and line, demonstrating fundamental usage.

import React from 'react'; import { View, StyleSheet } from 'react-native'; import { Svg, Rect, Circle, Line, Text } from 'react-native-svg'; const MySVGComponent = () => { return ( <View style={styles.container}> <Svg height="200" width="200" viewBox="0 0 100 100"> {/* Simple Red Rectangle */} <Rect x="10" y="10" width="80" height="30" stroke="red" strokeWidth="2" fill="rgba(255,0,0,0.5)" /> {/* Blue Circle */} <Circle cx="50" cy="70" r="25" fill="blue" stroke="none" /> {/* Text */} <Text x="50" y="50" textAnchor="middle" fill="white" fontSize="10" > Hello SVG! </Text> {/* Line */} <Line x1="0" y1="0" x2="100" y2="100" stroke="purple" strokeWidth="1" /> </Svg> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); export default MySVGComponent;

Debug

Known issues

breakingVersion 15.13.0 and newer drops support for React Native versions older than 0.78. Ensure your React Native project is updated.

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.

affects: >=15.13.0

breakingSupport for Fabric (React Native's new rendering system) has specific version requirements. Using incompatible versions can lead to build failures or runtime errors.

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+`.

affects: >=13.0.0

gotchaA performance regression was introduced in `v15.15.0` related to shadow node propagation and `ForeignObject` rendering.

fix

Upgrade to `react-native-svg@15.15.1` or newer, which contains a patch reverting the changes that caused the regression.

affects: 15.15.0

gotchaAn iOS `RCTImage use-after-free` crash was present in some versions due to breaking changes in React Native.

fix

Update to `react-native-svg@15.15.3` or a newer version to receive the fix.

affects: >=15.15.0 <15.15.3

gotchaOlder 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.

fix

Upgrade to `react-native-svg@15.15.3` or newer, which replaces `buffer` decoding with `atob`.

affects: <15.15.3

Errors

Common errors & fixes

Invariant Violation: requireNativeComponent: "RNSVG<ComponentName>" was not found in the UIManager.

The native module for `react-native-svg` was not correctly linked or built into your React Native application.

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).

ReferenceError: Buffer is not defined

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.

fix

Upgrade `react-native-svg` to version `15.15.3` or newer, which uses `atob` for decoding, resolving this issue.

Build errors on iOS/macOS (e.g., 'RCTImage' use-after-free crash, 'UIImage' build issues)

Platform-specific breaking changes in React Native or Xcode, or incorrect build configurations for `react-native-svg`.

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`.

Upgrade

Version history

15.15.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by all React Native components.

react-nativerequiredCore peer dependency for all React Native applications.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/software-mansion/react-native-svg ↗

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