DataUrl not working in some android devices.

[TikshaK]

I am using a base64 string as dataurl and bgSrc prop to show the image in the background and each time the modal is opened a new url comes and that is set in dataurl. It works fine in most of the devices (iOS and android) but in some android devices, It is giving issue for the release build. The modal opens and the dataurl Image appears for some time(it blink) and then nothing is there in the background.
I tried giving url to key prop as suggested in issue #347 by @YanYuanFE but it gives the same issue.
Please help if anybody can![

media_20241003_144835_1211646929666502506.mp4

](url)

    <View
        style={[
            styles.container,
            {
                backgroundColor: "rgba(0,0,0,0.8)",
                justifyContent: "center"
            }
        ]}
        pointerEvents={modalLoader ? 'none' : 'auto'}
    >
        <ActivityIndicator
            style={{
                position: "absolute",
                zIndex: 10,
                alignSelf: "center",
                top: sWidth * 0.95
            }}
            animating={modalLoader}
            size={sWidth * 0.1}
            color={Colors.primaryDark}
        />
        {
            backImg !="" &&

        
        <View
            style={{
                alignSelf: 'center',
                borderWidth: 1,
                width: sWidth * 0.9,
                height: sWidth * 0.9 * (3 / 4),
                justifyContent: "center",
                borderColor: Colors.primaryDark,
            }}
            pointerEvents={modalLoader ? 'none' : 'auto'}
        >

            <TouchableOpacity
                onPressIn={(evt) => handlePress(evt)}
                onLayout={handleLayout}
                style={{
                    width: "100%",
                    height: "100%"
                }}
            >
                {/* {
                    (backImg && backImg != null) &&
                } */}
                <SignatureScreen
                    dotSize={dot}
                    style={{
                        width: "100%",
                        height: "100%"
                    }}
                    // key={backImg}
                    onEnd={handleEnd}
                    onOK={handleOK}
                    onEmpty={handleEmpty}
                    onClear={handleClear}
                    onGetData={handleData}
                    ref={ref}
                    onBegin={(sig) => {
                        ref?.current?.readSignature()
                        setModalLoader(true)
                    }}
                    penColor={dotColor}
                    webStyle={styleButton}
                    dataURL={backImg}
                    bgSrc={backImg}
                    confirmText="Save to gallery"
                />
            </TouchableOpacity>
        </View>

}

[jackw3434]

try adding key={backImg} to the signature component. I had a similar issue and that seemed to resolve it for me magically

[Allyson1602]

Tente adicionar key={backImg} ao componente de assinatura. Eu tive um problema semelhante e isso pareceu resolver o problema magicamente.

Muito obrigado, resolveu aqui também kkkkk. Estava com problema ao assinar usando o ios, não mantinha a assinatura.

[arunraj20it]

I encountered the same issue where the signature disappeared during orientation change or canvas resize. The root cause was that signaturePad.toData() returned an empty array ([]), causing fromData([]) to clear the pad after resizing.

I’ve applied a working fix inside
node_modules/react-native-signature-canvas/h5/js/app.js
by modifying the resizeCanvas() and clearSignature() functions as follows:
function resizeCanvas() {
if (!canvas || !canvas.getContext) {
console.warn('Canvas not available for resize');
return;
}

try {
const context = canvas.getContext("2d");
const imgData = signaturePad ? signaturePad.toData() : null;
const ratio = Math.max(window.devicePixelRatio || 1, 1);

canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
context.scale(ratio, ratio);

// Restore previous signature if available
if (imgData && imgData.length > 0 && signaturePad) {
  signaturePad.fromData(imgData);
} else if (dataURL && signaturePad) {
  signaturePad.fromDataURL(dataURL);
}

} catch (error) {
console.error('Error resizing canvas:', error);
}
}

function clearSignature() {
if (signaturePad) signaturePad.clear();
dataURL = '';
window.ReactNativeWebView.postMessage("CLEAR");
}

1. The signature now persists correctly after resize/orientation change.
2. The dataURL fallback ensures recovery even when toData() is empty.
3. The clearSignature() method also resets dataURL to maintain consistency.