RepairShopr / react-native-signature-capture

A simple modular component for react native (iOS) to capture a signature as an image
MIT License
962 stars 514 forks source link

Multiple signature-capture cause bugs on callbacks calls #121

Open kosiakMD opened 6 years ago

kosiakMD commented 6 years ago
react-native-signature-capture
    ^0.4.9
react-native -v
    react-native-cli: 2.0.1
    react-native: 0.47.1
npm -v
    5.7.1
node -v
    v8.10.0

Hello, I've found next problem: When I set on one screen signature-capture and set a callback on onSaveEvent then after saving go to next screen (not unmount previous screen & component because React-Navigation used), there set on second signature-capture onSaveEvent And after save (calling saveImage) it first calls callback from previous screen signature-capture and then current. The problem is in Native code https://github.com/RepairShopr/react-native-signature-capture/blob/473ccfaff218f742218f5bb526d365be8fc419f6/ios/RSSignatureViewManager.m#L48 subscription to DeviceEventEmitter by the same name "onSaveEvent" and stacking into queue instead of overriding. And there is no method to unsubscribe the previous listener.

Thus I have to make a hack - after saving change the internal Component status to check and prevent multiple callback calls.

I see three solutions: 1) provide a method to unsubscribe (IMHO - it will be useful always) 2) override a previous listener by next 3) filter what instance of signature-capture subscribe and call only appropriate own callback

Thank you.

maxweb4u commented 6 years ago

I have the same problem :(

asd-ftw commented 6 years ago
react-native-signature-capture
    ^0.4.9
react-native -v
    react-native-cli: 2.0.1
    react-native: 0.47.1
npm -v
    5.7.1
node -v
    v8.10.0

Hello, I've found next problem: When I set on one screen signature-capture and set a callback on onSaveEvent then after saving go to next screen (not unmount previous screen & component because React-Navigation used), there set on second signature-capture onSaveEvent And after save (calling saveImage) it first calls callback from previous screen signature-capture and then current. The problem is in Native code react-native-signature-capture/ios/RSSignatureViewManager.m

Line 48 in 473ccfa

sendDeviceEventWithName:@"onSaveEvent"

subscription to DeviceEventEmitter by the same name "onSaveEvent" and stacking into queue instead of overriding. And there is no method to unsubscribe the previous listener. Thus I have to make a hack - after saving change the internal Component status to check and prevent multiple callback calls.

I see three solutions:

  1. provide a method to unsubscribe (IMHO - it will be useful always)
  2. override a previous listener by next
  3. filter what instance of signature-capture subscribe and call only appropriate own callback

Thank you.

Hi, can you please post your hack ? I really need to know.

Thanks in advance

maxweb4u commented 6 years ago

@asd-ftw you just need to add store ( for example mobx) and save state that you already saved first sign. So code can be something like that:

It's first screen:

onSaveEvent = (result) => {
        if (!userStore.isSignAdded) {
            userStore.isSignAdded = true;
            //save first sign here which is placed here - result.encoded
        }
    }

For the second screen you just add onSaveEvent as usual.