QR code reader? #853
-
|
Can an hyper view app read a QR code? This is becoming crucial with passcodes and webauth. Thanks. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
At Instawork, we have a custom element, that relies on react-native-camera. If you haven't yet, read more about Hyperview custom elements. Here's the simplified code for the component itself: import Hyperview, { Events } from 'hyperview';
import React, { PureComponent } from 'react';
import { RNCamera } from 'react-native-camera';
const NAMESPACE = 'https://yourdomain.com/hyperview-qr-code-reader';
export default class HyperviewQrCodeReader extends PureComponent {
static localName = 'qr-code-reader';
static namespaceURI = NAMESPACE;
static getFormInputValues = element => {
return [
[
element.getAttributeNS(NAMESPACE, 'name') || 'qr-code-reader-field',
element.getAttributeNS(NAMESPACE, 'value') || '',
],
];
};
createStyle = styleAttr => {
return Hyperview.createStyleProp(this.props.element, this.props.stylesheets, {
...this.props.options,
styleAttr,
});
};
// event type: https://react-native-camera.github.io/react-native-camera/docs/rncamera#onbarcoderead
onQrCodeRead = event => {
if (event.data === this.props.element.getAttributeNS(NAMESPACE, 'value')) {
return;
}
this.props.element.setAttributeNS(NAMESPACE, 'value', event.data);
const eventName =
this.props.element.getAttributeNS(NAMESPACE, 'qr-code-read-event') || 'qr-code-read';
Events.dispatch(eventName);
};
render() {
const cameraStyle = this.createStyle('style');
return (
<RNCamera
barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
captureAudio={false}
defaultTouchToFocus
onBarCodeRead={this.onQrCodeRead}
style={cameraStyle}
type={RNCamera.Constants.Type.back}
/>
);
}
}then, in your Hyperview markup, you can invoke the component as such: <doc xmlns="https://hyperview.org/hyperview">
<styles>
<style id="flex-1" flex="1" />
</styles>
<screen>
<body>
<form id="code-scanning" xmlns="https://hyperview.org/hyperview">
<behavior
trigger="on-event"
event-name="code-scanned"
verb="post"
action="replace"
target="code-scanning"
href="/code"
/>
<hcr:qr-code-reader
xmlns:hcr="https://yourdomain.com/hyperview-qr-code-reader"
style="flex-1"
hcr:qr-code-read-event="code-scanned"
hcr:name="code"
/>
</form>
</body>
</screen>
</doc>Upon reading the code, the custom component will fire off an event (identified as Hope that helps! |
Beta Was this translation helpful? Give feedback.
At Instawork, we have a custom element, that relies on react-native-camera.
If you haven't yet, read more about Hyperview custom elements.
Here's the simplified code for the component itself: