the 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": "[email protected]"
}
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",
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent