Scandit using typescript

I wanted to convert this repo(in this particular file) to use typescript. My problem is that I'm not too familiar with using classes. So far I have done this, however, I'm still getting errors.

The issues that I'm facing are that scan gives the error "Property 'scan' has no initializer and is not definitely assigned in the constructor." as well as Property 'scan' is used before being assigned. As well as the type for viewRef seems to be incorrect. I haven't been able to find anything about what types are supposed to be used.

Does anyone know what I'm doing wrong?

import React, { Component } from "react";
import { Alert, AppState, BackHandler } from "react-native";
import {
  BarcodeCapture,
  BarcodeCaptureOverlay,
  BarcodeCaptureOverlayStyle,
  BarcodeCaptureSettings,
  Symbology,
  SymbologyDescription,
  BarcodeCaptureListener,
} from "scandit-react-native-datacapture-barcode";
import {
  Camera,
  CameraSettings,
  DataCaptureContext,
  DataCaptureView,
  FrameSourceState,
  RectangularViewfinder,
  RectangularViewfinderStyle,
  RectangularViewfinderLineStyle,
  VideoResolution,
} from "scandit-react-native-datacapture-core";
import { styles } from "./styles";

import { requestCameraPermissionsIfNeeded } from "./camera-permission-handler";
import { SCANDIT_LICENSE_KEY } from "../../assets/util/constants";

interface Scandit {
  dataCaptureContext?: DataCaptureContext;
  viewRef?: DataCaptureView;
  barcodeCaptureMode: BarcodeCapture;
  camera?: Camera;
  barcodeCaptureListener?: BarcodeCaptureListener;
  overlay: BarcodeCaptureOverlay;
}

export class Scanner extends Component<Scandit> {
  scan: Scandit;
  constructor(props: Scandit) {
    super(props);
     this.scan = props;
    // Create data capture context using your license key.
    this.scan.dataCaptureContext = DataCaptureContext.forLicenseKey(SCANDIT_LICENSE_KEY);
    this.scan.viewRef = React.createRef();
  }

  componentDidMount() {
    AppState.addEventListener("change", this.handleAppStateChange);
    this.setupScanning();
  }

  componentWillUnmount() {
    AppState.removeEventListener("change", this.handleAppStateChange);
    if (this.scan.dataCaptureContext) this.scan.dataCaptureContext.dispose();
  }

  handleAppStateChange = async (nextAppState: string) => {
    if (nextAppState.match(/inactive|background/)) {
      this.stopCapture();
    } else {
      this.startCapture();
    }
  };

  startCapture() {
    this.startCamera();
    this.scan.barcodeCaptureMode.isEnabled = true;
  }

  stopCapture() {
    this.scan.barcodeCaptureMode.isEnabled = false;
    this.stopCamera();
  }

  stopCamera() {
    if (this.scan.camera) {
      this.scan.camera.switchToDesiredState(FrameSourceState.Off);
    }
  }

  startCamera() {
    if (!this.scan.camera) {
      // Use the world-facing (back) camera and set it as the frame source of the context. The camera is off by
      // default and must be turned on to start streaming frames to the data capture context for recognition.
      this.scan.camera = Camera.default;
      this.scan.dataCaptureContext.setFrameSource(this.scan.camera);

      const cameraSettings = new CameraSettings();
      cameraSettings.preferredResolution = VideoResolution.FullHD;
      this.scan.camera.applySettings(cameraSettings);
    }

    // Switch camera on to start streaming frames and enable the barcode capture mode.
    // The camera is started asynchronously and will take some time to completely turn on.
    requestCameraPermissionsIfNeeded()
      .then(() => {
        if (this.scan.camera) this.scan.camera.switchToDesiredState(FrameSourceState.On);
      })
      .catch(() => BackHandler.exitApp());
  }

  setupScanning() {
    // The barcode capturing process is configured through barcode capture settings
    // and are then applied to the barcode capture instance that manages barcode recognition.
    const settings = new BarcodeCaptureSettings();

    // The settings instance initially has all types of barcodes (symbologies) disabled. For the purpose of this
    // sample we enable a very generous set of symbologies. In your own app ensure that you only enable the
    // symbologies that your app requires as every additional enabled symbology has an impact on processing times.
    settings.enableSymbologies([
      Symbology.EAN13UPCA,
      Symbology.EAN8,
      Symbology.UPCE,
      Symbology.QR,
      Symbology.DataMatrix,
      Symbology.Code39,
      Symbology.Code128,
      Symbology.InterleavedTwoOfFive,
    ]);

    // Some linear/1d barcode symbologies allow you to encode variable-length data. By default, the Scandit
    // Data Capture SDK only scans barcodes in a certain length range. If your application requires scanning of one
    // of these symbologies, and the length is falling outside the default range, you may need to adjust the "active
    // symbol counts" for this symbology. This is shown in the following few lines of code for one of the
    // variable-length symbologies.
    const symbologySettings = settings.settingsForSymbology(Symbology.Code39);
    symbologySettings.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    // Create new barcode capture mode with the settings from above.
    this.scan.barcodeCaptureMode = BarcodeCapture.forContext(this.scan.dataCaptureContext, settings);

    // Register a listener to get informed whenever a new barcode got recognized.
    this.scan.barcodeCaptureListener = {
      didScan: (_: any, session: { newlyRecognizedBarcodes: any[] }) => {
        const barcode = session.newlyRecognizedBarcodes[0];
        const symbology = new SymbologyDescription(barcode.symbology);

        // The `alert` call blocks execution until it's dismissed by the user. As no further frames would be processed
        // until the alert dialog is dismissed, we're showing the alert through a timeout and disabling the barcode
        // capture mode until the dialog is dismissed, as you should not block the BarcodeCaptureListener callbacks for
        // longer periods of time. See the documentation to learn more about this.
        this.scan.barcodeCaptureMode.isEnabled = false;

        Alert.alert(
          "null",
          `Scanned: ${barcode.data} (${symbology.readableName})`,
          [{ text: "OK", onPress: () => (this.scan.barcodeCaptureMode.isEnabled = true) }],
          { cancelable: false }
        );
      },
    };

    this.scan.barcodeCaptureMode.addListener(this.scan.barcodeCaptureListener);

    // Add a barcode capture overlay to the data capture view to render the location of captured barcodes on top of
    // the video preview, using the Frame overlay style. This is optional, but recommended for better visual feedback.
    this.scan.overlay = BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
      this.scan.barcodeCaptureMode,
      this.scan.viewRef.current,
      BarcodeCaptureOverlayStyle.Frame
    );
    this.scan.overlay.viewfinder = new RectangularViewfinder(RectangularViewfinderStyle.Square, RectangularViewfinderLineStyle.Light);

    this.scan.overlay = this.scan.overlay;
  }

  render() {
    return <DataCaptureView style={styles.container} context={this.scan.dataCaptureContext} ref={this.scan.viewRef} />;
  }
}
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum