{
"_args": [
[
{
"raw": "react-native-svg@https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"scope": null,
"escapedName": "react-native-svg",
"name": "react-native-svg",
"rawSpec": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"spec": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"type": "remote"
},
"/home/jdaugherty/work/GT2/GT2-Android/node_modules/expo"
]
],
"_from": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"_id": "react-native-svg@5.5.1",
"_inCache": true,
"_location": "/react-native-svg",
"_phantomChildren": {},
"_requested": {
"raw": "react-native-svg@https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"scope": null,
"escapedName": "react-native-svg",
"name": "react-native-svg",
"rawSpec": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"spec": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"type": "remote"
},
"_requiredBy": [
"/expo"
],
"_resolved": "https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"_shasum": "0c6e373dbe63cfcbdd465f5b2965ebe011c8962f",
"_shrinkwrap": null,
"_spec": "react-native-svg@https://github.com/expo/react-native-svg/archive/5.5.1-exp.1.tar.gz",
"_where": "/home/jdaugherty/work/GT2/GT2-Android/node_modules/expo",
"bugs": {
"url": "https://github.com/magicismight/react-native-svg/issues"
},
"dependencies": {
"color": "^2.0.1",
"lodash": "^4.16.6"
},
"description": "SVG library for react-native",
"devDependencies": {
"babel-eslint": "^6.1.2",
"eslint": "^2.13.1",
"eslint-plugin-react": "^4.3.0",
"react": "16.0.0-beta.5",
"react-native": "^0.49.0"
},
"homepage": "https://github.com/magicismight/react-native-svg#readme",
"keywords": [
"react-component",
"react-native",
"ios",
"android",
"SVG",
"ART",
"VML",
"gradient"
],
"license": "MIT",
"main": "./index.js",
"name": "react-native-svg",
"nativePackage": true,
"optionalDependencies": {},
"peerDependencies": {
"react-native": ">=0.50.0",
"react": "*",
"prop-types": "^15.5.8"
},
"readme": "## react-native-svg\n\n[](https://www.npmjs.com/package/react-native-svg)\n[](https://www.npmjs.com/package/react-native-svg)\n\n`react-native-svg` is built to provide a SVG interface to react native on both iOS and Android.\n\n[Check out the demo](https://getexponent.com/@rncommunity/react-native-svg-examples).\n\n## Features\n\n1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...).\n2. Easy to convert SVG code into ReactNative code.\n\n### Installation\n\n#### Automatic\n\n*With Expo, this is pre-installed. Jump ahead to [Usage](#Usage)*\n\n1. Install library from `npm`\n\n ```bash\n npm install react-native-svg --save\n ```\n \n # NOTICE:\n \n - react-native-svg >= 3.2.0 only supports react-native >= 0.29.0\n - react-native-svg >= 4.2.0 only supports react-native >= 0.32.0\n - react-native-svg >= 4.3.0 only supports react-native >= 0.33.0\n - react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0\n - react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0\n - react-native-svg >= 5.1.8 only supports react-native >= 0.44.0 and react == 16.0.0-alpha.6\n - react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12\n - react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12\n - react-native-svg >= 5.4.1 only supports react-native >= 0.47.0 and react == 16.0.0-alpha.12\n - react-native-svg >= 5.5.1 only supports react-native >= 0.50.0 and react == 16.0.0\n\n2. Link native code\n\n ```bash\n react-native link react-native-svg\n ```\n\n Or use `rnpm` instead:\n\n ```bash\n rnpm link react-native-svg\n ```\n \n#### Manual\n\n##### Android\n\n1. `npm install react-native-svg --save`\n\n2. Append the following lines to `android/settings.gradle`:\n\n\t```\n\tinclude ':react-native-svg'\n\tproject(':react-native-svg').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-svg/android')\n\t```\n \n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n\n\t```\n compile project(':react-native-svg')\n\t```\n\n4. Open up `android/app/src/main/java/[...]/MainApplication.java\n - Add `import com.horcrux.svg.SvgPackage;` to the imports at the top of the file\n - Add `new SvgPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.\n \n\n### Usage\n\nHere's a simple example. To render output like this:\n\n\n\nUse the following code:\n\n```javascript\nimport Svg,{\n Circle,\n Ellipse,\n G,\n LinearGradient,\n RadialGradient,\n Line,\n Path,\n Polygon,\n Polyline,\n Rect,\n Symbol,\n Text,\n Use,\n Defs,\n Stop\n} from 'react-native-svg';\n\nclass SvgExample extends Component {\n render() {\n return (\n \n \n \n \n );\n }\n}\n```\n\n[Try this on Snack](https://snack.expo.io/r1hCVAaEZ)\n\n### Common props:\n\nName | Default | Description\n----------------|------------|--------------\nfill | '#000' | The fill prop refers to the color inside the shape.\nfillOpacity | 1 | This prop specifies the opacity of the color or the content the current object is filled with.\nfillRule | nonzero | The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be `nonzero` or `evenodd` \nstroke | 'none' | The stroke prop controls how the outline of a shape appears.\nstrokeWidth | 1 | The strokeWidth prop specifies the width of the outline on the current object.\nstrokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the current object.\nstrokeLinecap | 'square' | The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either `'butt'`, `'square'` or `'round'`.\nstrokeLinejoin | 'miter' | The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either `'miter'`, `'bevel'` or `'round'`.\nstrokeDasharray | [] | The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths.\nstrokeDashoffset| null | The strokeDashoffset prop specifies the distance into the dash pattern to start the dash.\nx | 0 | Translate distance on x-axis.\ny | 0 | Translate distance on y-axis.\nrotate | 0 | Rotation degree value on the current object.\nscale | 1 | Scale value on the current object.\norigin | 0, 0 | Transform origin coordinates for the current object.\noriginX | 0 | Transform originX coordinates for the current object.\noriginY | 0 | Transform originY coordinates for the current object.\n\n\n### Supported elements:\n\n#### Svg\n\n```html\n\n \n \n \n \n \n\n```\n\n### Rect\n\nThe element is used to create a rectangle and variations of a rectangle shape:\n\n\n```html\n\n \n\n```\n\n\n\n Code explanation:\n\n * The width and height props of the element define the height and the width of the rectangle.\n * The x prop defines the left position of the rectangle (e.g. x=\"25\" places the rectangle 25 px from the left margin).\n * The y prop defines the top position of the rectangle (e.g. y=\"5\" places the rectangle 5 px from the top margin).\n\n##### Circle\n\nThe element is used to create a circle:\n\n```html\n\n \n\n```\n\n\n\n Code explanation:\n\n * The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)\n * The r prop defines the radius of the circle\n\n#### Ellipse\n\nThe element is used to create an ellipse.\n\nAn 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.\n\n```html\n\n \n\n```\n\n\nCode explanation:\n\n* The cx prop defines the x coordinate of the center of the ellipse\n* The cy prop defines the y coordinate of the center of the ellipse\n* The rx prop defines the horizontal radius\n* The ry prop defines the vertical radius\n\n#### Line\n\nThe element is an SVG basic shape, used to create a line connecting two points.\n\n```html\n\n \n\n```\n\n\n\nCode explanation:\n\n* The x1 prop defines the start of the line on the x-axis.\n* The y1 prop defines the start of the line on the y-axis.\n* The x2 prop defines the end of the line on the x-axis.\n* The y2 prop defines the end of the line on the y-axis.\n\n#### Polygon\n\nThe 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).\n\n```html\n\n \n\n```\n\n\n\nCode explanation:\n\n* The points prop defines the x and y coordinates for each corner of the polygon\n\n#### Polyline\n\nThe element is used to create any shape that consists of only straight lines:\n\n```html\n\n \n\n```\n\n\n\nCode explanation:\n\n* The points prop defines the x and y coordinates for each point of the polyline\n\n#### Path\n\nThe element is used to define a path.\n\nThe following commands are available for path data:\n\n * M = moveto\n * L = lineto\n * H = horizontal lineto\n * V = vertical lineto\n * C = curveto\n * S = smooth curveto\n * Q = quadratic Bézier curve\n * T = smooth quadratic Bézier curveto\n * A = elliptical Arc\n * Z = closepath\n\n`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.\n\n```html\n\n \n\n```\n\n\n\n\n#### Text\n\nThe element is used to define text.\n\n```html\n\n STROKED TEXT\n\n```\n\n\n\n#### TSpan\n\nThe 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.\n\n```html\n\n \n tspan line 1\n tspan line 2\n tspan line 3\n \n \n 12345\n \n 6\n 7\n \n 89a\n \n delta on text\n\n```\n\n\n\n#### TextPath\n\nIn 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.\n\n```html\n\n \n \n \n \n \n \n We go up and down,\n then up again\n \n \n \n \n\n```\n\n\n\n#### G\n\nThe element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [<Use />](#use) element.\n\n```html\n\n \n \n\n \n\n \n Text grouped with shapes\n \n\n```\n\n\n#### Use\n\nThe