DataURL sometime it works but sometimes it not showing the data

[RuFang-21]

const JobSignatureScreen: React.FC<JobNavigatorScreenProps<'JobSignature'>> = ({
  route,
  navigation,
}) => {
  const ref = useRef<SignatureViewRef>(null);

  const handleOK = (signature: any) => {
    route.params.onOk(signature);
    navigation.goBack();
  };

  const handleClear = () => {
    ref?.current?.clearSignature();
  };

  const handleConfirm = () => {
    ref?.current?.readSignature();
  };

  console.log(route?.params?.data);

  // Hide default footer and custom signature pad style
  const style = `
    .m-signature-pad {
      position: fixed;
      margin:auto; 
      top: 0; 
      width:100%;
      height:100%
    }
    body,html { 
      position:relative; 
    }
    .m-signature-pad--footer {display: none;}
  `;

  return (
    <Box flex={1}>
      <AppBar
        leftIcon={'cross'}
        goBackTitle={'Customer Signature'}
        goBack
        rightComponent={
          <HStack space={3}>
            <Button
              disabled={isLoading}
              variant="outline"
              onPress={handleClear}>
              Clear
            </Button>
            <Button
              isLoading={isLoading}
              variant="primary"
              onPress={() => {
                handleConfirm();
              }}>
              Save
            </Button>
          </HStack>
        }
      />

      <View
        position="relative"
        flex={1}
        alignItems={'center'}
        justifyContent={'center'}>
        <SignatureScreen
          dataURL={route?.params?.data}
          ref={ref}
          onOK={handleOK}
          onLoadEnd={() => {
            console.log('end');
          }}
          webStyle={style}
        />

        <DashedLine
          style={{
            position: 'absolute',
            left: 90,
            right: 90,
            bottom: 50,
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 20,
          }}
          dashColor="#B8C1CB"
          dashGap={10}
          dashThickness={0.7}
          dashLength={20}
        />
        <Text
          color={COLORS.neutrals.gray800}
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 40,
            justifyContent: 'center',
            alignItems: 'center',
            textAlign: 'center',
          }}>
          {'Insert your T&C here (if any)'}
        </Text>
      </View>
    </Box>
  );
};

export default JobSignatureScreen;

"react-native": "0.72.4"
"react-native-signature-canvas": "^4.7.1",
"react-native-webview": "^13.6.0",

My issues:
DataUrl will be string if already save and will be base64 if there is new signature, but sometime it might not showing the previous data. Could you help me on this? Thanks in advanced.

[YanYuanFE]

You can set a prop called key to the SignatureScreen component and update the key every time the dataURL is updated to trigger the re-rendering of the component.

[armata99]

@YanYuanFE I'm facing this only on android after updating some of the libraries including Webview and react-native.

Changing component props for re-rendering did not work for me. The way i solved it is that I assumed 2 modes for it.

1. editing mode
2. history mode

the usage is like below:

{(editable || signatureHistory) && (
       <Signature
         ref={this.sigPadRef}
         onOK={this.onSignatureOk}
         webStyle={sigPadStyle}
         imageType="image/svg+xml"
         dataURL={signatureHistory}
      />
)}

The point is that if the dataURL is present in the first render its all fine but, if its "" or undefined and then it gets changed into base64, it might not render.

[YanYuanFE]

@someAndroidDeveloper Hi, This may be the same problem, you can try to solve it by setting key={your dataURL} in the Signature component