#1712 | [DMP 2025] Signature capture

packages/openchs-android/package.json

@@ -91,13 +91,14 @@
     "react-native-randombytes": "^3.6.1",
     "react-native-restart": "0.0.24",
     "react-native-safe-area-context": "4.3.1",
+    "react-native-signature-canvas": "^4.7.4",
     "react-native-simple-dialogs": "1.5.0",
     "react-native-smooth-pincode-input": "1.0.9",
     "react-native-svg": "12.4.3",
     "react-native-vector-icons": "9.2.0",
     "react-native-video": "5.2.1",
     "react-native-video-player": "0.12.0",
-    "react-native-webview": "11.23.0",
+    "react-native-webview": "^13.15.0",
     "react-native-zip-archive": "6.0.8",
     "realm": "11.10.2",
     "redux": "4.2.0",

packages/openchs-android/src/views/common/Observations.js

@@ -1,4 +1,4 @@
-import {Text, TouchableOpacity, View} from "react-native";
+import {Text, TouchableOpacity, View, Image} from "react-native";
 import ListView from "deprecated-react-native-listview";
 import PropTypes from 'prop-types';
 import React, {Fragment} from "react";
@@ -22,6 +22,7 @@ import EncounterService from "../../service/EncounterService";
 import CustomActivityIndicator from "../CustomActivityIndicator";
 import PhoneCall from "../../model/PhoneCall";
 import {TaskActionNames as Actions} from "../../action/task/TaskActions";
