Updated reactxp-imagesvg to use an up-to-date version of react-native-svg (rather than the older react-native-art-svg). Bumped its version to 0.2.0.

extensions/imagesvg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactxp-imagesvg",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Plugin for ReactXP that provides support for SVG (scalable vector graphics) for all platforms",
   "author": "ReactXP Team <reactxp@microsoft.com>",
   "license": "MIT",
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "assert": "^1.3.0",
-    "react-native-art-svg": "1.1.0",
-    "reactxp": "^0.34.0"
+    "react-native-svg": "4.5.0",
+    "reactxp": "0.42.0-rc.3"
   },
   "peerDependencies": {
-    "react-dom": "^15.3.1",
-    "react-native": "^0.34.0"
+    "react-dom": "^15.4.1",
+    "react-native": "^0.42.0"
   },
   "devDependencies": {
     "typescript": "2.1.6",

extensions/imagesvg/src/common/Interfaces.ts

@@ -22,4 +22,3 @@ export interface PluginInterface {
     default: typeof ImageSvg;
     SvgPath: typeof SvgPath;
 }
-

extensions/imagesvg/src/common/Types.ts

@@ -8,7 +8,6 @@
 
 import { Types as RXTypes } from 'reactxp';
 
-
 export interface ImageSvgStyle extends RXTypes.ViewStyle {
 }
 export declare type ImageSvgStyleRuleSet = RXTypes.StyleRuleSet<ImageSvgStyle>;
@@ -24,6 +23,7 @@ export interface SvgCommonProps {
 
 export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps<ImageSvgStyleRuleSet> {
     children?: RXTypes.ReactNode;
+    style?: RXTypes.ViewStyleRuleSet|RXTypes.ViewStyleRuleSet[];
     height: number;
     width: number;
     accessibilityLabel?: string;
@@ -35,4 +35,3 @@ export interface ImageSvgProps extends SvgCommonProps, RXTypes.CommonStyledProps
 export interface SvgPathProps extends SvgCommonProps {
     d?: string;
 }
-

extensions/imagesvg/src/native-common/ImageSvg.tsx

@@ -9,7 +9,7 @@
 
 import assert = require('assert');
 import React = require('react');
-import ArtSvg = require('react-native-art-svg');
+import RNSvg = require('react-native-svg');
 
 import SvgInterfaces = require('../common/Interfaces');
 
@@ -20,16 +20,16 @@ export class ImageSvg extends SvgInterfaces.ImageSvg<{}> {
 
         if (this.props.width > 0 && this.props.height > 0) {
             return (
-                <ArtSvg.Svg
+                <RNSvg.Svg
                     width={ this.props.width.toString() }
                     height={ this.props.height.toString() }
                     style={ this.props.style }
                     opacity={ this.props.strokeOpacity }
                     preserveAspectRatio={ this.props.preserveAspectRatio }
-                    viewbox={ this.props.viewBox }
+                    viewBox={ this.props.viewBox }
                 >
                     { this.props.children }
-                </ArtSvg.Svg>
+                </RNSvg.Svg>
             );
         } else {
             return null;

extensions/imagesvg/src/native-common/SvgPath.tsx

@@ -8,14 +8,14 @@
 */
 
 import React = require('react');
-import ArtSvg = require('react-native-art-svg');
+import RNSvg = require('react-native-svg');
 
 import SvgInterfaces = require('../common/Interfaces');
 
 export class SvgPath extends SvgInterfaces.SvgPath<{}> {
     render() {
         return (
-            <ArtSvg.Path
+            <RNSvg.Path
                 key = { this.props.key }
                 d={ this.props.d }
                 fill={ this.props.fillColor || '#fff' }

extensions/imagesvg/src/typings/react-native-svg.d.ts

@@ -1,13 +1,13 @@
 /**
-* react-native-art-svg.d.ts
+* react-native-svg.d.ts
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT license.
 *
-* Type definition file for the React Native Art SVG.
-* https://github.com/magicismight/react-native-art-svg
+* Type definition file for the React Native SVG module.
+* https://github.com/react-native-community/react-native-svg
 */
 
-declare module 'react-native-art-svg' {
+declare module 'react-native-svg' {
 
     import React = require('react');
     import RN = require('react-native');
@@ -17,7 +17,7 @@ declare module 'react-native-art-svg' {
     interface SvgProps extends RN.ComponentPropsBase {
         height?: string,
         width?: string,
-        viewbox?: string,
+        viewBox?: string,
         opacity?: number,
         preserveAspectRatio?: string;
         style?: RN.StyleRuleSet;
@@ -63,7 +63,6 @@ declare module 'react-native-art-svg' {
         fontSize: number,
     }
 
-    // TODO add the rest of the element
     export class Svg extends React.Component<SvgProps, {}> { }
     export class Path extends React.Component<PathProps, {}> { }
     export class Rect extends React.Component<RectProps, {}> { }