Two Signature Field getting updated when one is saved - reactjs

Question

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
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

Answer 1

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!

Answer 2

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];
}];
}