Skip to content

Commit 58e716d

Browse files
jorgemastajorgemasta
authored
Merge pull request #19 from Woonivers/feat/react-native-0.60.0
Support for react native 0.60.0+
2 parents 8ccdf47 + 988291c commit 58e716d

File tree

31 files changed

+1983
-1935
lines changed

31 files changed

+1983
-1935
lines changed

‎README.md‎

Lines changed: 72 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
11
![Demo gif](https://raw.githubusercontent.com/Michaelvilleneuve/react-native-document-scanner/master/images/demo.gif)
22

3-
## Set up dev environment
4-
5-
[Medium article](https://medium.com/@charpeni/setting-up-an-example-app-for-your-react-native-library-d940c5cf31e4)
3+
# `@woonivers/react-native-document-scanner`
64

7-
# React Native Document Scanner
5+
[![CircleCI Status](https://img.shields.io/circleci/project/github/Woonivers/react-native-document-scanner/master.svg)](https://circleci.com/gh/Woonivers/workflows/react-native-document-scanner/tree/master) ![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios%20-lightgrey.svg) ![MIT License](https://img.shields.io/npm/l/@react-native-community/netinfo.svg)
86

9-
Live document detection library. Returns either a URI or a base64 encoded string of the captured image, allowing you to easily store it or use it as you wish !
10-
11-
Features :
7+
Live document detection library. Returns either a URI of the captured image, allowing you to easily store it or use it as you wish!
128

139
- Live detection
1410
- Perspective correction and crop of the image
15-
- Live camera filters (brightness, saturation, contrast)
1611
- Flash
17-
- Easy to use base64 image
1812

19-
#### Can be easily plugged with [react-native-perspective-image-cropper](https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper)
13+
## Getting started
2014

21-
![Demo crop gif](https://camo.githubusercontent.com/0ac887deaa7263172a5fd2759dba3d692e98585a/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f6d69636861656c76696c6c656e657576652f64656d6f2d63726f702e676966)
15+
Version `>=2.0.0` is thinking to work with React Native >= 0.60
2216

23-
## Both Platform
17+
> Use [version `1.6.2`](https://github.com/Woonivers/react-native-document-scanner/tree/v1.6.2) if you are using React Native 0.59
2418
25-
Use version >=1.4.1 if you are using react-native 0.48+
19+
Install the library using either yarn:
2620

27-
`$ npm install @woonivers/react-native-document-scanner --save`
21+
```sh
22+
yarn add @woonivers/react-native-document-scanner`
23+
```
2824

29-
`$ react-native link @woonivers/react-native-document-scanner`
25+
or npm:
3026

31-
Edit the `info.plist` file in XCode and add the following permission : `NSCameraUsageDescription`
27+
```sh
28+
npm install @woonivers/react-native-document-scanner --save
29+
```
3230

33-
Remember, this library uses your device camera, you can't run it on a simulator.
31+
Remember, this library uses your device's camera, **it cannot run on a simulator** and you must request **camera permission** by your own.
3432
35-
### iOS if you want to use Cocoapods instead of default linking
33+
### iOS Only
3634
37-
If you want to use Cocoapods insteads of `react-native link`, add the following to your Podfile
35+
CocoaPods on iOS needs this extra step:
3836
39-
```
40-
pod 'RNPdfScanner', :path => '../node_modules/@woonivers/react-native-document-scanner/ios'
37+
```sh
38+
cd ios && pod install && cd ..
4139
```
4240
4341
### Android Only
@@ -72,80 +70,69 @@ Add Camera permissions request:
7270
## Usage
7371
7472
```javascript
75-
import React, { Component } from "react"
73+
import React, { Component, useRef } from "react"
7674
import { View, Image } from "react-native"
7775
7876
import DocumentScanner from "react-native-document-scanner"
7977
80-
class YourComponent extends Component {
81-
render() {
82-
return (
83-
<View>
84-
<DocumentScanner
85-
useBase64
86-
saveInAppDocument={false}
87-
onPictureTaken={data =>
88-
this.setState({
89-
image: data.croppedImage,
90-
initialImage: data.initialImage,
91-
rectangleCoordinates: data.rectangleCoordinates,
92-
})
93-
}
94-
overlayColor="rgba(255,130,0, 0.7)"
95-
enableTorch={false}
96-
brightness={0.3}
97-
saturation={1}
98-
contrast={1.1}
99-
quality={0.5}
100-
onRectangleDetect={({ stableCounter, lastDetectionType }) =>
101-
this.setState({ stableCounter, lastDetectionType })
102-
}
103-
detectionCountBeforeCapture={5}
104-
detectionRefreshRateInMS={50}
105-
/>
106-
<Image
107-
source={{ uri: `data:image/jpeg;base64,${this.state.image}` }}
108-
resizeMode="contain"
109-
/>
110-
</View>
111-
)
112-
}
78+
function YourComponent(props) {
79+
return (
80+
<View>
81+
<PDFScanner
82+
style={styles.scanner}
83+
onPictureTaken={handleOnPictureTaken}
84+
overlayColor="rgba(255,130,0, 0.7)"
85+
enableTorch={false}
86+
quality={0.5}
87+
detectionCountBeforeCapture={5}
88+
detectionRefreshRateInMS={50}
89+
/>
90+
</View>
91+
)
11392
}
11493
```
11594
95+
Full example in [example folder](https://github.com/Woonivers/react-native-document-scanner/tree/master/example).
96+
11697
## Properties
11798
118-
| Prop | Platform | Default | Type | Description |
119-
| :-------------------------- | :------: | :-----: | :-------: | :---------------------------------------------------------------- |
120-
| overlayColor | Both | `none` | `string` | Color of the detected rectangle : rgba recommended |
121-
| detectionCountBeforeCapture | Both | `5` | `integer` | Number of correct rectangle to detect before capture |
122-
| detectionRefreshRateInMS | iOS | `50` | `integer` | Time between two rectangle detection attempt |
123-
| enableTorch | Both | `false` | `bool` | Allows to active or deactivate flash during document detection |
124-
| useFrontCam | iOS | `false` | `bool` | Allows you to switch between front and back camera |
125-
| brightness | iOS | `0` | `float` | Increase or decrease camera brightness. Normal as default. |
126-
| saturation | iOS | `1` | `float` | Increase or decrease camera saturation. Set `0` for black & white |
127-
| contrast | iOS | `1` | `float` | Increase or decrease camera contrast. Normal as default |
128-
| quality | iOS | `0.8` | `float` | Image compression. Reduces both image size and quality |
129-
| useBase64 | iOS | `false` | `bool` | If base64 representation should be passed instead of image uri's |
130-
| saveInAppDocument | iOS | `false` | `bool` | If should save in app document in case of not using base 64 |
131-
| captureMultiple | iOS | `false` | `bool` | Keeps the scanner on after a successful capture |
132-
| saveOnDevice | Android | `false` | `bool` | Save the image in the device storage (**Need permissions**) |
99+
| Prop | Platform | Default | Type | Description |
100+
| :-------------------------- | :------: | :-----: | :-------: | :------------------------------------------------------------------ |
101+
| overlayColor | Both | `none` | `string` | Color of the detected rectangle : rgba recommended |
102+
| detectionCountBeforeCapture | Both | `5` | `integer` | Number of correct rectangle to detect before capture |
103+
| detectionRefreshRateInMS | iOS | `50` | `integer` | Time between two rectangle detection attempt |
104+
| enableTorch | Both | `false` | `bool` | Allows to active or deactivate flash during document detection |
105+
| useFrontCam | iOS | `false` | `bool` | Allows you to switch between front and back camera |
106+
| brightness | iOS | `0` | `float` | Increase or decrease camera brightness. Normal as default. |
107+
| saturation | iOS | `1` | `float` | Increase or decrease camera saturation. Set `0` for black & white |
108+
| contrast | iOS | `1` | `float` | Increase or decrease camera contrast. Normal as default |
109+
| quality | iOS | `0.8` | `float` | Image compression. Reduces both image size and quality |
110+
| useBase64 | iOS | `false` | `bool` | If base64 representation should be passed instead of image uri's |
111+
| saveInAppDocument | iOS | `false` | `bool` | If should save in app document in case of not using base 64 |
112+
| captureMultiple | iOS | `false` | `bool` | Keeps the scanner on after a successful capture |
113+
| saveOnDevice | Android | `false` | `bool` | Save the image in the device storage (**Need storage permissions**) |
133114

134115
## Manual capture
135116

136-
- First get component ref
117+
- First create a mutable ref object:
137118

138119
```javascript
139-
<DocumentScanner ref={ref => (this.scanner = ref)} />
120+
const pdfScannerElement = useRef(null)
140121
```
141122

142-
- Then call :
123+
- Pass a ref object to your component:
143124

144125
```javascript
145-
this.scanner.capture()
126+
<DocumentScanner ref={pdfScannerElement} />
146127
```
147128

148-
## Each rectangle detection (iOS only)
129+
- Then call:
130+
131+
```javascript
132+
pdfScannerElement.current.capture()
133+
```
134+
135+
## Each rectangle detection (iOS only) _-Non tested-_
149136

150137
| Props | Params | Type | Description |
151138
| ----------------- | -------------------------------------- | -------- | ----------- |
@@ -167,15 +154,21 @@ Enum (0, 1 or 2) corresponding to the type of rectangle found
167154

168155
## Returned image
169156

170-
| Prop | Params | Type | Description |
171-
| :------------- | :----: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
172-
| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }` |
157+
| Prop | Params | Type | Description |
158+
| :------------- | :----: | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
159+
| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates[only iOS]: 'object of coordinates' }` |
173160

174-
## Save in app document
161+
## Save in app document _-Non tested-_
175162

176163
If you want to use saveInAppDocument options, then don't forget to add those raws in .plist :
177164
178165
```xml
179166
<key>LSSupportsOpeningDocumentsInPlace</key>
180167
<true/>
181168
```
169+
170+
# Contributors
171+
172+
## Set up dev environment
173+
174+
[Medium article](https://medium.com/@charpeni/setting-up-an-example-app-for-your-react-native-library-d940c5cf31e4)

‎android/src/main/java/com/documentscanner/views/OpenNoteCameraView.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -605,7 +605,7 @@ public void saveDocument(ScannedDocument scannedDocument) {
605605
data.putInt("width", scannedDocument.widthWithRatio);
606606
data.putString("croppedImage", "file://" + fileName);
607607
data.putString("initialImage", "file://" + initialFileName);
608-
data.putMap("rectangleCoordinates", scannedDocument.previewPointsAsHash());
608+
// data.putMap("rectangleCoordinates", scannedDocument.previewPointsAsHash());
609609

610610
this.listener.onPictureTaken(data);
611611
}

‎example/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎example/.flowconfig‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎example/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ yarn-error.log
4040
buck-out/
4141
\.buckd/
4242
*.keystore
43+
!debug.keystore
4344

4445
# fastlane
4546
#
@@ -54,3 +55,6 @@ buck-out/
5455

5556
# Bundle artifact
5657
*.jsbundle
58+
59+
# CocoaPods
60+
/ios/Pods/

‎example/.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

‎example/App.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,33 @@
1-
import React, { useRef, useState } from "react"
2-
import { StyleSheet, Text, TouchableOpacity, Image } from "react-native"
1+
import React, { useRef, useState, useEffect } from "react"
2+
import { View, StyleSheet, Text, TouchableOpacity, Image, Platform } from "react-native"
3+
import Permissions from 'react-native-permissions';
34
import PDFScanner from "@woonivers/react-native-document-scanner"
45

56
export default function App() {
67
const pdfScannerElement = useRef(null)
78
const [data, setData] = useState({})
9+
const [allowed, setAllowed] = useState(false)
10+
11+
useEffect(() => {
12+
async function requestCamera() {
13+
const result = await Permissions.request(Platform.OS === "android" ? "android.permission.CAMERA" : "ios.permission.CAMERA")
14+
if (result === "granted") setAllowed(true)
15+
}
16+
requestCamera()
17+
}, [])
818

919
function handleOnPressRetry() {
1020
setData({})
1121
}
1222
function handleOnPress() {
1323
pdfScannerElement.current.capture()
1424
}
25+
if (!allowed) {
26+
console.log("You must accept camera permission")
27+
return (<View style={styles.permissions}>
28+
<Text>You must accept camera permission</Text>
29+
</View>)
30+
}
1531
if (data.croppedImage) {
1632
console.log("data", data)
1733
return (
@@ -31,9 +47,6 @@ export default function App() {
3147
onPictureTaken={setData}
3248
overlayColor="rgba(255,130,0, 0.7)"
3349
enableTorch={false}
34-
brightness={0.3}
35-
saturation={1}
36-
contrast={1.1}
3750
quality={0.5}
3851
detectionCountBeforeCapture={5}
3952
detectionRefreshRateInMS={50}
@@ -48,7 +61,7 @@ export default function App() {
4861
const styles = StyleSheet.create({
4962
scanner: {
5063
flex: 1,
51-
width: "100%",
64+
aspectRatio: undefined
5265
},
5366
button: {
5467
alignSelf: "center",
@@ -64,4 +77,9 @@ const styles = StyleSheet.create({
6477
width: "100%",
6578
resizeMode: "cover",
6679
},
80+
permissions: {
81+
flex:1,
82+
justifyContent: "center",
83+
alignItems: "center"
84+
}
6785
})

0 commit comments

Comments
 (0)