Michaelvilleneuve / react-native-document-scanner

Document scanner, features live border detection, perspective correction, image filters and more ! 📲📸
MIT License
843 stars 289 forks source link

Any ways to reset camera? #42

Open justinkiang opened 5 years ago

justinkiang commented 5 years ago

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} />}.......}`

SAnegondhi commented 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}
    />
)

}

} `