Open DroidZed opened 2 weeks ago
Hi, I'm experiencing this bug with the <SignatureView> component as follows:
<SignatureView>
Related code:
const [sig, setSig] = useState(''); const handleSetSig = useCallback((signature: string) => { console.log('[SIG SCREEN]: ' + signature); setSig(signature); }, []); const handleDeleteSig = useCallback(() => { sigRef.current?.clearSignature(); setSig(''); }, []);
JSX:
<View style={{ height: 250, position: 'relative', }}> <SignatureView ref={sigRef} onOK={handleSetSig} penColor="black" nestedScrollEnabled scrollable={false} style={{ backgroundColor: 'white', borderRadius: 12 }} webviewContainerStyle={{ backgroundColor: 'white', borderRadius: 12 }} webStyle={` .m-signature-pad { background-color: transparent; } .m-signature-pad { flex: 1; box-shadow: none; border-radius: 10px; } .m-signature-pad--footer { display: none; } `} backgroundColor="white" /> <View style={{ position: 'absolute', top: 10, alignItems: 'center', justifyContent: 'center', gap: 20, borderWidth: 1, borderRadius: 25, padding: 5, right: 10, borderColor: AppTheme.AppLight.colors.border, backgroundColor: AppTheme.AppLight.colors.card, }}> <Pressable onPress={() => { sigRef.current?.erase(); sigRef.current?.changePenSize(5, 5); }} style={({ pressed }) => [ { transform: [{ scale: pressed ? 0.98 : 1.0 }], }, ]}> <View> <MaterialCommunityIcons name="eraser" size={30} color="black" /> </View> </Pressable> <Pressable onPress={() => { sigRef.current?.draw(); sigRef.current?.changePenSize(1, 1); }} style={({ pressed }) => [ { padding: 2, transform: [{ scale: pressed ? 0.98 : 1.0 }], }, ]}> <View> <MaterialCommunityIcons name="brush" size={30} color="black" /> </View> </Pressable> </View>
{sig.length > 0 && ( <ImageView viewStyle={{ width: '100%' }} imageStyle={{ width: '100%' }} src={{ uri: sig }} /> )}
https://github.com/user-attachments/assets/a962c603-4f97-4141-a154-6438a25f697d
Scenario
Hi, I'm experiencing this bug with the
<SignatureView>
component as follows:Related code:
JSX: