Load Base64 signature

[ugar0ff]

Good Day! How I can load previous saved signature in Signature view?

[YanYuanFE]

dataURL

[leneti]

Keep in mind if you have a base64 string of a random image, you'll need to prepend 'data:image/png;base64,' to the beginning of the dataURL value (i.e. dataURL=data:image/png;base64,${base64string})

[ugar0ff]

Thanks! It is work, but in code I have error:

[leneti]

I've amended it in my pull request. As soon as it's merged it should no longer be an issue

[YanYuanFE]

I've amended it in my pull request. As soon as it's merged it should no longer be an issue

thanks, 4.3.0 released.

[YumTheDeathGod]

hey, @YanYuanFE I am still struggling with setting the previous signature. I am able to set the previous signature one time but for next time for another user, it still not getting updated. there is a state passed to the prop dataURL. will you please help me with that? My local state is getting updated but not the signature screen.

[SyedUmair282]

@YumTheDeathGod did you get the solution? Please help if you got that

[carlgrob517]

dataURL is not working for android, it works for ios. Any resolution?

[YumTheDeathGod]

Hey @SyedUmair282 sorry for late reply! but still I will try to answer the question if someone else is needed. In my case I have used the useFocusEffect from @react-navigation/native with useCallback hook. These hooks will be executed whenever the component is in focus.

For your reference:

  useFocusEffect(
    useCallback(() => {
              webviewRef.current.injectJavaScript(
                getInjectableJSMessage({
                  message: casenote.formData.signature_data,
                  triggeredAt: new Date(),
                })
    }, [props])
  );

here weviewRef is ref of signature canvas. And with the help of getInjectableJSMessage prop of signature canvas injected that data stream (base64 data). Inside my source prop i have used a listner eg. :

                          document.addEventListener("message", handleEvent);
                                        function handleEvent(message) {                                            
                                            
                                            const sign_data = message;
                                            signaturePad.clear();
                                            if(sign_data.data.message.length > 0) {
                                                signaturePad.fromDataURL(sign_data.data.message, {
                                                    ratio: "350/70",
                                                    width: 350,
                                                    height: 70
                                                });                                          
                                            }
                                        }

Hope it will help someone.