Two Signature Field getting updated when one is saved

user_13180560 0
Viewed 620

Before explaining I need to say EVERYTHING is working perfect on Android and the problem is on IOS devices I am using react-native-signature-capture , I have two signature field at the same page, I solve the problem of not getting saved but when I save one of the field both of them get the same value for the signature .

How can I handle it?

codes for signature component here

This is the extraInputsList logs in the codes

enter image description here

and this is my RSSSignatureViewManager.m file

#import "RSSignatureViewManager.h"
#import <React/RCTBridgeModule.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTUIManager.h>

@implementation RSSignatureViewManager

@synthesize bridge = _bridge;
@synthesize signView;

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(rotateClockwise, BOOL)
RCT_EXPORT_VIEW_PROPERTY(square, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showBorder, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showNativeButtons, BOOL)
RCT_EXPORT_VIEW_PROPERTY(showTitleLabel, BOOL)


-(dispatch_queue_t) methodQueue
{
    return dispatch_get_main_queue();
}

-(UIView *) view
{
    self.signView = [[RSSignatureView alloc] init];
    self.signView.manager = self;
    return signView;
}

// Both of these methods needs to be called from the main thread so the
// UI can clear out the signature.
RCT_EXPORT_METHOD(saveImage:(nonnull NSNumber *)reactTag) {
[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
RSSignatureView *view = viewRegistry[reactTag];
if (!view || ![view isKindOfClass:[RSSignatureView class]]) {
RCTLogError(@"Cannot find NativeView ", reactTag);
return;
}
[view saveImage];
}];
}

RCT_EXPORT_METHOD(resetImage:(nonnull NSNumber *)reactTag) {
[self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
RSSignatureView *view = viewRegistry[reactTag];
if (!view || ![view isKindOfClass:[RSSignatureView class]]) {
RCTLogError(@"Cannot find NativeView with tag", reactTag);
return;
}
[view erase];
}];
}
-(void) publishSaveImageEvent:(NSString *) aTempPath withEncoded: (NSString *) aEncoded {
    [self.bridge.eventDispatcher
     sendDeviceEventWithName:@"onSaveEvent"
     body:@{
                    @"pathName": aTempPath,
                    @"encoded": aEncoded
                    }];
}

-(void) publishDraggedEvent {
    [self.bridge.eventDispatcher
     sendDeviceEventWithName:@"onDragEvent"
     body:@{@"dragged": @YES}];
}

@end
react-native reactjs
2 Answers

Solution

just install this package from this git

you can edit package.json like this

"react-native-signature-capture": "git+https://github.com/nomi9995/react-native-signature-capture.git",

Then do yarn install, react-native link react-native-signature-capture, and finally, it works great when I have multiple signature-pads!

user_80798680

UPDATE: Both the Android and iOS versions save images from any signature box to the same path/filename. To support multiple boxes, you'll need to deal with the encoding/file sequentially. Or you can overload/change the saveImage method to take a filename.

Looks every time you save an image, this library will actively delete the previous image.

Android version from RSSignatureCaptureMainView.java:140

  final void saveImage() {
    String root = Environment.getExternalStorageDirectory().toString();

    // the directory where the signature will be saved
    File myDir = new File(root + "/saved_signature");

    // make the directory if it does not exist yet
    if (!myDir.exists()) {
      myDir.mkdirs();
    }

    // set the file name of your choice
    String fname = "signature.png";

    // in our case, we delete the previous file, you can remove this
    File file = new File(myDir, fname);
    if (file.exists()) {
      file.delete();
    }
.
.
.

iOS version from RSSignatureView.m:186

-(void) saveImage {
    saveButton.hidden = YES;
    clearButton.hidden = YES;
    UIImage *signImage = [self.sign signatureImage: _rotateClockwise withSquare:_square];

    saveButton.hidden = NO;
    clearButton.hidden = NO;

    NSError *error;

    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths firstObject];
    NSString *tempPath = [documentsDirectory stringByAppendingFormat:@"/signature.png"];

    //remove if file already exists
    if ([[NSFileManager defaultManager] fileExistsAtPath:tempPath]) {
        [[NSFileManager defaultManager] removeItemAtPath:tempPath error:&error];
        if (error) {
            NSLog(@"Error: %@", error.debugDescription);
        }
    }
.
.
.

Previous answer:

This looks to be a known issue.

In RSSignatureViewManager.m, add #import <React/RCTUIManager.h>

and change the method RCT_EXPORT_METHOD to the following

RCT_EXPORT_METHOD(saveImage:(nonnull NSNumber *)reactTag) {
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
        RSSignatureView *view = viewRegistry[reactTag];
        if (!view || ![view isKindOfClass:[RSSignatureView class]]) {
          RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
          return;
        }
        [view saveImage];
    }];
}
user_57851190
Related