How to add text inside of the Camera View when using react-native-qrcode-scanner in react native

Question

I am now using react-native-qrcode-scanner to read the QRcode but now have trouble when trying to add the text inside of the camera view. (Not top or bottom of the camera view but inside of it - more exactly under the marker position with align center)

The text is not displayed even though I add Text field with position: 'absolute'

import QRCodeScanner from 'react-native-qrcode-scanner';

  return (
    <QRCodeScanner
      onRead={onSuccess}
      reactivate={true}
      showMarker
      containerStyle={styles.cameraContainer}
      cameraStyle={{
        ...styles.camera,
        height: Dimensions.get('window').height - topOffset,
      }}
      topViewStyle={styles.topView}
      markerStyle={styles.marker}
      bottomViewStyle={styles.bottomView}
      cameraProps={{
        type: 'back',
      }}
    />
  );

const styles = StyleSheet.create({
  cameraContainer: {
    backgroundColor: theme.colors.background,
  },
  camera: {},
  bottomView: {
    height: 0,
    flex: 0,
  },
  topView: {
    height: 0,
    flex: 0,
  },
  marker: {
    borderWidth: 2,
    borderRadius: 10,
    borderColor: theme.colors.white,
  }
});

Answer 1

Following sample works for me on iOS:

/* eslint-disable react-native/no-color-literals */
// @ts-nocheck
import React from "react"
// eslint-disable-next-line react-native/split-platform-components
import { View, StyleSheet, TouchableOpacity, Text, ToastAndroid } from "react-native"
import QRCodeScanner from "react-native-qrcode-scanner"
import { RNCamera } from "react-native-camera"
import Clipboard from "@react-native-community/clipboard"

const styles = StyleSheet.create({
  cameraContainer: {
    flex: 1,
  },
  container: {
    backgroundColor: "#fff",
    flex: 1,
    height: "100%",
    width: "100%",
  },
  flash: {
    alignItems: "center",
    backgroundColor: "#CCC",
    borderRadius: 19,
    height: 38,
    justifyContent: "center",
    position: "absolute",
    right: 20,
    top: 20,
    width: 100,
    zIndex: 1,
  },
  markerStyle: {
    borderColor: "#ffffff",
    top: -40,
  },
})

export const BarcodeScannerScreen: React.FC = () => {
  const [flashOn, setFlashOn] = React.useState(false)

  const barcodeScanned = (barcode) => {
    ToastAndroid.show("Code copied to clipboard", ToastAndroid.LONG)
    Clipboard.setString(JSON.stringify(barcode.data))
    console.log("Barcode: ", barcode.data)
  }

  const toggleFlash = () => {
    setFlashOn(!flashOn)
  }

  const androidCameraPermissionOptions = {
    title: "Camera permission required",
    message: "To test QR-Code scan camera permission is required",
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.flash} onPress={toggleFlash}>
        <Text>Flash on</Text>
      </TouchableOpacity>
      <QRCodeScanner
        onRead={barcodeScanned}
        cameraProps={{
          androidCameraPermissionOptions: androidCameraPermissionOptions,
          flashMode: flashOn
            ? RNCamera.Constants.FlashMode.torch
            : RNCamera.Constants.FlashMode.off,
          barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
          type: RNCamera.Constants.Type.back,
        }}
        showMarker={true}
        reactivate={true}
        reactivateTimeout={3000}
        cameraStyle={styles.cameraContainer}
        markerStyle={styles.markerStyle}
      />
      <View
        style={{
          position: "absolute",
          alignSelf: "center",
          top: 300,
          width: 50,
          height: 50,
          backgroundColor: "#ff00ff",
        }}
      >
        <Text>Text</Text>
      </View>
    </View>
  )
}
/* eslint-disable react-native/no-color-literals */
// @ts-nocheck
import React from "react"
// eslint-disable-next-line react-native/split-platform-components
import { View, StyleSheet, TouchableOpacity, Text, ToastAndroid } from "react-native"
import QRCodeScanner from "react-native-qrcode-scanner"
import { RNCamera } from "react-native-camera"
import Clipboard from "@react-native-community/clipboard"

const styles = StyleSheet.create({
  cameraContainer: {
    flex: 1,
  },
  container: {
    backgroundColor: "#fff",
    flex: 1,
    height: "100%",
    width: "100%",
  },
  flash: {
    alignItems: "center",
    backgroundColor: "#CCC",
    borderRadius: 19,
    height: 38,
    justifyContent: "center",
    position: "absolute",
    right: 20,
    top: 20,
    width: 100,
    zIndex: 1,
  },
  markerStyle: {
    borderColor: "#ffffff",
    top: -40,
  },
})

export const BarcodeScannerScreen: React.FC = () => {
  const [flashOn, setFlashOn] = React.useState(false)

  const barcodeScanned = (barcode) => {
    ToastAndroid.show("Code copied to clipboard", ToastAndroid.LONG)
    Clipboard.setString(JSON.stringify(barcode.data))
    console.log("Barcode: ", barcode.data)
  }

  const toggleFlash = () => {
    setFlashOn(!flashOn)
  }

  const androidCameraPermissionOptions = {
    title: "Camera permission required",
    message: "To test QR-Code scan camera permission is required",
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.flash} onPress={toggleFlash}>
        <Text>Flash on</Text>
      </TouchableOpacity>
      <QRCodeScanner
        onRead={barcodeScanned}
        cameraProps={{
          androidCameraPermissionOptions: androidCameraPermissionOptions,
          flashMode: flashOn
            ? RNCamera.Constants.FlashMode.torch
            : RNCamera.Constants.FlashMode.off,
          barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
          type: RNCamera.Constants.Type.back,
        }}
        showMarker={true}
        reactivate={true}
        reactivateTimeout={3000}
        cameraStyle={styles.cameraContainer}
        markerStyle={styles.markerStyle}
      />
      <View
        style={{
          position: "absolute",
          alignSelf: "center",
          top: 300,
          width: 50,
          height: 50,
          backgroundColor: "#ff00ff",
        }}
      >
        <Text>Text</Text>
      </View>
    </View>
  )
}