I have a problem with the react-native-signature-canvas library. When I test the signature in the app using the iOS and Android emulator in my Mac all is OK and the behavior is correct but when I publish the app on the Expo platform and I test the signature in the app using the physical device, the app restarts. Someone knows how can I resolve the problem?
I thought that the problem was the react-native-signature-canvas version but it's not the problem. I used the versions 3.6.0 and 4.0.0 without obtaining good results. Also, the version of Expo that I use is the 41.0.0.
Below I write my implementation of the signature with the react-native-signature-canvas library. Maybe I do something wrong. Thank you so much for your help.
import SignatureScreen from 'react-native-signature-canvas';
import React, {useRef, useState} from "react";
import {StyleSheet, Text, View} from 'react-native';
import Styles from "../styles/ModalPDF";
import {Divider, Modal, Portal} from "react-native-paper";
import Colors from "../constants/Colors";
import { scale } from '../services/Scaled';
import { attributeServiceHO } from "../services/AttributeServiceHO";
import {useSelector} from "react-redux";
const Signature = ({text, onOK, visible, onDismiss, setSign}) => {
const [firma ,setFirma] = useState(null);
const dataHistoriaOcupacional = useSelector(state => state.historiaOcupacional);
const caso = useSelector(state => state.medicos.caso);
const paciente = useSelector(state => state.paciente.paciente);
const medicoData = useSelector(state => state.medicos.medicos_obj);
const form = useSelector(state => state.medicos.siniestroSelected);
const rutMedico = useSelector(state => state.medicos.medicos_obj.rut);
const ref = useRef();
const handleSignature = signature => {
setSign(signature);
setFirma(signature)
if(typeof signature !== 'string'){
setSign(signature);
}else{
setSign(signature);
attributeServiceHO(dataHistoriaOcupacional, paciente, caso, medicoData, form, rutMedico)
.then((response) => {
let {codigo} = response;
if(codigo === 200){
onDismiss();
}
})
}
};
const handleEmpty = () => {
//console.log('Empty');
}
const handleClear = () => {
//console.log('clear success!');
}
const handleEnd = () => {
ref.current.readSignature();
}
const style = `.m-signature-pad--footer
.button.save {
background-color: ${Colors.primaryColorLight};
color: ${Colors.textButtonDark};
}
.m-signature-pad--footer
.button.clear {
background-color: ${Colors.white};
color: ${Colors.warningColorText};
}
`;
return (
<Portal>
<Modal visible={visible} onDismiss={onDismiss} contentContainerStyle={Styles.container}>
<View style={Styles.container}>
<View style={styles.preview}>
<Text style={Styles.title}>Firma aqui:</Text>
<Divider style={Styles.divider}/>
<SignatureScreen
onOK={(signature) => handleSignature(signature)}
onEmpty={handleEmpty}
descriptionText="Epeteista signature"
clearText="CLEAR"
confirmText="SIGN"
webStyle={style}
/>
</View>
</View>
</Modal>
</Portal>
);
}
const styles = StyleSheet.create({
preview: {
width: scale(360),
height: scale(415),
backgroundColor: "#F8F8F8",
justifyContent: "center",
alignItems: "center"
},
previewText: {
color: "#FFF",
fontSize: 14,
height: 40,
lineHeight: 40,
paddingLeft: 10,
paddingRight: 10,
backgroundColor: "#69B2FF",
width: 120,
textAlign: "center",
marginTop: 10
}
});
export default Signature;