+import SignatureFormElement from "../form/formElement/SignatureFormElement";
 
 class Observations extends AbstractComponent {
     static propTypes = {
@@ -163,6 +164,13 @@ class Observations extends AbstractComponent {
                     </View>
                 </View>
             );
+        } else if (renderType === Concept.dataType.Signature) {
+            return (
+                <View style={this.styles.observationColumn}>
+                    <Image width={100} height={100} source={{uri: `file://${SignatureFormElement.signatureFileDirectory}/${observationModel.getValueWrapper().getValue()}`}}/>
+                    <Text></Text>
+                </View>
+            );
         } else if (Concept.dataType.Media.includes(renderType)) {
             const allMediaURIs = _.split(displayable.displayValue, ',');
             return (

packages/openchs-android/src/views/form/FormElementGroup.js

@@ -43,6 +43,7 @@ import SingleSelectEncounterFormElement from "./formElement/SingleSelectEncounte
 import MultiSelectEncounterFormElement from "./formElement/MultiSelectEncounterFormElement";
 import MediaV2FormElement from "./formElement/MediaV2FormElement";
 import Colors from "../primitives/Colors";
+import SignatureFormElement from "./formElement/SignatureFormElement";
 
 class FormElementGroup extends AbstractComponent {
     static propTypes = {
@@ -220,6 +221,14 @@ class FormElementGroup extends AbstractComponent {
                                 value={this.getSelectedAnswer(formElement.concept, new MultipleCodedValues())}
                                 validationResult={validationResult}
                             />, uniqueKey, formElement.uuid === erroredUUID);
+                        } else if (formElement.concept.datatype === Concept.dataType.Signature) {
+                            return this.wrap(<SignatureFormElement
+                                key={uniqueKey}
+                                element={formElement}
+                                actionName={this.props.actions["PRIMITIVE_VALUE_CHANGE"]}
+                                value={this.getSelectedAnswer(formElement.concept, new PrimitiveValue())}
+                                validationResult={validationResult}
+                            />, uniqueKey, formElement.uuid === erroredUUID);
                         } else if ([Concept.dataType.ImageV2].includes(formElement.concept.datatype)) {
                             return this.wrap(<MediaV2FormElement
                                 key={uniqueKey}

packages/openchs-android/src/views/form/formElement/SignatureFormElement.js

@@ -0,0 +1,157 @@
+import PropTypes from "prop-types";
+import React from "react";
+import AbstractFormElement from "./AbstractFormElement";
+import {StyleSheet, View, Image, TouchableNativeFeedback, Alert} from "react-native";
+import SignatureCanvas from "react-native-signature-canvas";
+import ValidationErrorMessage from "../ValidationErrorMessage";
+import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import Colors from "../../primitives/Colors";
+import General from "../../../utility/General";
+import _ from "lodash";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import {ValidationResult} from "openchs-models";
+import { AlertMessage } from "../../common/AlertMessage";
+import FileSystem from "../../../model/FileSystem";
+import fs from 'react-native-fs';
+
+class SignatureFormElement extends AbstractFormElement {
+    static signatureFileDirectory = FileSystem.getImagesDir();
+    static propTypes = {
+        element: PropTypes.object.isRequired,
+        actionName: PropTypes.string.isRequired,
+        value: PropTypes.object,
+        validationResult: PropTypes.object,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.signatureRef = React.createRef();
+    }
+
+    get signatureFilename() {
+        return _.get(this, "props.value.answer");
+    }
+
+    updateValue(signatureValue, validationResult = null) {
+        if (General.isNilOrEmpty(signatureValue)) {
+            this.onUpdateObservations(null);
+            return;
+        }
+
+        const [header, base64Data] = signatureValue.split(',');
+        const mimeType = header.match(/data:(.*?);/)[1];
+        const ext = mimeType.split('/')[1];
+
+        const fileName = `${General.randomUUID()}.${ext}`;
+        const filePath = `${SignatureFormElement.signatureFileDirectory}/${fileName}`;
+
+        fs.writeFile(filePath, base64Data, 'base64')
+            .then(() => {
+                this.onUpdateObservations(fileName);
+            })
+            .catch((error) => {
+                AlertMessage(`Error saving signature: ${error.message}`, "error");
+            });
+    }
+
+    onUpdateObservations(fileName) {
+        this.dispatchAction(this.props.actionName, {
+            formElement: this.props.element,
+            parentFormElement: this.props.parentElement,
+            questionGroupIndex: this.props.questionGroupIndex,
+            value: fileName,
+        });
+    }
+
+    clearAnswer() {
+        this.updateValue(null);
+    }
+
+    handleSignatureData = (signature) => {
+        this.updateValue(signature);
+    };
+
+    handleEmpty = () => {
+        this.updateValue(null, ValidationResult.failure(this.props.element.uuid, this.I18n.t("signatureRequired")));
+    };
+
+    handleClear = () => {
+        this.clearAnswer();
+    };
+
+    handleEnd = () => {
+        // Don't read signature on end, only when save is clicked
+    };
+
+    render() {
+        return (
+            <View style={{marginVertical: 16}}>
+                <FormElementLabelWithDocumentation element={this.props.element} />
+                {this.signatureFilename ? (
+                    <View
+                        style={{
+                            flexDirection: "row",
+                            height: 100,
+                            justifyContent: "space-between",
+                            paddingHorizontal: 8,
+                        }}
+                    >
+                        <Image
+                            resizeMode="center"
+                            style={{
+                                flex: 1,
+                            }}
+                            source={{uri: `file://${SignatureFormElement.signatureFileDirectory}/${this.signatureFilename}`}}
+                        />
+                        <TouchableNativeFeedback onPress={() => this.clearAnswer()}>
+                            <Icon name={"backspace"} style={[styles.icon]} />
+                        </TouchableNativeFeedback>
+                    </View>
+                ) : (
+                    <View style={styles.signatureContainer}>
+                        <SignatureCanvas
+                            ref={this.signatureRef}
+                            onEnd={this.handleEnd}
+                            onOK={this.handleSignatureData}
+                            onEmpty={this.handleEmpty}
+                            onClear={this.handleClear}
+                            autoClear={false}
+                            descriptionText={this.I18n.t("signHere")}
+                            clearText={this.I18n.t("clear")}
+                            confirmText={this.I18n.t("save")}
+                        />
+                    </View>
+                )}
+                <View style={styles.lineStyle} />
+                <ValidationErrorMessage validationResult={this.props.validationResult} />
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    icon: {
+        color: Colors.ActionButtonColor,
+        opacity: 0.8,
+        alignSelf: "center",
+        fontSize: 36,
+    },
+    lineStyle: {
+        flex: 1,
+        borderColor: Colors.BlackBackground,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        opacity: 0.1,
+    },
+    signatureContainer: {
+        flex: 1,
+        height: 360,
+        marginTop: 8,
+        backgroundColor: Colors.InputBackground,
+        borderWidth: 1,
+        borderColor: Colors.InputBorderNormal,
+        borderRadius: 4,
+        overflow: "hidden",
+    },
+});
+
+export default SignatureFormElement;