@amazon-devices/react-native-svg

@amazon-devices/react-native-svg provides SVG support to React Native on iOS, Android, macOS, Windows, Kepler and a compatibility layer for the web.

It has support for most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...). This library allows simple conversion of SVG code to react-native-svg component.

This is a system-deployed library and is available to KeplerScript 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 KeplerScript for which it is built.

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

Documentation

Check out our dedicated documentation page for info about this library, API reference and more USAGE.md.

Installation

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

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

2. Reinstall dependencies using npm install command.

Examples

Rendering Circle component example.

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;

Rendering star using Polygon component example.

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 supported on Kepler

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

Components

| component | description | platform support | | ------- | -------------------- | -------------------- | | Svg | HOC for other elements | All | | Rect | The element is used to create a rectangle and variations of a rectangle shape | All | | Circle | The element is used to create a circle | All | | Ellipse | The element is used to create 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 equal x and y radius | All | | Line | The element is an SVG basic shape, used to create a line connecting two points | All | | Polygon | The element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up) | iOS and Android | | Polyline | The element is used to create any shape that consists of only straight lines | iOS and Android | | Path | The element is used to define a path | All | | Text | The element is used to define text | All | | TSpan | The element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the element makes it possible to position a line of text relatively to the previous line of text | All | | TextPath | In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a element. To specify that a block of text is to be rendered along the shape of a , include the given text within a element which includes an href attribute with a reference to a element | iOS and Android | | G | The element is a container used to group other SVG elements | All | | Use | The element can reuse an SVG shape from elsewhere in the SVG document | All | | Symbol | The SVG element is used to define reusable symbols | iOS and Android | | Defs | The element is used to embed definitions that can be reused inside an SVG image | All | | Image | The element allows a raster image to be included in an Svg component | All | | ClipPath | The SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property | All | | LinearGradient | The element is used to define a linear gradient. The element must be nested within a <Defs> or <Svg> tag | All | | RadialGradient | The element is used to define a radial gradient. The element must be nested within a <Defs> or <Svg> tag | All | | Mask | In SVG, you can specify that any other graphics object or G element can be used as an alpha mask for compositing the current object into the background | All | | Pattern | A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted | iOS and Android | | Marker | A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers | iOS and Android | | ForeignObject | Allows for inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes | iOS and Android |

Touch events

| event | platform support | | -------------- | ---------------- | | disabled | All | | onPress | All | | onPressIn | All | | onPressOut | All | | onLongPress | All | | delayPressIn | All | | delayPressOut | All | | delayLongPress | All |

Exceptions on Kepler

SVG library on Kepler has a few exceptions in terms of API Support.

1. The following SVG Components do not work:

• Markers
• TouchEvents

2. Pattern and patternTransform are not yet supported

Supported react-native-kepler versions

| version | @amazon-devices/react-native-kepler version | | -------- | --------------------------------- | | 13.14.0+ | 2.0.x+13.14.0 |