Skip to content

Commit 6a3e4c1

Browse files
MichaelvilleneuveMichaelvilleneuve
committed
Add basic android support
1 parent 22c2827 commit 6a3e4c1

File tree

265 files changed

+29890
-102
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

265 files changed

+29890
-102
lines changed

‎Example/android/.project‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>android</name>
4+
<comment>Project android created by Buildship.</comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
</buildSpec>
14+
<natures>
15+
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
16+
</natures>
17+
</projectDescription>

‎Example/android/.settings/org.eclipse.buildship.core.prefs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
connection.project.dir=
2+
eclipse.preferences.version=1

‎README.md‎

Lines changed: 88 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
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 !
66

77
Features :
8-
- Live detection
9-
- Perspective correction and crop of the image
10-
- Live camera filters (brightness, saturation, contrast)
11-
- Flash
12-
- Easy to use base64 image
138

14-
#### Can be easily plugged with [react-native-perspective-image-cropper](https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper)
9+
- Live detection
10+
- Perspective correction and crop of the image
11+
- Live camera filters (brightness, saturation, contrast)
12+
- Flash
13+
- Easy to use base64 image
1514

15+
#### Can be easily plugged with [react-native-perspective-image-cropper](https://github.com/Michaelvilleneuve/react-native-perspective-image-cropper)
1616

17-
![Demo crop gif](https://camo.githubusercontent.com/0ac887deaa7263172a5fd2759dba3d692e98585a/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f6d69636861656c76696c6c656e657576652f64656d6f2d63726f702e676966)
17+
![Demo crop gif](https://camo.githubusercontent.com/0ac887deaa7263172a5fd2759dba3d692e98585a/68747470733a2f2f73332d65752d776573742d312e616d617a6f6e6177732e636f6d2f6d69636861656c76696c6c656e657576652f64656d6f2d63726f702e676966)
1818

19-
## Getting started
19+
## Both Platform
2020

2121
Use version >=1.4.1 if you are using react-native 0.48+
2222

@@ -28,21 +28,57 @@ Edit the `info.plist` file in XCode and add the following permission : `NSCamera
2828

2929
Remember, this library uses your device camera, you can't run it on a simulator.
3030

31-
### With Cocoapods
31+
### iOS if you want to use Cocoapods instead of default linking
3232

3333
If you want to use Cocoapods insteads of `react-native link`, add the following to your Podfile
3434

3535
```
3636
pod 'RNPdfScanner', :path => '../node_modules/react-native-document-scanner/ios'
3737
```
3838

39+
### Android
40+
41+
#### IMPORTANT - Go to folder app/settings.gradle and add
42+
43+
```java
44+
include ':react-native-document-scanner'
45+
project(':react-native-document-scanner').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-scanner/android')
46+
```
47+
48+
#### Link Open CV Library
49+
50+
```java
51+
include ':openCVLibrary310'
52+
project(':openCVLibrary310').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-document-scanner/android/openCVLibrary310')
53+
```
54+
55+
#### In android/app/src/main/AndroidManifest.xml
56+
57+
Change manifest header to avoid "Manifest merger error". After you add `xmlns:tools="http://schemas.android.com/tools"` should look like this:
58+
59+
```
60+
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.<yourAppName>" xmlns:tools="http://schemas.android.com/tools">
61+
```
62+
63+
Add `tools:replace="android:allowBackup"` in <application tag. It should look like this:
64+
65+
```
66+
<application tools:replace="android:allowBackup" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme">
67+
```
68+
69+
Add Camera permissions request:
70+
71+
```
72+
<uses-permission android:name="android.permission.CAMERA" />
73+
```
3974

4075
## Usage
76+
4177
```javascript
42-
import React,{ Component } from 'react';
43-
import { View, Image } from 'react-native';
78+
import React, { Component } from "react";
79+
import { View, Image } from "react-native";
4480

45-
import DocumentScanner from 'react-native-document-scanner';
81+
import DocumentScanner from "react-native-document-scanner";
4682

4783
class YourComponent extends Component {
4884
render() {
@@ -51,61 +87,70 @@ class YourComponent extends Component {
5187
<DocumentScanner
5288
useBase64
5389
saveInAppDocument={false}
54-
onPictureTaken={data => this.setState({
55-
image: data.croppedImage,
56-
initialImage: data.initialImage,
57-
rectangleCoordinates: data.rectangleCoordinates,
58-
})}
90+
onPictureTaken={data =>
91+
this.setState({
92+
image: data.croppedImage,
93+
initialImage: data.initialImage,
94+
rectangleCoordinates: data.rectangleCoordinates
95+
})
96+
}
5997
overlayColor="rgba(255,130,0, 0.7)"
6098
enableTorch={false}
6199
brightness={0.3}
62100
saturation={1}
63101
contrast={1.1}
64102
quality={0.5}
65-
onRectangleDetect={({ stableCounter, lastDetectionType }) => this.setState({ stableCounter, lastDetectionType })}
103+
onRectangleDetect={({ stableCounter, lastDetectionType }) =>
104+
this.setState({ stableCounter, lastDetectionType })
105+
}
66106
detectionCountBeforeCapture={5}
67107
detectionRefreshRateInMS={50}
68108
/>
69-
<Image source={{ uri: `data:image/jpeg;base64,${this.state.image}`}} resizeMode="contain" />
109+
<Image
110+
source={{ uri: `data:image/jpeg;base64,${this.state.image}` }}
111+
resizeMode="contain"
112+
/>
70113
</View>
71114
);
72115
}
73116
}
74-
75117
```
76118

77119
## Properties
78120

79-
| Prop | Default | Type | Description |
80-
| :-------- |:----:| :--------:| :----------|
81-
| overlayColor | `none` | `string` | Color of the detected rectangle : rgba recommended |
82-
| detectionCountBeforeCapture | `5` | `integer` | Number of correct rectangle to detect before capture |
83-
| detectionRefreshRateInMS | `50` | `integer` | Time between two rectangle detection attempt |
84-
| enableTorch | `false` | `bool` | Allows to active or deactivate flash during document detection |
85-
| useFrontCam | `false` | `bool` | Allows you to switch between front and back camera |
86-
| brightness | `0` | `float` | Increase or decrease camera brightness. Normal as default. |
87-
| saturation | `1` | `float` | Increase or decrease camera saturation. Set `0` for black & white |
88-
| contrast | `1` | `float` | Increase or decrease camera contrast. Normal as default |
89-
| quality | `0.8` | `float` | Image compression. Reduces both image size and quality |
90-
| useBase64 | `false` | `bool` | If base64 representation should be passed instead of image uri's |
91-
| saveInAppDocument | `false` | `bool` | If should save in app document in case of not using base 64 |
92-
| captureMultiple | `false` | `bool` | Keeps the scanner on after a successful capture |
121+
| Prop | Platform | Default | Type | Description |
122+
| :-------------------------- | :------: | :-----: | :-------: | :---------------------------------------------------------------- |
123+
| overlayColor | Both | `none` | `string` | Color of the detected rectangle : rgba recommended |
124+
| detectionCountBeforeCapture | iOS | `5` | `integer` | Number of correct rectangle to detect before capture |
125+
| detectionRefreshRateInMS | iOS | `50` | `integer` | Time between two rectangle detection attempt |
126+
| enableTorch | Both | `false` | `bool` | Allows to active or deactivate flash during document detection |
127+
| useFrontCam | iOS | `false` | `bool` | Allows you to switch between front and back camera |
128+
| brightness | iOS | `0` | `float` | Increase or decrease camera brightness. Normal as default. |
129+
| saturation | iOS | `1` | `float` | Increase or decrease camera saturation. Set `0` for black & white |
130+
| contrast | iOS | `1` | `float` | Increase or decrease camera contrast. Normal as default |
131+
| quality | iOS | `0.8` | `float` | Image compression. Reduces both image size and quality |
132+
| useBase64 | iOS | `false` | `bool` | If base64 representation should be passed instead of image uri's |
133+
| saveInAppDocument | iOS | `false` | `bool` | If should save in app document in case of not using base 64 |
134+
| captureMultiple | iOS | `false` | `bool` | Keeps the scanner on after a successful capture |
93135

94136
## Manual capture
95137

96138
- First get component ref
139+
97140
```javascript
98-
<DocumentScanner ref={(ref) => this.scanner = ref} />
141+
<DocumentScanner ref={ref => (this.scanner = ref)} />
99142
```
100143

101144
- Then call :
145+
102146
```javascript
103147
this.scanner.capture();
104148
```
105149

106-
## Each rectangle detection
150+
## Each rectangle detection (iOS only)
151+
107152
| Props | Params | Type | Description |
108-
|-------------------|----------------------------------------|----------|-------------|
153+
| ----------------- | -------------------------------------- | -------- | ----------- |
109154
| onRectangleDetect | `{ stableCounter, lastDetectionType }` | `object` | See below |
110155

111156
The returned object includes the following keys :
@@ -117,30 +162,22 @@ Number of correctly formated rectangle found (this number triggers capture once
117162
- `lastDetectionType`
118163

119164
Enum (0, 1 or 2) corresponding to the type of rectangle found
165+
120166
0. Correctly formated rectangle
121167
1. Wrong perspective, bad angle
122-
2. Too far
123-
168+
1. Too far
124169

125170
## Returned image
126171

127-
| Prop | Params | Type | Description |
128-
| :----------- |:-------:| :--------:| :----------|
129-
| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }` |
172+
| Prop | Params | Type | Description |
173+
| :------------- | :----: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
174+
| onPictureTaken | `data` | `object` | Returns the captured image in an object `{ croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' }` |
130175

131176
## Save in app document
132177

133-
![Demo save document](images/demoSaveDocument.png)
134-
135178
If you want to use saveInAppDocument options, then don't forget to add those raws in .plist :
179+
136180
```xml
137181
<key>LSSupportsOpeningDocumentsInPlace</key>
138182
<true/>
139183
```
140-
141-
### If you prefer manual installation
142-
143-
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
144-
2. Go to `node_modules` ➜ `react-native-pdf-scanner` and add `RNPdfScanner.xcodeproj`
145-
3. In XCode, in the project navigator, select your project. Add `libRNPdfScanner.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
146-
4. Run your project (`Cmd+R`)<

‎android.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import {
5+
DeviceEventEmitter, // android
6+
NativeModules,
7+
requireNativeComponent,
8+
View
9+
} from 'react-native';
10+
11+
var iface = {
12+
name: 'DocumentScanner',
13+
propTypes: {
14+
documentAnimation : PropTypes.bool,
15+
detectionCountBeforeCapture : PropTypes.number,
16+
enableTorch : PropTypes.bool,
17+
manualOnly: PropTypes.bool,
18+
overlayColor: PropTypes.string,
19+
contrast: PropTypes.number,
20+
brightness: PropTypes.number,
21+
noGrayScale: PropTypes.bool,
22+
...View.propTypes // include the default view properties
23+
},
24+
};
25+
26+
const DocumentScanner = requireNativeComponent('DocumentScanner', iface);
27+
const CameraManager = NativeModules.DocumentScannerManager || {};
28+
29+
class Scanner extends PureComponent{
30+
31+
static defaultProps = {
32+
onPictureTaken: ()=>{},
33+
onProcessing: ()=>{},
34+
}
35+
36+
componentWillMount(){
37+
const { onPictureTaken, onProcessing } = this.props;
38+
DeviceEventEmitter.addListener('onPictureTaken', onPictureTaken);
39+
DeviceEventEmitter.addListener('onProcessingChange', onProcessing);
40+
}
41+
42+
componentWillUnmount(){
43+
const { onPictureTaken, onProcessing } = this.props;
44+
DeviceEventEmitter.removeListener('onPictureTaken', onPictureTaken);
45+
DeviceEventEmitter.removeListener('onProcessingChange', onProcessing);
46+
}
47+
48+
capture = ()=>{
49+
CameraManager.capture();
50+
}
51+
52+
render(){
53+
return <DocumentScanner {...this.props}/>
54+
}
55+
}
56+
57+
export default Scanner;

‎android/.classpath‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<classpath>
3+
<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8"/>
4+
<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer"/>
5+
<classpathentry kind="output" path="bin/default"/>
6+
</classpath>

‎android/.project‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>react-native-document-scanner</name>
4+
<comment>Project react-native-documentscanner-android created by Buildship.</comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>org.eclipse.jdt.core.javabuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
<buildCommand>
14+
<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
15+
<arguments>
16+
</arguments>
17+
</buildCommand>
18+
</buildSpec>
19+
<natures>
20+
<nature>org.eclipse.jdt.core.javanature</nature>
21+
<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
22+
</natures>
23+
</projectDescription>

‎android/.settings/org.eclipse.buildship.core.prefs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
connection.project.dir=
2+
eclipse.preferences.version=1

‎android/build.gradle‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
1+
// Top-level build file where you can add configuration options common to all sub-projects/modules.
12

23
buildscript {
34
repositories {
45
jcenter()
56
}
6-
77
dependencies {
8-
classpath 'com.android.tools.build:gradle:1.3.1'
8+
classpath 'com.android.tools.build:gradle:2.2.3'
9+
10+
// NOTE: Do not place your application dependencies here; they belong
11+
// in the individual module build.gradle files
912
}
1013
}
1114

1215
apply plugin: 'com.android.library'
1316

1417
android {
15-
compileSdkVersion 23
16-
buildToolsVersion "23.0.1"
18+
compileSdkVersion 26
1719

1820
defaultConfig {
1921
minSdkVersion 16
2022
targetSdkVersion 22
2123
versionCode 1
2224
versionName "1.0"
23-
}
24-
lintOptions {
25-
abortOnError false
25+
ndk {
26+
abiFilters "armeabi-v7a", "x86"
27+
}
2628
}
2729
}
2830

29-
repositories {
30-
mavenCentral()
31-
}
32-
3331
dependencies {
34-
compile 'com.facebook.react:react-native:+'
35-
}
36-
32+
implementation project(':openCVLibrary310')
33+
implementation 'com.android.support:appcompat-v7:26.1.0'
34+
implementation 'com.facebook.react:react-native:0.19.+'
35+
implementation 'com.google.zxing:core:3.0.1'
36+
// implementation 'com.android.support:design:26.1.0'
37+
implementation 'org.piwik.sdk:piwik-sdk:0.0.4'
38+
implementation 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
39+
implementation 'us.feras.mdv:markdownview:1.1.0'
40+
}

0 commit comments

Comments
 (0)