digisig/lidigisignature.js

Digital signature custom for trail purpose

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, PermissionsAndroid } from 'react-native';
import SignatureCapture from 'react-native-signature-capture';

// create a component
class DigiSig extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillMount() {
        // this.requestCameraPermission();
    }

    async  requestCameraPermission() {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
                {
                    title: 'Lisec App Camera Permission',
                    message:
                        'Lisec App needs access to your camera ' +
                        'so you can take awesome pictures.',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('You can use the camera');
            } else {
                console.log('Camera permission denied');
            }
        } catch (err) {
            console.warn(err);
        }
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: 'Lisec App Camera Permission',
                    message:
                        'Lisec App needs access to your camera ' +
                        'so you can take awesome pictures.',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('You can use the camera');
            } else {
                console.log('Camera permission denied');
            }
        } catch (err) {
            console.warn(err);
        }
    }

    saveSign() {
        this.refs["sign"].saveImage();

    }

    resetSign() {
        this.refs["sign"].resetImage();
        this.props.onReset();
    }

    _onSaveEvent(result) {
        console.log(this.props.saveAsName, 'FILE NAME')
        console.log(result, 'ksksks')

        let fs = RNFetchBlob.fs;
        let fileName = 'sample.png';

        var Base64Code = result.encoded;

        const dirs = RNFetchBlob.fs.dirs.DownloadDir;

        var path = dirs + "/image.png";
        console.log(path, 'PATH CHECKKKKKK')

        RNFetchBlob.fs.writeFile(path, Base64Code, 'base64')
            .then((res) => { console.log("File : ", res) });
        console.log(result);
    }
    _onDragEvent() {
        // This callback will be called when the user enters signature
        console.log("dragged");
    }


    render() {
        return (
            <View style={{ flex: 1, flexDirection: "column", backgroundColor: 'lightgrey' }}>
                <SignatureCapture
                    style={[{ flex: this.props.isFullScreen ? 9 : 2, borderColor: '#881b4c' }]}
                    ref="sign"
                    onSaveEvent={this.props.onSave}
                    onDragEvent={this.props.onDrag}
                    // saveImageFileInExtStorage={false}
                    showNativeButtons={false}
                    showTitleLabel={false}
                    viewMode={"portrait"} />

                {this.props.isSaveDisabled ?
                    <View style={{ flex: 1 }} />
                    :
                    <View style={{ flex: 1, flexDirection: "row" }}>
                        <TouchableHighlight style={styles.buttonStyle}
                            onPress={() => { this.saveSign() }} >
                            <Text>Save</Text>
                        </TouchableHighlight>

                        <TouchableHighlight style={styles.buttonStyle}
                            onPress={() => { this.resetSign() }} >
                            <Text>Reset</Text>
                        </TouchableHighlight>

                    </View>
                }



            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    signature: {

    },
    buttonStyle: {
        flex: 1, justifyContent: "center", alignItems: "center", height: 50,
        backgroundColor: "#fefefe",
        margin: 10,
    }

});

//make this component available to the app
export default DigiSig;