react-native-svg

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

The @amazon-devices/react-native-svg library supports most SVG elements and properties like Rect, Circle, Line, Polyline, Polygon, and G. This library performs a simple conversion of SVG code to the react-native-svg component.

This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is deployed as an autolinking library, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it's built.

When you uplevel your app's version of React Native for Vega, consider the best practice of upleveling its library dependencies.

• 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 the npm install command.

Examples

This example 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;

This example 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

See the GitHub documentation page for react-native-svg for information about this library and the API reference.

The SVG library on Vega adds support for the following SVG components and touch events.

Components

Touch events

Exceptions on Vega

Unsupported APIs

The following components/props aren't currently supported on Vega.

• Markers
• TouchEvents
• Pattern and patternTransform

Unsupported components

The following SVG components aren't currently supported on Vega.

Supported versions

Additional resources

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

Last updated: Sep 30, 2025