react-native-signature-canvas
react-native-signature-canvas copied to clipboard
Published
20 hours ago •
YanYuanFE
YanYuanFE
Not work on android
When you swipe to make the signature, it only draws a dot
RN version 0.76.1 react-native-signature-canvas version 4.7.2
const SharedSignatureCanvas = (props: SharedSignatureCanvasProps) => {
const ref = useRef<SignatureViewRef>(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
const preloadTimeout = setTimeout(() => setIsReady(true), 500);
return () => clearTimeout(preloadTimeout);
}, []);
const handleSignature = (signatureParam: string) => {
props.handleSignature(signatureParam);
};
const readSignature = () => {
if (ref.current) {
ref.current.readSignature();
}
};
const imgWidth = '100%';
const imgHeight = '100%';
const style = `
.m-signature-pad {
border: 0px #fff;
position: absolute;
width: ${Dimensions.get('window').width}px;
margin: auto;
top: 0;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
overflow: hidden;
}
.m-signature-pad--body {
border: none;
}
.m-signature-pad--footer {
display: none;
margin: 0px;
padding: 0px;
}
body, html {
width: ${imgWidth}px;
height: ${imgHeight}px;
}
`;
if (!isReady) {
return (
<WebView
source={{ html: '<html lang="es"><body></body></html>' }}
style={{ width: 0, height: 0 }} // Invisible
/>
);
}
return (
<View style={{ flex: 1, minHeight: 250 }}>
<SignatureScreen
ref={ref}
key={'ex-1-sign'}
onOK={handleSignature}
webStyle={style}
onEnd={readSignature}
style={{ borderColor: '#0066BD', borderWidth: 1 }}
/>
</View>
);
};
