Basic addImage behind drawing canvas for react-native-sketch-canvas

react-native-sketch-canvas+0.3.1.patch

patch-package
--- a/node_modules/@terrylinla/react-native-sketch-canvas/index.js
+++ b/node_modules/@terrylinla/react-native-sketch-canvas/index.js
@@ -8,6 +8,7 @@ import ReactNative, {
   ViewPropTypes,
 } from 'react-native'
 import SketchCanvas from './src/SketchCanvas'
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource"
 
 export default class extends React.Component {
   static propTypes = {
@@ -121,6 +122,14 @@ export default class extends React.Component {
     this._sketchCanvas.addPath(data)
   }
 
+  addImage(source) {
+      const thisSource = resolveAssetSource(source) || {
+          uri: undefined,
+          width: undefined,
+          height: undefined
+      }
+      this._sketchCanvas.addImage(thisSource)
+  }
   deletePath(id) {
     this._sketchCanvas.deletePath(id)
   }
--- a/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.h
+++ b/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.h
@@ -16,5 +16,6 @@
 - (void)clear;
 - (void)saveImageOfType: (NSString*) type withTransparentBackground: (BOOL) transparent;
 - (NSString*) transferToBase64OfType: (NSString*) type withTransparentBackground: (BOOL) transparent;
+-(void)addImage:(UIImage *) image;
 
 @end
--- a/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m
+++ b/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvas.m
@@ -5,6 +5,7 @@
 #import <React/RCTEventDispatcher.h>
 #import <React/RCTView.h>
 #import <React/UIView+React.h>
+#import <React/RCTImageSource.h>
 
 @implementation RNSketchCanvas
 {
@@ -14,6 +15,7 @@ @implementation RNSketchCanvas
     NSArray *_currentPoints;
     
     CAShapeLayer* _layer;
+    CALayer* _imageLayer;
     RNSketchCanvasDelegate *delegate;
 }
 
@@ -37,10 +39,18 @@ -(void)layoutSubviews {
         _layer.frame = bounds;
         _layer.delegate = delegate;
         _layer.contentsScale = [UIScreen mainScreen].scale;
-
+        _imageLayer = [CALayer layer];
+        _imageLayer.frame = _layer.frame;
+        _imageLayer.contentsScale = _layer.contentsScale;
+        [self.layer addSublayer: _imageLayer];
         [self.layer addSublayer: _layer];
     }
 }
+-(void)addImage:(UIImage *) image {
+    RCTExecuteOnMainQueue(^{
+        _imageLayer.contents = (id)image.CGImage;
+    });
+}
 
 - (void)newPath:(int) pathId strokeColor:(UIColor*) strokeColor strokeWidth:(int) strokeWidth {
     if (_currentPath) {
@@ -133,7 +143,7 @@ - (NSString*) transferToBase64OfType: (NSString*) type withTransparentBackground
         CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f);
         CGContextFillRect(context, CGRectMake(0, 0, rect.size.width, rect.size.height));
     }
-    [_layer renderInContext:context];
+    [self.layer renderInContext:context];
     UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
     UIGraphicsEndImageContext();
     if ([type isEqualToString: @"jpg"]) {
--- a/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvasManager.m
+++ b/node_modules/@terrylinla/react-native-sketch-canvas/ios/RNSketchCanvas/RNSketchCanvas/RNSketchCanvasManager.m
@@ -3,6 +3,8 @@
 #import <React/RCTEventDispatcher.h>
 #import <React/RCTView.h>
 #import <React/UIView+React.h>
+#import <React/RCTImageSource.h>
+#import <React/RCTImageLoader.h>
 
 @implementation RNSketchCanvasManager
 
@@ -85,4 +87,18 @@ - (UIView *)view
     callback(@[[NSNull null], [self.sketchCanvasView transferToBase64OfType: type withTransparentBackground: transparent]]);
 }
 
+RCT_EXPORT_METHOD(addImage: (RCTImageSource *) imageSource)
+{    
+    RCTImageLoaderCompletionBlock completionHandler = ^(NSError *error, UIImage *loadedImage) {
+        [self.sketchCanvasView addImage:loadedImage];
+    };
+    [self.bridge.imageLoader loadImageWithURLRequest:imageSource.request
+                                            size:imageSource.size
+                                           scale:imageSource.scale
+                                         clipped:NO
+                                      resizeMode:RCTResizeModeRepeat
+                                   progressBlock:nil
+                                partialLoadBlock:nil
+                                 completionBlock:completionHandler];
+}
 @end
--- a/node_modules/@terrylinla/react-native-sketch-canvas/src/SketchCanvas.js
+++ b/node_modules/@terrylinla/react-native-sketch-canvas/src/SketchCanvas.js
@@ -130,6 +130,9 @@ class SketchCanvas extends React.Component {
       NativeModules.SketchCanvasModule.transferToBase64(this._handle, imageType, transparent, callback)
     }
   }
+  addImage(source) {
+      SketchCanvasManager.addImage(source)
+  }
 
   componentWillMount() {
     this.panResponder = PanResponder.create({