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

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

"dependencies": {
    ...
    "@amazon-devices/react-native-svg": "~2.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;

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

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 closely related to a circle. The difference is that an ellipse has an `x` and a `y` radius that differs from each other, while 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`

Known issues and limitations

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

Package name	Amazon NPM library version	Vega OS build number	Vega SDK version	Release notes
`@amazon-devices/react-native-svg`	2.1.0+13.14.0	`OS 1.1 (201010438050)`	0.20

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

​Installation

​Examples

​API reference

​Components

​Touch events

​Known issues and limitations

​Supported versions

​Related topics