#1712 | [DMP 2025] Implement QR scanner and add support for QR data type

packages/openchs-android/android/gradle.properties

@@ -30,3 +30,4 @@ android.defaults.buildfeatures.buildconfig=true
 android.nonTransitiveRClass=false
 android.nonFinalResIds=false
 AsyncStorage_useNextStorage=true
+VisionCamera_enableCodeScanner=true

packages/openchs-android/package.json

@@ -97,6 +97,7 @@
     "react-native-vector-icons": "9.2.0",
     "react-native-video": "5.2.1",
     "react-native-video-player": "0.12.0",
+    "react-native-vision-camera": "^4.7.1",
     "react-native-webview": "11.23.0",
     "react-native-zip-archive": "6.0.8",
     "realm": "11.10.2",
@@ -112,6 +113,7 @@
     "@babel/plugin-proposal-decorators": "7.18.9",
     "@babel/plugin-proposal-object-rest-spread": "7.18.9",
     "@babel/runtime": "^7.20.0",
+    "@react-native-community/cli": "latest",
     "babel-jest": "^29.2.1",
     "bugsnag-sourcemaps": "1.3.0",
     "chai": "4.3.6",
@@ -126,8 +128,7 @@
     "patch-package": "6.5.0",
     "react-addons-test-utils": "15.6.2",
     "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0",
-    "@react-native-community/cli": "latest"
+    "react-test-renderer": "18.2.0"
   },
   "engines": {
     "node": ">=16"

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

@@ -199,6 +199,8 @@ class Observations extends AbstractComponent {
             )
         } else if (Concept.dataType.PhoneNumber === renderType) {
             return this.renderPhoneNumber(observationModel.getValueWrapper());
+        } else if (Concept.dataType.QR === renderType) {
+            return this.renderQRValue(displayable.displayValue);
         }
         return this.renderObservationText(isAbnormal, displayable.displayValue);
     }
@@ -213,6 +215,13 @@ class Observations extends AbstractComponent {
         </View>
     }
 
+    renderQRValue(qrValue) {
+        return <View style={[this.styles.observationPhoneNumberContainer, this.styles.observationColumn]}>
+            <Text style={this.styles.observationPhoneNumber}>{qrValue}</Text>
+            <MCIIcon name="qrcode" style={[{color: Colors.AccentColor}, this.styles.iconStyle]}/>
+        </View>
+    }
+
     renderSubject(subject) {
         if(!subject.entityObject) {
             return this.renderObservationText(true, subject.displayValue);

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

@@ -42,6 +42,7 @@ import RepeatableFormElement from "./formElement/RepeatableFormElement";
 import SingleSelectEncounterFormElement from "./formElement/SingleSelectEncounterFormElement";
 import MultiSelectEncounterFormElement from "./formElement/MultiSelectEncounterFormElement";
 import MediaV2FormElement from "./formElement/MediaV2FormElement";
+import QRFormElement from "./formElement/QRFormElement";
 import Colors from "../primitives/Colors";
 
 class FormElementGroup extends AbstractComponent {
@@ -351,6 +352,14 @@ class FormElementGroup extends AbstractComponent {
                                 observationHolder={this.props.observationHolder}
                                 subjectUUID={this.props.subjectUUID}
                             />, uniqueKey, formElement.uuid === erroredUUID);
+                        } else if (formElement.concept.datatype === Concept.dataType.QR) {
+                            return this.wrap(<QRFormElement
+                                key={uniqueKey}
+                                element={formElement}
+                                actionName={this.props.actions["PRIMITIVE_VALUE_CHANGE"]}
+                                value={this.getSelectedAnswer(formElement.concept, new PrimitiveValue())}
+                                validationResult={validationResult}
+                            />, uniqueKey, formElement.uuid === erroredUUID);
                         }
                     })
                 }

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

