Clean up of objective C code and made JS much simpler too.

Author: Kevin Brown

RNSketch/RNSketch.h

@@ -7,17 +7,22 @@
 //
 
 #import <UIKit/UIKit.h>
-
-@class RCTEventDispatcher;
+#import "UIView+React.h"
 
 @interface RNSketch : UIView
 
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispather NS_DESIGNATED_INITIALIZER;
-- (void)setFillColor:(UIColor *)fillColor;
-- (void)setStrokeColor:(UIColor *)strokeColor;
-- (void)setStrokeThickness:(NSInteger)strokeThickness;
-- (void)setClearButtonHidden:(BOOL)hidden;
-- (void)setImageType:(NSString *)imageType;
 - (void)clearDrawing;
+- (NSString *)base64Code;
+
+// Events
+@property (nonatomic, copy) RCTBubblingEventBlock onReset;
+@property (nonatomic, copy) RCTBubblingEventBlock onChange;
+
+// Properties
+@property (nonatomic, strong) UIColor *fillColor;
+@property (nonatomic, strong) UIColor *strokeColor;
+@property (nonatomic, assign) NSInteger strokeThickness;
+@property (nonatomic, assign) BOOL clearButtonHidden;
+@property (nonatomic, strong) NSString *imageType;
 
 @end

RNSketch/RNSketch.m

@@ -15,31 +15,26 @@
 @implementation RNSketch
 {
   // Internal
-  RCTEventDispatcher *_eventDispatcher;
   UIButton *_clearButton;
   UIBezierPath *_path;
   UIImage *_image;
   CGPoint _points[5];
   uint _counter;
-
-  // Configuration settings
-  UIColor *_fillColor;
-  UIColor *_strokeColor;
-  NSString *_imageType;
 }
 
 
 #pragma mark - UIViewHierarchy methods
 
 
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
+- (instancetype)initWithFrame:(CGRect) frame
 {
-  if ((self = [super init])) {
+  if ((self = [super initWithFrame:frame])) {
     // Internal setup
     self.multipleTouchEnabled = NO;
+  
     // For borderRadius property to work (CALayer's cornerRadius).
     self.layer.masksToBounds = YES;
-    _eventDispatcher = eventDispatcher;
+  
     _path = [UIBezierPath bezierPath];
 
     [self initClearButton];
@@ -48,6 +43,8 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
   return self;
 }
 
+RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
+
 - (void)layoutSubviews
 {
   [super layoutSubviews];
@@ -93,11 +90,6 @@ - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
   _counter = 0;
   UITouch *touch = [touches anyObject];
   _points[0] = [touch locationInView:self];
-  
-  NSDictionary *bodyEvent = @{
-                              @"target": self.reactTag,
-                              };
-  [_eventDispatcher sendInputEventWithName:@"onClearPlaceholder" body:bodyEvent];
 }
 
 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
@@ -120,12 +112,7 @@ - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
   [_path removeAllPoints];
   _counter = 0;
 
-  // Send event
-  NSDictionary *bodyEvent = @{
-                              @"target": self.reactTag,
-                              @"image": [self drawingToString],
-                              };
-  [_eventDispatcher sendInputEventWithName:@"topChange" body:bodyEvent];
+  if (_onChange) _onChange(@{ @"imageData": [self drawingToString]});
 }
 
 - (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
@@ -189,15 +176,21 @@ - (void)drawBitmap
 
 - (NSString *)drawingToString
 {
+  NSString *imageData = nil;
+  
   if ([_imageType isEqualToString:@"jpg"]) {
-    return [UIImageJPEGRepresentation(_image, 1) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+    imageData = [UIImageJPEGRepresentation(_image, 1) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
   } else if ([_imageType isEqualToString:@"png"]) {
-    return [UIImagePNGRepresentation(_image) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+    imageData = [UIImagePNGRepresentation(_image) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
+  } else {
+    [NSException raise:@"Invalid image type" format:@"%@ is not a valid image type for exporting the drawing.", _imageType];
   }
 
-  [NSException raise:@"Invalid image type" format:@"%@ is not a valid image type for exporting the drawing.", _imageType];
-  
-  return nil;
+  return [[self base64Code] stringByAppendingString:imageData];
+}
+
+- (NSString *)base64Code {
+  return [NSString stringWithFormat:@"data:image/%@;base64,", self.imageType];
 }
 
 
@@ -215,10 +208,8 @@ - (void)clearDrawing
   [self setNeedsDisplay];
 
   // Send event
-  NSDictionary *bodyEvent = @{
-                              @"target": self.reactTag,
-                              };
-  [_eventDispatcher sendInputEventWithName:@"onReset" body:bodyEvent];
+  if (_onReset) _onReset(@{});
+  if (_onChange) _onChange(@{});
 }
 
 
@@ -245,4 +236,8 @@ - (void)setImageType:(NSString *)imageType
   _imageType = imageType;
 }
 
+- (NSString *)getImageType {
+  return _imageType;
+}
+
 @end

RNSketch/RNSketchManager.m

@@ -19,29 +19,18 @@ @implementation RNSketchManager
 
 RCT_EXPORT_MODULE()
 
-#pragma mark - Properties
+#pragma mark - Events
 
+RCT_EXPORT_VIEW_PROPERTY(onReset, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock);
 
-RCT_CUSTOM_VIEW_PROPERTY(fillColor, UIColor, RNSketch)
-{
-  [view setFillColor:json ? [RCTConvert UIColor:json] : [UIColor whiteColor]];
-}
-RCT_CUSTOM_VIEW_PROPERTY(strokeColor, UIColor, RNSketch)
-{
-  [view setStrokeColor:json ? [RCTConvert UIColor:json] : [UIColor blackColor]];
-}
-RCT_CUSTOM_VIEW_PROPERTY(clearButtonHidden, BOOL, RNSketch)
-{
-  [view setClearButtonHidden:json ? [RCTConvert BOOL:json] : NO];
-}
-RCT_CUSTOM_VIEW_PROPERTY(strokeThickness, NSInteger, RNSketch)
-{
-  [view setStrokeThickness:json ? [RCTConvert NSInteger:json] : 1];
-}
-RCT_CUSTOM_VIEW_PROPERTY(imageType, NSString, RNSketch)
-{
-  [view setImageType:json ? [RCTConvert NSString:json] : @"jpg"];
-}
+#pragma mark - Properties
+
+RCT_EXPORT_VIEW_PROPERTY(fillColor, UIColor);
+RCT_EXPORT_VIEW_PROPERTY(strokeColor, UIColor);
+RCT_EXPORT_VIEW_PROPERTY(clearButtonHidden, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(strokeThickness, NSInteger);
+RCT_EXPORT_VIEW_PROPERTY(imageType, NSString);
 
 #pragma mark - Lifecycle
 
@@ -57,32 +46,27 @@ - (instancetype)init
 - (UIView *)view
 {
   if (!self.sketchView) {
-    self.sketchView = [[RNSketch alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+    self.sketchView = [[RNSketch alloc] initWithFrame:CGRectZero];
   }
 
   return self.sketchView;
 }
 
-#pragma mark - Event types
-
-
-- (NSArray *)customDirectEventTypes
-{
-  return @[
-           @"onReset",
-           @"onClearPlaceholder"
-           ];
-}
-
 
 #pragma mark - Exported methods
 
-
 RCT_EXPORT_METHOD(saveImage:(NSString *)encodedImage
                   ofType:(NSString *)imageType
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
 {
+  // Strip the Base 64 Code out if it's there.
+  NSString *base64Code = [self.sketchView base64Code];
+  encodedImage = [encodedImage stringByReplacingOccurrencesOfString:base64Code
+                                                         withString:@""
+                                                            options:NULL
+                                                              range:NSMakeRange(0, [base64Code length])];
+  
   // Create image data with base64 source
   NSData *imageData = [[NSData alloc] initWithBase64EncodedString:encodedImage options:NSDataBase64DecodingIgnoreUnknownCharacters];
   if (!imageData) {

index.ios.js

@@ -21,8 +21,8 @@ export default class Sketch extends React.Component {
 
   static propTypes = {
     fillColor: string,
+    onChange: func,
     onReset: func,
-    onUpdate: func,
     clearButtonHidden: bool,
     onClearPlaceholder: func,
     strokeColor: string,
@@ -33,50 +33,20 @@ export default class Sketch extends React.Component {
 
   static defaultProps = {
     fillColor: '#ffffff',
+    onChange: () => {},
     onReset: () => {},
-    onClearPlaceholder: () => {},
-    onUpdate: () => {},
     clearButtonHidden: false,
     strokeColor: '#000000',
     strokeThickness: 1,
     style: null,
     imageType: 'jpg'
   };
 
-  constructor(props) {
-    super(props);
-    this.onReset = this.onReset.bind(this);
-    this.onClearPlaceholder = this.onClearPlaceholder.bind(this);
-    this.onUpdate = this.onUpdate.bind(this);
-    this.getBase64Code = this.getBase64Code.bind(this);
-  }
-
-  onReset() {
-    this.props.onUpdate(null);
-    this.props.onReset();
-  }
-
-  getBase64Code() {
-    return `data:image/${this.props.imageType};base64,`;
-  }
-
-  onClearPlaceholder() {
-    this.props.onClearPlaceholder();
-  }
-
-  onUpdate(e) {
-    const { onUpdate, imageType } = this.props;
-
-    onUpdate(`${this.getBase64Code()}${e.nativeEvent.image}`);
-  }
-
   saveImage(image) {
     if (typeof image !== 'string') {
       return Promise.reject('You need to provide a valid base64 encoded image.');
     }
 
-    const base64Code = this.getBase64Code();
-    const src = image.indexOf(base64Code) === 0 ? image.replace(base64Code, '') : image;
     return SketchManager.saveImage(src, this.props.imageType);
   }
 
@@ -88,9 +58,6 @@ export default class Sketch extends React.Component {
     return (
       <RNSketch
         {...this.props}
-        onChange={this.onUpdate}
-        onReset={this.onReset}
-        onClearPlaceholder={this.onClearPlaceholder}
         style={[styles.base, this.props.style]}
       />
     );