react-native-svg

@amazon-devices/react-native-svg provides SVG support to React Native on Vega and a compatibility layer for the web.

@amazon-devices/react-native-svg supports most SVG elements and properties, such as Rect, Circle, Line, Polyline, Polygon, and G. This library allows simple conversion of SVG code to react-native-svg component.

This is a system-deployed library and is available to React Native for Vega apps without a separate installation process. It is deployed as an autolinking library which your app links to at runtime. Compatibility is guaranteed only between the library and the version of React Native for Vega for which it is built.

When you upgrade the version of React Native for Vega upon which your app is built, it is best practice to also upgrade the versions of the libraries that depend on React Native for Vega.

• Installation
• Examples
• API reference
  • Components
  • Touch events
  • Exceptions on Vega
• Supported versions
• Additional resources

Installation

1. Add the JavaScript library dependency in the package.json file.

   Copy code Copied to clipboard.

    "dependencies": {
        ...
        "@amazon-devices/react-native-svg": "~2.0.0"
   }
   

2. Reinstall dependencies using npm install command.

Examples

The example below demonstrates how to render a Circle component.

import { Circle, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';

const CircleExample = () => {
  return (
    <Svg height="100" width="100">
      <Circle cx="50%" cy="50%" r="40%" fill="pink" />
    </Svg>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <CircleExample />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
});

export default App;

The example below demonstrates how to render a Polygon component.

import { G, Polygon, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';

const StarExample = () => {
  return (
    <Svg height="105" width="105">
      <G scale="0.5">
        <Polygon
          points="100,10 40,198 190,78 10,78 160,198"
          fill="lime"
          stroke="purple"
          strokeWidth="5"
        />
      </G>
    </Svg>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <StarExample />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
});

export default App;

API reference

Check out dedicated documentation page for info about this library, API reference and more on GitHub.

The SVG library on Vega adds support for the SVG components and touch events listed, as listed below.

Components

Touch events

Exceptions on Vega

Unsupported APIs

The APIs listed below are not supported on Vega at this time.

• The following SVG components are not functional:
  • Markers
  • TouchEvents
  • Pattern and patternTransform are not yet supported

Unsupported components

The SVG components listed in the table below are not supported on Vega at this time.

Supported versions

Additional resources

For information on additonal libraries, see Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025