Open justinkiang opened 5 years ago
There is no need to reset. Just make it so that the scanner component is rendered again.
... ` import React from 'react'
export default class Scanner extends React.Component { state = { image: null, // other state variables } // other stuff render () { // You use the image variable to either render the scanner or view image components // so all you need to do is reset image variable to null on user rejecting the image and the scanner // will be rendered instead of the view. if (image) return ( {/* Show Image. (either by rendering it here or in a modal. your choice) Button "Accept?" on Yes do whatever else with the image. else : **> this.setState({ image: null}) /} )
// image is null at this point. So go get one
return (
<DocumentScanner
useBase64
saveInAppDocument={false}
onPictureTaken={(data) => {
this.setState({
image: data.croppedImage,
initialImage: data.initialImage,
rectangleCoordinates: data.rectangleCoordinates
})
}}
overlayColor="rgb(255,130,0,0,7)"
enableTorch={this.state.flashEnabled}
useFrontCam={this.state.useFrontCam}
brightness={brightness}
saturation={saturation}
contrast={contrast}
quality={quality}
onRectangleDetect={({ stableCounter, lastDetectionType }) => this.setState({ stableCounter, lastDetectionType })}
detectionCountBeforeCapture={detectionCount}
detectionRefreshRateInMS={detectionRate}
style={styles.scanner}
/>
)
}
} `
I tried to toggle a state off and on in attempt to reset the scanner, but it didn't work. Screen remained gray.
Use case is that it detects a document, and then shows the cropped image in a modal. The user can choose to accept it or reject it. If the user rejects it, I need to reset the document scanner to make another try.
I tried this but didn't work `refuse(){ this.setState({docScannerOn:false},this.setState({docScannerOff:false}))}
render(){ return{docScannerOn && <DocumentScanner useBase64={false} onPictureTaken={data => this.setState({ frontImage: data.croppedImage, initialImage: data.initialImage, rectangleCoordinates: data.rectangleCoordinates, showScanResultModal:true, })} style={styles.preview} overlayColor="rgba(255,130,0, 0.7)" enableTorch={torchOn} brightness={0} saturation={1} contrast={1} quality={1} onRectangleDetect={({ stableCounter, lastDetectionType }) => this.setState({ stableCounter, lastDetectionType })} detectionCountBeforeCapture={25} detectionRefreshRateInMS={10} />}.......}`