Skip to content

Commit b61c54b

Browse files
author
Jed Tiotuico
committed
Merge pull request RepairShopr#14 from john1jan/extended
Added new props saveImageFileInExtStorage,showNativeButtons,viewMode …
2 parents 28af644 + 993234d commit b61c54b

12 files changed

+678
-106
lines changed

‎README.md

Lines changed: 111 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ Android support is available:
55
<img src="http://i.giphy.com/xT0GUKJFFkdDv25FNC.gif" />
66

77
iOS:
8-
98
<img src="http://i.giphy.com/3oEduIyWb48Ws3bSuc.gif" />
109

1110
React Native library for capturing signature
@@ -27,9 +26,25 @@ In XCode, in the project navigator, select your project. Add the lib*.a from the
2726
Run your project (Cmd+R)
2827

2928
## Properties
30-
1. rotateClockwise - If you want the signature to generate the captured signature in portait mode set the rotateClockwise property to true
3129

32-
2. square - If you want the signature to reduce in size and in a square image 400x400 set square property to true
30+
**saveImageFileInExtStorage** : Make this props true, if you want to save the image file in external storage. Default is false. Warning: Image file will be visible in gallery or any other image browsing app
31+
32+
**showNativeButtons** : If this props is made to true, it will display the native buttons "Save" and "Reset".
33+
34+
**viewMode** : "portrait" or "landscape" change the screen orientation based on boolean value
35+
36+
**maxSize** : sets the max size of the image maintains aspect ratio, default is 500
37+
38+
## Methods
39+
40+
**saveImage()** : when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback
41+
**resetSign()** : when called it will clear the image on the canvas
42+
43+
## Callback Props
44+
**onSaveEvent** : Triggered when saveImage() is called, which return Base64 Encoded String and image file path.
45+
**onDragEvent** : Triggered when user marks his signature on the canvas. This will not be called when the user does not perform any action on canvas.
46+
47+
3348

3449
## Examples
3550

