React Native SVG

Common errors

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

  cause 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

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

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

Warnings

• breaking Version 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.
• breaking Support 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+`.
• gotcha A 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.
• gotcha An 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.
• gotcha 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.
  Fix: Upgrade to `react-native-svg@15.15.3` or newer, which replaces `buffer` decoding with `atob`.

Install

• npm install react-native-svg npm
• yarn add react-native-svg yarn
• pnpm add react-native-svg pnpm

Imports

• Svg
  wrong:

  import Svg from 'react-native-svg'

  correct:

  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
  wrong:

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

  correct:

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

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

Quickstart

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;