Initial Image and/or Custom Image Data Prop

README.md

@@ -67,6 +67,7 @@ Here are the `props` of the the component:
 | ---- | ---- | ------------- | ---- |
 | `fillColor` | `String` | `null` | The color of the sketch background. Default to null to keep it transparent! *Note: This is different from the `style.backgroundColor` property, as the former will be seen in your exported drawing image, whereas the latter is only used to style the view.* |
 | `imageType` | `String` | `png` | The type of image to export. Can be `png` or `jpg`. Default to `png` to get transparency out of the box. |
+| `imageData` | `String` | `null` | PNG/JPEG image intepretation encoded with base64 to render on the drawing canvas. |
 | `onChange` | `Function` | `() => {}` | Callback function triggered after every change on the drawing. The function takes one argument: the actual base64 representation of your drawing.|
 | `onClear` | `Function` | `() => {}` | Callback function triggered after a `clear` has been triggered. |
 | `strokeColor` | `String` | `'#000000'` | The stroke color you want to draw with. |
@@ -80,6 +81,12 @@ The component also has some instance methods:
 | `clear()` | `Promise` | Clear the drawing. This method is a Promise mostly to be consistent with `save()`, but you could simply type: `this.sketch.clear();` |
 | `save()` | `Promise` | Save the drawing to an image, using the defined props as settings (`imageType`, `fillColor`, etc...). The Promise resolves with an object containing the `path` property of that image. Ex: `this.sketch.save().then(image => console.log(image.path));` |
 
+Here are a few static helper functions for the component:
+
+| Name | Return type | Comment |
+| ---- | ----------- | ------- |
+| `getImageDataFromFilePath` | `Promise` | Reads a JPEG or PNG file into base64 image data that can be rendered using the `imageData` prop. |
+
 ## Examples
 
 The project contains a folder `examples` that contains few demos of how to use `react-native-sketch`. Just copy and paste the code to your React Native application.

RNSketch/RNSketch.h

@@ -29,5 +29,6 @@
 @property (nonatomic, strong) NSString *imageType;
 @property (nonatomic, strong) UIColor *strokeColor;
 @property (nonatomic, assign) NSInteger strokeThickness;
+@property (nonatomic, strong) NSURL *imageData;
 
 @end

RNSketch/RNSketch.m

@@ -123,7 +123,7 @@ - (void)drawCurve
 
 - (void)drawBitmap
 {
-  UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);
+  UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, UIViewContentModeScaleAspectFit);
 
   // Paint background if fillColor property provided
   if (!_image && _fillColor) {
@@ -192,6 +192,14 @@ - (void)setStrokeColor:(UIColor *)strokeColor
   _strokeColor = strokeColor;
 }
 
+- (void)setImageData:(NSURL *)imageURLData
+{
+  NSData *imageData = [NSData dataWithContentsOfURL:imageURLData];
+  _image = [UIImage imageWithData:imageData];
+  [self drawBitmap];
+  [self setNeedsDisplay];
+}
+
 - (void)setStrokeThickness:(NSInteger)strokeThickness
 {
   _path.lineWidth = strokeThickness;

RNSketch/RNSketchManager.m

@@ -36,6 +36,7 @@ @implementation RNSketchManager
 RCT_EXPORT_VIEW_PROPERTY(imageType, NSString);
 RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor);
 RCT_EXPORT_VIEW_PROPERTY(strokeThickness, NSInteger);
+RCT_EXPORT_VIEW_PROPERTY(imageData, NSURL);
 
 #pragma mark - Lifecycle
 

index.ios.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NativeModules, requireNativeComponent, View, ViewPropTypes } from 'react-native';
+import RNFS from 'react-native-fs';
 
 const SketchManager = NativeModules.RNSketchManager || {};
 
@@ -15,6 +16,7 @@ export default class Sketch extends React.Component {
     onClear: PropTypes.func,
     strokeColor: PropTypes.string,
     strokeThickness: PropTypes.number,
+    imageData: PropTypes.string,
     style: viewPropTypes.style,
   };
 
@@ -25,9 +27,29 @@ export default class Sketch extends React.Component {
     onClear: () => {},
     strokeColor: '#000000',
     strokeThickness: 1,
-    style: null,
+    imageData: null,
+    style: null
   };
 
+  static getImageDataFromFilePath(filePath) {
+    const formats = {
+      "jpg": "image/jpg",
+      "jpeg": "image/jpg",
+      "png": "image/png"
+    }
+    const fileExtension = filePath.split('.').pop();
+    const format = formats[fileExtension];
+
+    if (!format) {
+      throw new Error(`Unable to parse file extension .${fileExtension}`)
+    }
+
+    return RNFS.readFile(filePath.path, 'base64')
+      .then((base64) => {
+          return `data:${format};base64,${base64}`;
+      })
+  }
+
   constructor(props) {
     super(props);
 
@@ -36,11 +58,17 @@ export default class Sketch extends React.Component {
       flex: 1,
       backgroundColor: 'transparent',
     };
+
+    this.state = {
+      imageData: props.imageData
+    }
   }
 
-  state = {
-    imageData: null,
-  };
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+        imageData: nextProps.imageData
+    })
+  }
 
   onChange = (event) => {
     const { imageData } = event.nativeEvent;
@@ -74,6 +102,7 @@ export default class Sketch extends React.Component {
         strokeColor={strokeColor}
         strokeThickness={strokeThickness}
         style={[this.style, this.props.style]}
+        imageData={this.state.imageData}
       />
     );
   }

package.json

@@ -4,7 +4,8 @@
   "description": "A react-native component for touch-based drawing",
   "main": "index.ios.js",
   "dependencies": {
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.5.10",
+    "react-native-fs": "^2.10.14"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",