DataURL sometime it works but sometimes it not showing the data
RuFang-21 opened this issue · 3 comments
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.
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.
@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.
- editing mode
- 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.
@someAndroidDeveloper Hi, This may be the same problem, you can try to solve it by setting key={your dataURL} in the Signature component