Problem with react-native-signature-canvas library in Expo when I test the signature in the iOS and Android physical device

Viewed 703

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;
0 Answers
Related