woonivers / react-native-document-scanner Goto Github PK

Hi,
i used your example code it works fine in iOS but in android after capturing the image i try to preview the image from the cache and i also store that in local in both case i'm getting the image without color both cropped and original image in android every version facing this issue. please provide some solution for this issue.

Thanks,
Subash

The current implementation save the image in the user device, so we need storage permissions.

We need to keep the image in a temp folder like react-native-camera.

"react": "16.9.0",
"react-native": "0.61.5",
the android version not error but ios is a error

The returned width and height, at least in Android, are incorrect: I took a 2250x4000 photo and it gives me width: 500 and height: 880.

@woonivers/react-native-document-scanner: v2.1.1
RN v0.61.5

When calling the ref.current.capture() method I get this error:

Exception 'This function must be called on the UIManager queue' was thrown while invoking capture on target RNPdfScannerManager with params (
    767
)

RCTFatal
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
2AFAF864-7F5C-3011-840D-B066E7377AF1
2AFAF864-7F5C-3011-840D-B066E7377AF1
_dispatch_main_queue_callback_4CF
93BD750D-2ECE-3E38-8405-9E46EFE482C6
93BD750D-2ECE-3E38-8405-9E46EFE482C6
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
9059087B-727B-3B45-B672-09E5B03E6020

react-native link is broken.

Related issues: Michaelvilleneuve#54 and Michaelvilleneuve#52

With IOS 13, It remains on the white screen after capturing.
React Native version: 0.61.2.

https://github.com/semantic-release/semantic-release

In Iphone i can get a color picture but in Android the lib just return a black & white.

Can someone help me?

"react-native": "0.59.9",
"@woonivers/react-native-document-scanner": "1.6.2"

Including @woonivers/react-native-document-scanner and react-native-camera into the same project currently breaks on iOS:

Component 'RNCamera' re-registered bubbling event 'topPictureTaken' as a direct event

Suggested fix is to use direct events instead of bubbling events, as described here.

Replicable with @woonivers/react-native-document-scanner == 2.0.1, react-native-camera == 3.15.0, and react-native == 0.60.6

Hi,

I am facing an issue where I am unable to use the usual "this.props.navigate.goBack()" from react-navigation.

From my main page, I go to a whole new page that contains nothing but the pdfscanner component, just like in your example.

Unfortunately from there, I would like to:

1- send back to previous page the cropped image that was scanned
2- go back to previous screen as well

Uppon tapping a button.

Any help would be greatly appreciated :)

Hi,

Great library, I would love to see this supported in Expo. Do you have plans to do it?

RN version: 0.60
@woonivers/react-native-document-scanner: 2.0.1

I have enableTorch={true} but flash doesn't turn on.

<DocumentScanner
        ref={(ref) => (this.scanner = ref)}
        style={styles.camera}
        onPictureTaken={(data) =>
          () => this.props.navigation.replace('ImageScreen', { image: data })
        }
        overlayColor="rgba(162,230,165, 0.7)"
        enableTorch={true}
        brightness={0.35}
        saturation={1}
        contrast={1.5}
        quality={1}
        detectionCountBeforeCapture={60000}
        detectionRefreshRateInMS={100}
      />

I am using fesoares/react-native-document-scanner. here is y code.

//
// alert(data.croppedImage)
}
overlayColor="rgba(255,130,0, 0.7)"
enableTorch={false}
quality={0.5}
saveOnDevice={true}
detectionCountBeforeCapture={5}
detectionRefreshRateInMS={50}
/>

    </View>
  But it is not working properly. What, s wrong with it. Scanner not properly focusing

Hello! I've tried implementing even the pure example, and from what I read in another response you gave in other issue, even though you add the manual capture, it always makes an auto capture after detecting rectangles, and it is too fast.

I found in an issue that setting: manualOnly={true} does it but when setting that prop, rectangle detection stops working, so it becomes a regular camera.

How can we stop it from auto capturing a picture? So we can let the user take it with the manual function and keep the rectangle detection.

"@woonivers/react-native-document-scanner": "^2.0.1",
"react": "16.9.0",
"react-native": "0.61.5"

Instead os just show a loading:

• Freeze de image
• Give the control os the loading state to React Native
• Add a shadow background

Following this article, we can create an example app to make it easier for people to try out this library.

