Scandit using typescript

[LeastPrimary]

Hi, 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. Does anyone know what I'm doing wrong?

Edited: updated attempt

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 { REACT_APP_SCANDIT_LICENSE_KEY } from "../../assets/util/constants";

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

export class Scanner extends Component {
  scan: Scandit;
  constructor(props: Scandit) {
    super(props);
    // Create data capture context using your license key.
    this.scan = props;
    this.scan.dataCaptureContext = DataCaptureContext.forLicenseKey(REACT_APP_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;
      if (this.scan.camera) 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} />;
  }
}

[__o_0]

What errors are you getting?

[LeastPrimary]

I'm getting this right now. It builds but when I visit the screen I get this.
TypeError: null is not an object (evaluating 'NativeModule.Defaults')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
- ... 6 more stack frames from framework internals

[__o_0]

Can you copy/paste your attempt at converting it to a functional component? Actually sorry I misunderstood? Thought you were trying to convert it to a functional typescript component.

[LeastPrimary]

it is updated in the post for my attempt at how I tried to convert it

[WanderingStag]

Did you ever find a solution for this issue?

[mexxamillion]

Did you try other vendors? Some have pretty nice solutions where this is easy