QR overlay issue

App.tsx

import { StatusBar } from 'expo-status-bar'
import { useEffect, useRef, useState } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import { Polygon, Svg } from 'react-native-svg'
import {
  Camera,
  Templates,
  useCameraDevice,
  useCameraFormat,
  useCameraPermission,
  useCodeScanner,
} from 'react-native-vision-camera'

export default function App() {
  const [targetFps] = useState(60)

  const { width: viewWidth, height: viewHeight } = Dimensions.get('window')
  const [polygonPoints, setPolygonPoints] = useState('')

  const codeScanner = useCodeScanner({
    codeTypes: ['qr'],
    onCodeScanned: (codes, frame) => {
      console.log(codes[0], frame)
      if (codes.length > 0 && codes[0]?.frame && codes[0]?.corners) {
        const { x, y, width, height } = codes[0].frame
        const points = codes[0].corners.map((corner) => ({
          x: corner.x,
          y: corner.y,
        }))

        setPolygonPoints(points.map((p) => `${p.x},${p.y}`).join(' '))
      }
    },
  })

  const camera = useRef<Camera>(null)

  const { hasPermission, requestPermission } = useCameraPermission()

  const device = useCameraDevice('back')
  const format = useCameraFormat(device, Templates.Photo)

  const fps = Math.min(format?.maxFps ?? 1, targetFps)

  useEffect(() => {
    !hasPermission && requestPermission()
  }, [hasPermission, requestPermission])

  useEffect(() => {
    // Re-render the Svg component when the polygonPoints state changes
    // This will update the overlay with the QR code position and area
  }, [polygonPoints])

  if (!device || !hasPermission) return null

  return (
    <View style={styles.container}>
      <Camera
        ref={camera}
        fps={fps}
        zoom={1}
        isActive={true}
        pixelFormat="yuv"
        device={device}
        orientation="portrait"
        format={format}
        torch={'off'}
        codeScanner={codeScanner}
        enableZoomGesture={true}
        resizeMode="cover"
        style={StyleSheet.absoluteFill}
        onError={console.error}
      />
      <Svg height="100%" width="100%" viewBox={`0 0 ${viewWidth} ${viewHeight}`}>
        <Polygon points={polygonPoints} fill="none" stroke="red" strokeWidth="2" />
      </Svg>
      <StatusBar style="light" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})