add toDataURL method for svg elements

Add toDataURL method for svg elements to get data64 data  of svg.(iOS)
Add example for this.

Example/examples/Svg.js

@@ -1,6 +1,8 @@
 import {
     StyleSheet,
-    View
+    View,
+    Image,
+    Text
 } from 'react-native';
 
 import React, {
@@ -149,6 +151,38 @@ class SvgLayout extends Component{
     }
 }
 
+class SvgNativeMethods extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            base64: null
+        };
+    }
+
+    alert = function () {
+        this.root.toDataURL(base64 => {
+            this.setState({
+                base64
+            });
+        });
+    };
+    render() {
+        return <View>
+            <Svg height="100" width="150" ref={ele => {this.root = ele;}}>
+                <G x="40" onPress={this.alert.bind(this)}>
+                    <Circle cx="32" cy="32" r="4.167" fill="blue"/>
+                    <Path d="M55.192 27.87l-5.825-1.092a17.98 17.98 0 0 0-1.392-3.37l3.37-4.928c.312-.456.248-1.142-.143-1.532l-4.155-4.156c-.39-.39-1.076-.454-1.532-.143l-4.928 3.37a18.023 18.023 0 0 0-3.473-1.42l-1.086-5.793c-.103-.543-.632-.983-1.185-.983h-5.877c-.553 0-1.082.44-1.185.983l-1.096 5.85a17.96 17.96 0 0 0-3.334 1.393l-4.866-3.33c-.456-.31-1.142-.247-1.532.144l-4.156 4.156c-.39.39-.454 1.076-.143 1.532l3.35 4.896a18.055 18.055 0 0 0-1.37 3.33L8.807 27.87c-.542.103-.982.632-.982 1.185v5.877c0 .553.44 1.082.982 1.185l5.82 1.09a18.013 18.013 0 0 0 1.4 3.4l-3.31 4.842c-.313.455-.25 1.14.142 1.53l4.155 4.157c.39.39 1.076.454 1.532.143l4.84-3.313c1.04.563 2.146 1.02 3.3 1.375l1.096 5.852c.103.542.632.982 1.185.982h5.877c.553 0 1.082-.44 1.185-.982l1.086-5.796c1.2-.354 2.354-.82 3.438-1.4l4.902 3.353c.456.313 1.142.25 1.532-.142l4.155-4.154c.39-.39.454-1.076.143-1.532l-3.335-4.874a18.016 18.016 0 0 0 1.424-3.44l5.82-1.09c.54-.104.98-.633.98-1.186v-5.877c0-.553-.44-1.082-.982-1.185zM32 42.085c-5.568 0-10.083-4.515-10.083-10.086 0-5.568 4.515-10.084 10.083-10.084 5.57 0 10.086 4.516 10.086 10.083 0 5.57-4.517 10.085-10.086 10.085z" fill="blue"/>
+                </G>
+            </Svg>
+            <Text>Tap the shapes to render the Image below based on the base64-data of the Svg</Text>
+            <Image
+                source={{url: `data:image/png;base64,${this.state.base64}`}}
+                style={{width:150, height: 100, borderWidth: 1, marginTop: 5}}
+            />
+        </View>;
+    }
+}
+
 const icon = <Svg
     height="20"
     width="20"
@@ -172,7 +206,13 @@ const icon = <Svg
     />
 </Svg>;
 
-const samples = [SvgExample, SvgOpacity, SvgViewbox, SvgLayout];
+const samples = [
+    SvgExample,
+    SvgOpacity,
+    SvgViewbox,
+    SvgLayout,
+    SvgNativeMethods
+];
 
 export {
     icon,

elements/Svg.js

@@ -1,7 +1,18 @@
-import React, {Component, PropTypes} from 'react';
+import React, {
-import {View, requireNativeComponent, StyleSheet} from 'react-native';
+    Component,
+    PropTypes
+} from 'react';
+import {
+    View,
+    requireNativeComponent,
+    StyleSheet,
+    UIManager,
+    findNodeHandle,
+    NativeModules
+} from 'react-native';
 import ViewBox from './ViewBox';
 import _ from 'lodash';
+const RNSVGSvgViewManager = NativeModules.RNSVGSvgViewManager;
 
 // Svg - Root node of all Svg elements
 let id = 0;
@@ -45,6 +56,10 @@ class Svg extends Component{
         this.root.setNativeProps(...args);
     };
 
+    toDataURL = (callback = _.noop) => {
+        RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback);
+    };
+
     render() {
         let {props} = this;
         let opacity = +props.opacity;

ios/Elements/RNSVGSvgView.h

@@ -20,15 +20,11 @@
  * define <ClipPath></ClipPath> content as clipPath template.
  */
 - (void)defineClipPath:(__kindof RNSVGNode *)clipPath clipPathRef:(NSString *)clipPathRef;
-
 - (RNSVGNode *)getDefinedClipPath:(NSString *)clipPathRef;
-
 - (void)defineTemplate:(__kindof RNSVGNode *)template templateRef:(NSString *)templateRef;
-
 - (RNSVGNode *)getDefinedTemplate:(NSString *)tempalteRef;
-
 - (void)defineBrushConverter:(RNSVGBrushConverter *)brushConverter brushConverterRef:(NSString *)brushConverterRef;
-
 - (RNSVGBrushConverter *)getDefinedBrushConverter:(NSString *)brushConverterRef;
+- (NSString *)getDataURL;
 
 @end

ios/Elements/RNSVGSvgView.m

@@ -16,6 +16,7 @@
     NSMutableDictionary<NSString *, RNSVGNode *> *clipPaths;
     NSMutableDictionary<NSString *, RNSVGNode *> *templates;
     NSMutableDictionary<NSString *, RNSVGBrushConverter *> *brushConverters;
+    CGRect _boundingBox;
 }
 
 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
@@ -47,6 +48,7 @@
     templates = nil;
     brushConverters = nil;
     CGContextRef context = UIGraphicsGetCurrentContext();
+    _boundingBox = rect;
     
     for (RNSVGNode *node in self.subviews) {
         if ([node isKindOfClass:[RNSVGNode class]]) {
@@ -63,10 +65,17 @@
             [node renderTo:context];
         }
     }
-//    CGImageRef image = CGBitmapContextCreateImage(context);
+}
-//    NSData *imageData = UIImagePNGRepresentation([[UIImage alloc] initWithCGImage:image]);
+
-//    NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+- (NSString *)getDataURL
-//    NSLog(base64);
+{
+    UIGraphicsBeginImageContextWithOptions(_boundingBox.size, NO, 0);
+    [self drawRect:_boundingBox];
+    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();
+    NSData *imageData = UIImagePNGRepresentation(image);
+    NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+    UIGraphicsEndImageContext();
+    return base64;
 }
 
 - (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor

ios/ViewManagers/RNSVGSvgViewManager.m

@@ -6,6 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#import "RCTBridge.h"
+#import "RCTUIManager.h"
 #import "RNSVGSvgViewManager.h"
 #import "RNSVGSvgView.h"
 
@@ -18,4 +20,18 @@ RCT_EXPORT_MODULE()
     return [RNSVGSvgView new];
 }
 
+
+RCT_EXPORT_METHOD(toDataURL:(nonnull NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback)
+{
+    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
+        UIView *view = viewRegistry[reactTag];
+        if (![view isKindOfClass:[RNSVGSvgView class]]) {
+            RCTLogError(@"Invalid svg returned frin registry, expecting RNSVGSvgView, got: %@", view);
+        } else {
+            RNSVGSvgView *svg = view;
+            callback(@[[svg getDataURL]]);
+        }
+    }];
+}
+
 @end