Frame Processor Error: crop is not a function (it is undefined), js engine: VisionCamera

[xulihang]

You need to update the babel.conf.js file according to the readme.

Then run the following to reset the cache.

npx react-native start --reset-cache

[digabbar]

not happening tried everything you said

i installed this package from npm npm install vision-camera-cropper

[tony-xlh]

You also need to install react-native-worklets-core

[rochfeu]

Hi, I have the same error. I already use other FrameProcesors and they work. I already have the babel.conf and react-native-worklets-core@1.3.3 installed.

[digabbar]

@rochfeu use v1.1.0

[rochfeu]

Ahh. 😢 I need to use 1.3.3 for another frameProcessor.

[firofame]

using "react-native-worklets-core": "1.1.0" console.log(crop); // undefined

[Levinardo]

he following error show i have tried every thing from the previous explained issue nothing works , upgraded my react native from 0.72.6 to 0.75.2 and tried every other alternative it didnt worked

package.json file: { "name": "fleetmanagement", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-masked-view/masked-view": "^0.3.0", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "@react-navigation/stack": "^6.3.20", "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "date-fns": "^2.30.0", "moment": "^2.30.1", "moment-range": "^4.0.2", "mrz": "^4.2.0", "react": "18.3.1", "react-native": "0.75.2", "react-native-android-location-services-dialog-box": "^2.8.2", "react-native-autocomplete-dropdown": "^3.1.5", "react-native-autocomplete-input": "^5.4.0", "react-native-blob-util": "^0.19.2", "react-native-canvas": "^0.1.39", "react-native-canvas-signature": "^1.0.2", "react-native-date-picker": "^4.3.3", "react-native-dropdown-picker": "^5.4.6", "react-native-eject": "^0.2.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.18.1", "react-native-image-picker": "^7.1.2", "react-native-maps": "^1.14.0", "react-native-onesignal": "^5.2.0", "react-native-paper": "^5.11.4", "react-native-rename": "^3.2.14", "react-native-safe-area-context": "^4.10.1", "react-native-screens": "^3.27.0", "react-native-share": "^9.4.1", "react-native-signature-canvas": "^4.7.1", "react-native-simple-toast": "^3.0.2", "react-native-svg": "^14.2.0", "react-native-swipe-list-view": "^3.2.9", "react-native-table-component": "^1.2.2", "react-native-toast-message": "^2.1.7", "react-native-vector-icons": "^10.0.3", "react-native-vision-camera": "^4.5.2", "react-native-webview": "^13.6.4", "react-native-worklets-core": "1.1.0", "vision-camera-cropper": "^1.0.0", "vision-camera-dynamsoft-label-recognizer": "^2.1.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.75.2", "@react-native/eslint-config": "^0.75.2", "@react-native/metro-config": "^0.75.2", "@react-native/typescript-config": "0.75.2", "@types/react": "^18.2.6", "@types/react-native-table-component": "^1.2.8", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "packageManager": "yarn@3.6.4" }

babel.config,js:

module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [['react-native-worklets-core/plugin']], };

index.tsx // for using this library import { useEffect, useState } from "react"; import { View, Text, StyleSheet, Pressable, Platform } from "react-native"; import Svg, { Rect } from "react-native-svg"; import { Camera, useCameraDevice, useCameraFormat, useFrameProcessor } from "react-native-vision-camera"; import { Worklets, useSharedValue } from "react-native-worklets-core"; import { CropRegion, crop } from "vision-camera-cropper";

export interface CameraScreenProps { route:any; navigation:any; }

export default function CameraScreen(props:CameraScreenProps){ const [hasPermission, setHasPermission] = useState(false); const [isActive,setIsActive] = useState(true); const device = useCameraDevice("back"); const format = useCameraFormat(device, [ { videoResolution: { width: 1920, height: 1080 } }, { fps: 30 } ]) const [cropRegion,setCropRegion] = useState({ left: 10, top: 20, width: 80, height: 30 }); const cropRegionShared = useSharedValue<undefined|CropRegion>(undefined); const shouldTake = useSharedValue(false); const [pressed,setPressed] = useState(false); const capture = () => { shouldTake.value=true; }

const adaptCropRegionForIDCard = () => { let size = getFrameSize(); let regionWidth = 0.8size.width; let desiredRegionHeight = regionWidth/(85.6/54); let height = Math.ceil(desiredRegionHeight/size.height100); let region = { left:10, width:80, top:20, height:height }; setCropRegion(region); cropRegionShared.value = region; }

const getViewBox = () => { const frameSize = getFrameSize(); const viewBox = "0 0 "+frameSize.width+" "+frameSize.height; return viewBox; }

const getFrameSize = ():{width:number,height:number} => { let size = {width:1080,height:1920}; return size; }

const onCaptured = (base64:string) => { setIsActive(false); if (props) { if (props.navigation) { props.navigation.navigate({ name: 'Card', params: { base64: base64 }, merge: true, }); } } }

const onCapturedJS = Worklets.createRunOnJS(onCaptured);

const frameProcessor = useFrameProcessor((frame) => { 'worklet';

if (shouldTake.value && cropRegionShared.value) { shouldTake.value = false;

const result = crop(frame, { cropRegion: cropRegionShared.value, includeImageBase64: true, saveAsFile: false });

if (result?.base64) { onCapturedJS(result.base64); } } }, []);

useEffect(() => { (async () => { const status = await Camera.requestCameraPermission(); setHasPermission(status === 'granted'); setIsActive(true); adaptCropRegionForIDCard(); })(); }, []);

return (

{device != null && hasPermission && ( <>

</> )}

<Pressable onPressIn={()=>{setPressed(true)}} onPressOut={()=>{setPressed(false)}} onPress={()=>{capture()}}>

<View style={[styles.innerCircle, pressed ? styles.circlePressed:null]}>

) }

const styles = StyleSheet.create({ bottomBar:{ position: "absolute", width: "100%", bottom: 0, height: 60, flexDirection:"row", justifyContent:"center", }, outerCircle: { width: 60, height: 60, borderRadius: 60 / 2, backgroundColor: "lightgray", display:"flex", alignItems:"center", justifyContent:"center", }, innerCircle: { width: 45, height: 45, borderRadius: 45 / 2, backgroundColor: "white", }, circlePressed: { backgroundColor: "lightgray", } });

[xulihang]

Should be fixed in v1.3.0. https://github.com/tony-xlh/vision-camera-cropper/issues/9