@@ -51,10 +66,12 @@ var NPMTest = React.createClass({
5166

5267
render: function() {
5368
return (
54-
<SignatureCapture
55-
rotateClockwise={true}
56-
square={true}
57-
onSaveEvent={this._onSaveEvent}/>
69+
<SignatureCapture
70+
ref="sign"
71+
onSaveEvent={this._onSaveEvent}
72+
onDragEvent={this._onDragEvent}
73+
saveImageFileInExtStorage={false}
74+
showNativeButtons={false}
5875
);
5976
}
6077
});
@@ -138,22 +155,98 @@ public class MainActivity extends ReactActivity {
138155

139156
* Open index.android.js
140157
```
141-
...
158+
/**
159+
* Sample React Native App
160+
* https://github.com/facebook/react-native
161+
*/
162+
163+
import React, {
164+
AppRegistry,
165+
Component,
166+
StyleSheet,
167+
Text,
168+
View, TouchableHighlight
169+
} from 'react-native';
170+
142171
import SignatureCapture from 'react-native-signature-capture';
143-
...
144172
145-
class signature extends Component {
146-
render() {
147-
return (
148-
<SignatureCapture onSaveEvent={(data)=>{
149-
console.log(data);
150-
}}/>
151-
);
152-
}
173+
174+
175+
class SignaturExample extends Component {
176+
render() {
177+
return (
178+
<View style={{ flex: 1, flexDirection: "column" }}>
179+
<Text style={{alignItems:"center",justifyContent:"center"}}>Signature Capture Extended </Text>
180+
<SignatureCapture
181+
style={[{flex:1},styles.signature]}
182+
ref="sign"
183+
onSaveEvent={this._onSaveEvent}
184+
onDragEvent={this._onDragEvent}
185+
saveImageFileInExtStorage={false}
186+
showNativeButtons={false}
187+
viewMode={"portrait"}/>
188+
189+
<View style={{ flex: 1, flexDirection: "row" }}>
190+
<TouchableHighlight style={styles.buttonStyle}
191+
onPress={() => { this.saveSign() } } >
192+
<Text>Save</Text>
193+
</TouchableHighlight>
194+
195+
<TouchableHighlight style={styles.buttonStyle}
196+
onPress={() => { this.resetSign() } } >
197+
<Text>Reset</Text>
198+
</TouchableHighlight>
199+
200+
</View>
201+
202+
</View>
203+
204+
205+
206+
);
207+
}
208+
209+
saveSign() {
210+
this.refs["sign"].saveImage();
211+
}
212+
213+
resetSign() {
214+
this.refs["sign"].resetImage();
215+
}
216+
217+
_onSaveEvent(result) {
218+
//result.encoded - for the base64 encoded png
219+
//result.pathName - for the file path name
220+
console.log(result);
221+
}
222+
_onDragEvent() {
223+
// This callback will be called when the user enters signature
224+
console.log("dragged");
225+
}
153226
}
154-
...
227+
228+
229+
230+
const styles = StyleSheet.create({
231+
232+
signature: {
233+
flex: 1,
234+
borderColor: '#000033',
235+
borderWidth: 1,
236+
},
237+
buttonStyle: {
238+
flex: 1, justifyContent: "center", alignItems: "center", height: 50,
239+
backgroundColor: "#eeeeee",
240+
margin: 10
241+
242+
}
243+
});
244+
245+
AppRegistry.registerComponent('SignaturExample', () => SignaturExample);
246+
155247
```
156248

249+
157250
* Run the Android Studio project
158251

159252
-------------

‎SignatureCapture.js

Lines changed: 73 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,83 @@
1+
12
'use strict';
23

34
var React = require('react-native');
4-
55
var {
6-
requireNativeComponent,
7-
DeviceEventEmitter,
8-
View
6+
PropTypes,
7+
requireNativeComponent,
8+
View,
99
} = React;
1010

11-
var Component = requireNativeComponent('RSSignatureView', null);
12-
13-
var styles = {
14-
signatureBox: {
15-
flex: 1
16-
},
17-
container: {
18-
flex: 1,
19-
justifyContent: 'center',
20-
alignItems: 'stretch',
21-
backgroundColor: '#F5FCFF',
22-
}
11+
var UIManager = require('UIManager');
12+
13+
14+
class SignatureCapture extends React.Component {
15+
16+
constructor() {
17+
super();
18+
this.onChange = this.onChange.bind(this);
19+
}
20+
21+
onChange(event) {
22+
console.log("Signature ON Change Event");
23+
24+
25+
if(event.nativeEvent.pathName){
26+
27+
if (!this.props.onSaveEvent) {
28+
return;
29+
}
30+
this.props.onSaveEvent({
31+
pathName: event.nativeEvent.pathName,
32+
encoded: event.nativeEvent.encoded,
33+
});
34+
}
35+
36+
if(event.nativeEvent.dragged){
37+
if (!this.props.onDragEvent) {
38+
return;
39+
}
40+
this.props.onDragEvent({
41+
dragged: event.nativeEvent.dragged
42+
});
43+
}
44+
}
45+
46+
render() {
47+
return (
48+
<RSSignatureView {...this.props} style={{ flex: 1 }} onChange={this.onChange} />
49+
);
50+
}
51+
52+
saveImage() {
53+
UIManager.dispatchViewManagerCommand(
54+
React.findNodeHandle(this),
55+
UIManager.RSSignatureView.Commands.saveImage,
56+
[],
57+
);
58+
}
59+
60+
resetImage() {
61+
UIManager.dispatchViewManagerCommand(
62+
React.findNodeHandle(this),
63+
UIManager.RSSignatureView.Commands.resetImage,
64+
[],
65+
);
66+
}
67+
}
68+
69+
SignatureCapture.propTypes = {
70+
...View.propTypes,
71+
rotateClockwise: PropTypes.bool,
72+
square: PropTypes.bool,
73+
saveImageFileInExtStorage: PropTypes.bool,
74+
viewMode: PropTypes.string,
75+
showNativeButtons: PropTypes.bool,
76+
maxSize:PropTypes.number
2377
};
2478

25-
var subscription;
26-
27-
var SignatureCapture = React.createClass({
28-
componentDidMount: function() {
29-
subscription = DeviceEventEmitter.addListener(
30-
'onSaveEvent',
31-
this.props.onSaveEvent
32-
);
33-
},
34-
35-
componentWillUnmount: function() {
36-
subscription.remove();
37-
},
38-
39-
render: function() {
40-
return (
41-
<View style={styles.container}>
42-
<Component
43-
style={styles.signatureBox}
44-
rotateClockwise={this.props.rotateClockwise}
45-
square={this.props.square}
46-
/>
47-
</View>
48-
)
49-
}
79+
var RSSignatureView = requireNativeComponent('RSSignatureView', SignatureCapture, {
80+
nativeOnly: { onChange: true }
5081
});
5182

52-
module.exports = SignatureCapture;
83+
module.exports = SignatureCapture;

‎android/android.iml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<module external.system.id="GRADLE" type="JAVA_MODULE" version="4">
3+
<component name="FacetManager">
4+
<facet type="android-gradle" name="Android-Gradle">
5+
<configuration>
6+
<option name="GRADLE_PROJECT_PATH" value=":" />
7+
</configuration>
8+
</facet>
9+
<facet type="android" name="Android">
10+
<configuration>
11+
<option name="ALLOW_USER_CONFIGURATION" value="false" />
12+
</configuration>
13+
</facet>
14+
</component>
15+
<component name="NewModuleRootManager" inherit-compiler-output="false">
16+
<content url="file://$MODULE_DIR$" />
17+
<orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
18+
<orderEntry type="sourceFolder" forTests="false" />
19+
</component>
20+
</module>

‎android/build.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ android {
1717

1818
dependencies {
1919
compile 'com.android.support:appcompat-v7:23.0.0'
20-
compile 'com.facebook.react:react-native:0.17.+'
20+
compile 'com.facebook.react:react-native:0.19.+'
2121
}

‎android/gradle/wrapper/gradle-wrapper.jar

52.4 KB
Binary file not shown.

‎android/gradle/wrapper/gradle-wrapper.properties

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#Wed Oct 21 11:34:03 PDT 2015
2+
distributionBase=GRADLE_USER_HOME
3+
distributionPath=wrapper/dists
4+
zipStoreBase=GRADLE_USER_HOME
5+
zipStorePath=wrapper/dists
6+
distributionUrl=https\://services.gradle.org/distributions/gradle-2.8-all.zip

0 commit comments

Comments
 (0)