ios – Methods to seize a selected portion of the display screen when capturing a picture in expo react native

Have you ever seen apps like Math Papa, or PhotoMath, the place the digicam captures a selected portion in view on the display screen?
I wish to implement the identical however in my case the ScanningArea View.
I’ve tried completely different strategies which hasn’t been actually working, can anybody please assist me, I will extremely respect it, Here is my code:

import { StyleSheet, Textual content, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import Header from '../elements/math_scanner/Header'
import { Digital camera, CameraType } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '@expo/vector-icons';
import SnapPictureBtn from '../elements/math_scanner/SnapPictureBtn';
import { useNavigation } from '@react-navigation/native';
import { Picture } from 'react-native-elements';

export default perform MathScannerScreen() {
const navigation = useNavigation();
const [type, setType] = useState(CameraType.again);
const [hasPermission, setHasPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);

const askPermission = async () => {
    const { standing } = await Permissions.askAsync(Permissions.CAMERA);
    setHasPermission(standing === 'granted');
}

useEffect(() => {
    askPermission();
}, []);

if (hasPermission === null) {
    askPermission();
    return <View />;
}
if (hasPermission === false) {
    return <Textual content>No entry to digicam</Textual content>;
}


const takePicture = async () => {
    if (digicam) {
        const choices = { high quality: 0.5, base64: true };
        const { uri } = await digicam.takePictureAsync(choices);
        console.log('unique picture uri:', uri);
        setImageUri(uri)
    }
};
  
return (
  <View model={types.container}>
    {imageUri ? (
            <Picture supply={{ uri: imageUri }} model={{ width: 300, peak: 250 }} 
         resizeMode="comprise" zoom={0} />
        : (
        <Digital camera model={types.digicam} sort={sort} ref={(ref) => setCamera(ref)}>
        <View model={types.overlay} />
        <Header />
        <View model={{width: '100%', alignItems: 'heart', justifyContent: 'heart', marginVertical: 30}}>
        <View model={types.textContainer}>
            <Textual content model={types.textual content}>Take an image of your math downside</Textual content>
        </View>
        <View model={types.scanningArea}>
            <Ionicons title="ios-add" measurement={30} coloration="#fff" />
        </View>

        </View>
        <View model={{marginTop: 30}} />
        <SnapPictureBtn onPress={takePicture} />
        <TouchableOpacity onPress={()=> navigation.goBack()} model={types.calcBtn}>
            <Ionicons title="ios-calculator-sharp" measurement={30} coloration="#000" />
        </TouchableOpacity>
        </Digital camera>
    )}
</View>
 )
}

const types = StyleSheet.create({
   container: {
    flex: 1,
    alignItems: 'heart',
    justifyContent: 'heart',
   },
   digicam: {
    width: '100%',
    peak: '100%',
    alignItems: 'heart',
    justifyContent: 'heart',
    backgroundColor: '#fff'
   },
   overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    width: '100%',
    peak: '100%',
    place: 'absolute',
    high: 0
   },
   scanningArea: {
    width: 350,
    peak: 150,
    alignItems: 'heart',
    justifyContent: 'heart',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
   },
   textContainer: {
    paddingVertical: 20
   },
   textual content: {
    fontWeight: 'daring',
    coloration: '#fff'
   },
   calcBtn: {
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 50
   }
 })