Self-made component error

I am trying to add react-native-vision-camera and vision-camera-code-scanner to my custom component in order to read QR codes. When testing on iOS, I encountered the following error:

2023-04-15 00:05:55.514064+0900 Adalo App[5047:1596225] [javascript] Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

My code is as follows:

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
import {
  Camera,
  useCameraDevices,
  useFrameProcessor,
} from "react-native-vision-camera";
import { scanBarcodes, BarcodeFormat } from "vision-camera-code-scanner";

class VisionCamera extends Component {
  state = {
    width: null,
  };
  devices = useCameraDevices("wide-angle-camera");
  device = devices.back;
  handleLayout = ({ nativeEvent }) => {
    const { width } = (nativeEvent && nativeEvent.layout) || {};
    const { width: prevWidth } = this.state;
    if (width !== prevWidth) {
      this.setState({ width });
    }
  };

  render() {
    const { _height } = this.props;

    let realStyles = {
      container: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: _height,
        width: "100%",
        backgroundColor: "#051523",
      },
    };
    style = StyleSheet.absoluteFill;
    return (
      <View style={realStyles.container} onLayout={this.handleLayout}>
        {this.state.width && (
          <Camera
            style={style}
            device={device}
            isActive={true}
            frameProcessor={useFrameProcessor((frame) => {
              "worklet";
              const detectedBarcodes = scanBarcodes(
                frame,
                [BarcodeFormat.QR_CODE],
                {
                  checkInverted: true,
                }
              );
              console.log("detectedBarcodes", detectedBarcodes);
              //runOnJS(setBarcodes)(detectedBarcodes);
            }, [])}
          />
        )}
        <Text style={{ color: "red" }}>
          detectedBarcodes:{detectedBarcodes}{" "}
        </Text>
      </View>
    );
  }
}
export default VisionCamera;

Where did I go wrong?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.