Two Signature Components on single screen

[sumit1317]

Two Signature components on single screen in react native are causing an issue as call to first component's saveImage() is not invoking the onSaveEvent of first component, whereas 2nd components saveImage() is invoking both onSaveEvent's of first and second component.

[sumit1317]

Below is my code ... "use strict"; import React, { Component } from "react"; import { YellowBox, Image, Text, TouchableHighlight } from "react-native";

import SignatureCapture from "react-native-signature-capture"; import { View, Container, Content } from "native-base";

import styles from "../styles";

export class TwoSignatureScreen extends Component { constructor(props) { super(props); this.state = { sellerSignature: null, transporterSignature: null }; // this._onSellerSaveEvent = this._onSellerSaveEvent.bind(this); }

componentDidMount() {}

static navigationOptions = ({ navigation }) => { const { params = {} } = navigation.state; return { title: "TwoSignatureScreen", gesturesEnabled: true, headerStyle: { backgroundColor: "#0000ff", borderBottomWidth: 0 }, headerTitleStyle: { color: "white" }, headerTintColor: "white" }; };

saveSellerSign() { alert("Seller1"); this.refs["sellerSignature"].saveImage(); }

saveTransporterSign() { alert("Transporter1"); this.refs["transporterSignature"].saveImage(); }

resetSellerSign() { this.refs["sellerSignature"].resetImage(); this.setState({ sellerSignature: null }); }

resetTransporterSign() { this.refs["transporterSignature"].resetImage(); this.setState({ transporterSignature: null }); }

_onSellerSaveEvent = result => { alert("Seller2"); //result.encoded - for the base64 encoded png //result.pathName - for the file path name const base64String = "data:image/png;base64," + result.encoded; this.setState({ sellerSignature: base64String }); };

_onTransporterSaveEvent = result => { alert("Transporter1"); //result.encoded - for the base64 encoded png //result.pathName - for the file path name const base64String = "data:image/png;base64," + result.encoded; this.setState({ transporterSignature: base64String }); };

_onSellerDragEvent() { // This callback will be called when the user enters signature console.log("Dragged inside Seller signature"); }

_onTransporterDragEvent() { // This callback will be called when the user enters signature console.log("Dragged inside transporter signature"); }

render() { YellowBox.ignoreWarnings([ "Remote debugger", "Warning: Async Storage has been extracted from react-native core" ]); // <- insert the warning text here you wish to hide. return (

Seller's Signature Box { this.saveSellerSign(); }} > Save { this.resetSellerSign(); }} > Reset {this.state.sellerSignature ? ( ) : ( No seller signatures saved yet )} Transporter's Signature Box { this.saveTransporterSign(); }} > Save { this.resetTransporterSign(); }} > Reset {this.state.transporterSignature ? ( ) : ( No transporter signatures saved yet )}

);

} }

export default TwoSignatureScreen;

[sumit1317]

I request for help on this, as I am stuck with further development ...

[kksiezyc]

anyone can help with that? struggling with that as well

[Stjng]

Found the way to fix this. Only iOS for now. In RSSignatureViewManager.m Add #import <React/RCTUIManager.h> Change from

RCT_EXPORT_METHOD(saveImage:(nonnull NSNumber *)reactTag) {
    dispatch_async(dispatch_get_main_queue(), ^{
        [self.signView saveImage];
    });
}

to

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

Works for me.

[CVRamana]

thanks buddy, worked for me in ios

[ghost]

@Stjng where should it be that file (RSSignatureViewManager.m)?

[Deepak9811]

Found the way to fix this. Only iOS for now. In RSSignatureViewManager.m Add #import <React/RCTUIManager.h> Change from

RCT_EXPORT_METHOD(saveImage:(nonnull NSNumber *)reactTag) {
  dispatch_async(dispatch_get_main_queue(), ^{
      [self.signView saveImage];
  });
}

to

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

Works for me.

not work for me