I am using react-native document scanner. I am using example code to scan documents. Documents preview and focus is not good. Any Help?
import React, { useRef, useState, useEffect } from "react"
import { View, StyleSheet, Text, TouchableOpacity, Image,PermissionsAndroid, Platform } from "react-native"
//import Permissions from 'react-native-permissions';
import PDFScanner from "@fesoares/react-native-document-scanner"
export default function ScanDoc() {
const pdfScannerElement = useRef(null)
const [data, setData] = useState({})
const [allowed, setAllowed] = useState(false)
useEffect(() => {
async function requestCamera() {
//const result = await Permissions.request(Platform.OS === "android" ? "android.permission.CAMERA" : "ios.permission.CAMERA")
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'Horizon Go',
'message': 'Horizon Go access to your camera. '
}
)
if (granted === "granted") setAllowed(true)
}
requestCamera()
}, [])
function handleOnPressRetry() {
setData({})
}
function handleOnPress() {
pdfScannerElement.current.capture()
}
if (!allowed) {
console.log("You must accept camera permission")
return (
You must accept camera permission
)
}
if (data.croppedImage) {
console.log("data", data)
return (
<React.Fragment>
<Image source={{ uri: data.croppedImage }} style={styles.preview} />
{' Retry '}
</React.Fragment>
)
}
return (
<React.Fragment>
<PDFScanner
ref={pdfScannerElement}
style={styles.scanner}
onPictureTaken={setData}
overlayColor="rgba(255,130,0, 0.7)"
enableTorch={false}
quality={0.5}
saveOnDevice={true}
onRectangleDetect={() => alert('StableCounter ') }
detectionCountBeforeCapture={5}
detectionRefreshRateInMS={50}
/>
{' Take picture '}
</React.Fragment>
)
}
const styles = StyleSheet.create({
scanner: {
flex: 1,
aspectRatio: undefined
},
button: {
alignSelf: "center",
position: "absolute",
bottom: 32,
backgroundColor: '#0071BC',
borderColor: '#0071BC',
borderWidth: 1,
borderRadius: 8,
height:48,
},
buttonText: {
//backgroundColor: "rgba(245, 252, 255, 0.7)",
fontSize: 30,
//color:'white'
/* paddingLeft:20,
paddingRight:20,
paddingTop:8,
paddingBottom:8, */
color: 'white',
fontWeight:'200',
//fontFamily:'Museo Sans',
textAlign:'center',
},
preview: {
flex: 1,
width: "100%",
resizeMode: "cover",
},
permissions: {
flex:1,
justifyContent: "center",
alignItems: "center"
}
})