I managed to get the @wooinvers/react-native-document-scanner to work with both iOS and Android by changing and customising a couple of things. While I have no issue on how the library works on iOS, I am having an issue on Android. The rectangle detection would not work at all. I created a prototype with the `react-native-document-scanner, which is in this link: https://github.com/rosenexpend/ScannerImageCropper

Hello,

React Native version: 0.62.2
Document Scanner version: 2.1.1

Working perfectly on iOS. On android it just shows a blank black screen as shown in the screenshot below. I've followed all the instructions in the installation guide as well.

Any idea what might be happening? Thanks in advance :)

I thought it first a fantastic task . But when working with this package nothing works as expected, just wasted a lot of time. Good for nothing package in android .

The deprecated android.hardware.Camera is currently being used.

It is necessary to upgrade to android.hardware.camera2

We need types! 💛

Please, I want this in my update ios phone 11 or 12 ,13

Android: gradle release build fails in verifyReleaseResources step.
Execution failed for task ':@woonivers_react-native-document-scanner:verifyReleaseResources'.

1 exception was raised by workers:
com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed

/Users/tranthaixoan/Desktop/RN/OrbitPrime/node_modules/@woonivers/react-native-document-scanner/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.

error: failed linking references.

How to reproduce :
cd android
./gradlew assembleRelease

Hey,

I am new to react native and am currently building a mobile app using react native for my final year project. I followed the steps perfectly and after a while of the project being built and executed, I get this error.

Would you know how I can fix this?

I appreciate all the help! :D

Is there any way this module can support scanning fixed size documents or rectangle of interest? One use-case is scanning business cards in which the user centers the document inside an overlay view.

My scanned documents are little blurry.
Is it possible to use scanner without compressing photos so the quality is unmodified?

java.lang.RuntimeException: Fail to connect to camera service

I have followed every steps to download this library as in documentation...but calling capture method on component ref doing nothing..I am trying to solve this problem since 2 days
Is it also require to download and configure opencv manually for this library?
Thanks in. advance....

Process 'command 'C:\Users\yukang\AppData\Local\Android\Sdk\build-tools\28.0.3\aidl.exe'' finished with non-zero exit value 1
i can not run the example

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"
}
})

how to fix it

The cropping of the photo is sometimes too much and we lose the edges.

• Return rectangleCoordinates in Android

Find a way to upload photos with a predefined size KB.
Not just the 60% of my fancy camera.

PS C:\Users\Yaniv\Desktop\shell3\easylinks> npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1046 file(s) to forward-jetify. Using 8 workers...
info JS server already running.
info Installing the app...


> Configure project :react-native-document-scanner
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed in version 5.0 of the Android Gradle plugin.
For more information, see http://d.android.com/r/tools/update-dependency-configurations.html.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.7/userguide/command_line_interface.html#sec:command_line_warnings

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\@woonivers\react-native-document-scanner\android\build.gradle' line: 32

* What went wrong:
A problem occurred evaluating project ':woonivers_react-native-document-scanner'.
> Project with path ':openCVLibrary310' could not be found in project ':woonivers_react-native-document-scanner'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\@woonivers\react-native-document-scanner\android\build.gradle' line: 32

* What went wrong:
A problem occurred evaluating project ':woonivers_react-native-document-scanner'.
> Project with path ':openCVLibrary310' could not be found in project ':woonivers_react-native-document-scanner'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

    at makeError (C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\execa\index.js:174:9)
    at C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:5)
    at async Command.handleAction (C:\Users\Yaniv\Desktop\shell3\easylinks\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:186:9)
info Run CLI with --verbose flag for more details.

any idea as to what could cause this error?

I followed the steps in the README.md, the react-native-document-scanner installed and is working correctly with an automatic capture on my test iPhone 5s. However, the manual capture is not working. I have read various issue threads here and tried this solution: https://github.com/Woonivers/react-native-document-scanner/pull/38/files
However, I am still getting the following error when I try to manually capture with ref similar to the example.

ExceptionsManager.js:173 Exception 'This function must be called on the UIManager queue' was thrown while invoking capture on target RNPdfScannerManager with params (
    149
)

Communicate to the user how to take the photo, if it should be zoomed in or out, if it should have more light, if it should have a dark background...

I asked this on the origin repo, but I guess that one doesn't work anymore or something. Anyway, I was wondering if it would be possible to make a CapacitorJS version of this cool plugin.

I'm running the example app, sometimes it only works on the first run.

On testing I have noticed that the plugin crashes when viewing QR code or an Bar code.

Think an elegant solution to finish al the opencv processes and the camera per se.

Possible it's done is a certain way.

no error and nothing in screen just white blank screen

Could you add or remove the documented/undocumented props from typescript typings please ?

We could publish it in @woonivers/react-native-document-scanner

If we are really hispter we can use GitHub Package Registry (beta)