@@ -0,0 +1,138 @@
+import {Text, TouchableNativeFeedback, View, Modal, StyleSheet} from "react-native";
+import PropTypes from 'prop-types';
+import React from "react";
+import AbstractFormElement from "./AbstractFormElement";
+import ValidationErrorMessage from "../ValidationErrorMessage";
+import Colors from "../../primitives/Colors";
+import Fonts from "../../primitives/Fonts";
+import FormElementLabelWithDocumentation from "../../common/FormElementLabelWithDocumentation";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import QRScanner from "./QRScanner";
+import _ from "lodash";
+
+class QRFormElement extends AbstractFormElement {
+    static propTypes = {
+        element: PropTypes.object.isRequired,
+        actionName: PropTypes.string.isRequired,
+        value: PropTypes.object,
+        validationResult: PropTypes.object
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            showQRScanner: false
+        };
+    }
+
+    displayValue() {
+        const value = this.props.value.getValue();
+        return _.isNil(value) || value === '' 
+            ? this.I18n.t('tapToScanQR') 
+            : value;
+    }
+
+    openQRScanner() {
+        this.setState({ showQRScanner: true });
+    }
+
+    onQRRead(qrValue) {
+        this.setState({ showQRScanner: false });
+        if (qrValue) {
+            this.notifyChange(qrValue);
+        }
+    }
+
+    notifyChange(value) {
+        this.props.value.answer = value;
+        this.dispatchAction(this.props.actionName, {
+            formElement: this.props.element,
+            parentFormElement: this.props.parentElement,
+            questionGroupIndex: this.props.questionGroupIndex,
+            value: value
+        });
+    }
+
+    removeValue() {
+        this.notifyChange(null);
+    }
+
+    renderRemoveButton() {
+        const hasValue = !_.isNil(this.props.value.getValue()) && this.props.value.getValue() !== '';
+        if (hasValue) {
+            return (
+                <TouchableNativeFeedback onPress={() => this.removeValue()}
+                                         background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
+                                         useForeground>
+                    <Icon name="backspace"
+                          style={{marginLeft: 8, fontSize: 20, color: Colors.AccentColor}}/>
+                </TouchableNativeFeedback>
+            );
+        }
+        return null;
+    }
+
+    renderFormElement() {
+        const hasValue = !_.isNil(this.props.value.getValue()) && this.props.value.getValue() !== '';
+
+        return (
+            <View>
+                <FormElementLabelWithDocumentation element={this.props.element}/>
+                <View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
+                    <TouchableNativeFeedback onPress={() => this.openQRScanner()}
+                                             background={TouchableNativeFeedback.SelectableBackground()}>
+                        <View style={styles.qrInputContainer}>
+                            <Icon name="qrcode-scan" 
+                                  style={[styles.qrIcon, {color: hasValue ? Colors.AccentColor : Colors.InputBorderNormal}]}/>
+                            <Text style={[
+                                styles.qrText,
+                                {
+                                    color: _.isNil(this.props.validationResult) ? 
+                                        (hasValue ? Colors.InputNormal : Colors.InputBorderNormal) : 
+                                        Colors.ValidationError,
+                                    fontStyle: hasValue ? 'normal' : 'italic'
+                                }
+                            ]}>
+                                {this.displayValue()}
+                            </Text>
+                        </View>
+                    </TouchableNativeFeedback>
+                    {this.renderRemoveButton()}
+                </View>
+                <ValidationErrorMessage validationResult={this.props.validationResult}/>
+
+                <Modal
+                    visible={this.state.showQRScanner}
+                    animationType="slide"
+                    onRequestClose={() => this.onQRRead(null)}>
+                    <QRScanner onRead={(qrValue) => this.onQRRead(qrValue)} />
+                </Modal>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    qrInputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: Colors.InputBorderNormal,
+        borderRadius: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        backgroundColor: Colors.GreyContentBackground,
+        flex: 1,
+        minHeight: 44
+    },
+    qrIcon: {
+        fontSize: 20,
+        marginRight: 8
+    },
+    qrText: {
+        fontSize: Fonts.Large,
+        flex: 1
+    }
+});
+
+export default QRFormElement;