react-native-svg - Amazon Vega Docs

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

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

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

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

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;

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

Component	Description
`Svg`	HOC for other elements.
`Rect`	Creates a rectangle and variations of a rectangle shape.
`Circle`	Creates a circle.
`Ellipse`	Creates an ellipse. An ellipse is similar but different to a circle. An ellipse has an `x` and a `y` radius that differs from each other, but a circle has an equal `x` and `y` radius.
`Line`	An SVG basic shape that creates a line connecting two points.
`Path`	Defines a path.
`Text`	Defines text.
`TSpan`	Draws multiple lines of text in SVG. Instead of positioning each line of text absolutely, the element positions a line of text relatively to the previous line of text.
`G`	A container used to group other SVG elements.
`Image`	Includes a raster image in an SVG component.
`ClipPath`	Defines a clipping path.
`Use`	Reuses an SVG shape from elsewhere in the SVG document.
`Defs`	Embeds definitions that can be reused inside an SVG image.
`RadialGradient`	Defines a radial gradient. The element must be nested within a tag.
`LinearGradient`	Defines a linear gradient. The element must be nested within a or tag.
`Mask`	Specifies that any other graphics object or `G` element can be used as an alpha mask for compositing the current object into the background.

Touch events

Event
`disabled`
`onPress`
`onPressIn`
`onPressOut`
`onLongPress`
`delayPressIn`
`delayPressOut`
`delayLongPress`

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.

Component	Description
`Polygon`	Creates a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is “closed” (all the lines connect up).
`Polyline`	Creates any shape that consists of only straight lines.
`TextPath`	Places text along the shape of an element. To specify which block of text, include the text within an element that includes an `href` attribute with a reference to the element.
`Symbol`	Defines reusable symbols.
`Pattern`	Fills or strokes an object with a pattern of a pre-defined graphic object. The pattern can be replicated (“tiled”) at fixed intervals in `x` and `y` to cover the painted areas.
`Marker`	A symbol attached to one or more vertices of `path`, `line`, `polyline`, and `polygon` elements. Markers are used to make arrowheads or polymarkers.
`ForeignObject`	Includes elements in a non-SVG namespace that are rendered within a region of the SVG graphic, using other user agent processes.

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
~2.0.x+13.14.0	0.23 and earlier	`OS 1.1 (1401010009820)` and earlier	0.72
~3.0.x+15.11.1	0.24	`OS 1.2 (2101020054720)`	0.72, 0.83

Additional resources

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

​Installation

​Examples

​API reference

​Components

​Touch events

​Exceptions on Vega

​Supported versions

​Additional resources