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
• Supported versions
• Related topics

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 more 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

Supported versions

Related topics

Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025