Skip to content

Commit f5147df

Browse files
jorgemastajorgemasta
committed
docs: ✏️ update readme
1 parent a4ed978 commit f5147df

File tree

1 file changed

+72
-79
lines changed

1 file changed

+72
-79
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)

0 commit comments

Comments
 (0)