SVG library for react-native
npm install @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.
Check out our dedicated documentation page for info about this library, API reference and more USAGE.md.
1. Add the JavaScript library dependency in the package.json file:
``json`
"dependencies": {
...
"@amazon-devices/react-native-svg": "^2.0.0"
}
2. Reinstall dependencies using npm install command.
Rendering Circle component example.
`js
import { Circle, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';
const CircleExample = () => {
return (
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
});
export default App;
`
Rendering star using Polygon component example.
`js
import { G, Polygon, Svg } from '@amazon-devices/react-native-svg';
import React from 'react';
import { StyleSheet, View } from 'react-native';
const StarExample = () => {
return (
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
});
export default App;
`
SVG library on Kepler adds support for the SVG components and touch events listed, as listed below.
| 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 or
| event | platform support |
| -------------- | ---------------- |
| disabled | All |
| onPress | All |
| onPressIn | All |
| onPressOut | All |
| onLongPress | All |
| delayPressIn | All |
| delayPressOut | All |
| delayLongPress | All |
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
| version | @amazon-devices/react-native-kepler version |
| -------- | --------------------------------- |
| 13.14.0+ | 2.0.x+13.14.0 |