Closed icaru88 closed 6 months ago
can you provider your code example?
export const SignatureModal: React.FC<Props> = ({
description,
onConfirm,
onCancel,
isVisible
}) => {
const ref = useRef<SignatureViewRef>(null);
const insets = useSafeAreaInsets();
const statusBarHeight = insets.top;
const onSignatureConfirm = (signature: string) => {
onConfirm(signature);
};
const onSignatureClear = () => {
ref.current?.erase();
};
return (
<Modal
style={[styles.container]}
visible={isVisible}
onRequestClose={onCancel}
>
<SafeAreaView
style={{
flex: 1,
marginTop: statusBarHeight
}}
>
<TouchableHighlight style={styles.cancelButton} onPress={onCancel}>
<Text style={{ color: Theme.colors.white }}>Cancel</Text>
</TouchableHighlight>
<SignatureScreen
ref={ref}
onOK={onSignatureConfirm}
onErase={onSignatureClear}
descriptionText={description}
backgroundColor={Theme.colors.lightGray}
/>
</SafeAreaView>
</Modal>
);
};
<SignatureModal
isVisible={isSignatureModalVisible}
description={'Please sign in the space above'}
onConfirm={onSignatureConfirm}
onCancel={() => setIsSignatureModalVisible(false)}
/>
webStyle={`
.m-signature-pad canvas {
background-image: url('${bg}');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.m-signature-pad {
flex: 1;
box-shadow: none;
border-radius: 10px;
height: 600px;
}
`}
try set .m-signature-pad height
hi thank you so much. It works.
Hi, thanks for this wonderful library. It worked well on both iOS and android. However I could not make it work to display on full screen. Need little help here. Thanks in advance. Cheers