Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RepairShopr/react-native-signature-capture
A simple modular component for react native (iOS) to capture a signature as an image
https://github.com/RepairShopr/react-native-signature-capture
Last synced: about 2 months ago
JSON representation
A simple modular component for react native (iOS) to capture a signature as an image
- Host: GitHub
- URL: https://github.com/RepairShopr/react-native-signature-capture
- Owner: RepairShopr
- License: mit
- Created: 2015-07-09T12:25:55.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-18T21:52:06.000Z (9 months ago)
- Last Synced: 2024-04-14T07:58:49.638Z (6 months ago)
- Language: Objective-C
- Size: 1.56 MB
- Stars: 960
- Watchers: 21
- Forks: 508
- Open Issues: 198
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-signature-capture ★343
README
# react-native-signature-capture
## About this
React Native library for capturing signature
User would sign on the app and when you press the save button it returns the base64 encoded png
### iOS
### Android
## Contribution
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given. Please read our [Pull request guidelines](https://github.com/RepairShopr/react-native-signature-capture/wiki/Pull-Request-Guidelines) before submitting your PR
## Install
First you need to install react-native-signature-capture:
```sh
npm install react-native-signature-capture --save
```
Second you need to link react-native-signature-capture:
```sh
react-native link react-native-signature-capture
```
Use above `react-native link` command to automatically complete the installation, or link manually like so:
### iOS
1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-signature-capture ➜ ios ➜ select RSSignatureCapture.xcodeproj
3. Add libRSSignatureCapture.a to Build Phases -> Link Binary With Libraries
4. Compile and have fun
### Android
Add these lines in your file: android/settings.gradle
```
...
include ':reactnativesignaturecapture',':app'
project(':reactnativesignaturecapture').projectDir = new File(settingsDir, '../node_modules/react-native-signature-capture/android')
```
Add line in your file: android/app/build.gradle
```
...
dependencies {
...
compile project(':reactnativesignaturecapture') // <-- add this line
}
```
Add import and line in your file: android/app/src/main/java/<...>/MainApplication.java
```java
...
import com.rssignaturecapture.RSSignatureCapturePackage; // <-- add this import
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new RSSignatureCapturePackage() // <-- add this line
);
}
}
...
}
```
## Usage
Then you can use SignatureCapture component in your react-native's App, like this:
```javascript
...
import React, {Component} from 'react';
import SignatureCapture from 'react-native-signature-capture';
class CustomComponent extends Component {
...
render() {
return (
);
}
}
```
### Properties
+ **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
+ **showBorder** : If this props is made to false, it will hide the dashed border (the border is shown on iOS only).
+ **showNativeButtons** : If this props is made to true, it will display the native buttons "Save" and "Reset".
+ **showTitleLabel** : If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign.
+ **viewMode** : "portrait" or "landscape" change the screen orientation based on boolean value
+ **maxSize** : sets the max size of the image maintains aspect ratio, default is 500
+ **minStrokeWidth** : sets the min stroke line width (_Android only_)
+ **maxStrokeWidth** : sets the max stroke line width (_Android only_)
+ **backgroundColor**: Sets the background color of the component. Defaults to white. May be 'transparent'.
+ **strokeColor**: Sets the color of the signature. Defaults to black.
### Methods
+ **saveImage()** : when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback
+ **resetImage()** : when called it will clear the image on the canvas
### Callback Props
+ **onSaveEvent** : Triggered when saveImage() is called, which return Base64 Encoded String and image file path.
+ **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.
### Example
```javascript
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
var React = require('react');
var ReactNative = require('react-native');
var {Component} = React;
var {
AppRegistry,
StyleSheet,
Text,
View, TouchableHighlight
} = ReactNative;
import SignatureCapture from 'react-native-signature-capture';
class RNSignatureExample extends Component {
render() {
return (
Signature Capture Extended
{ this.saveSign() } } >
Save
{ this.resetSign() } } >
Reset
);
}
saveSign() {
this.refs["sign"].saveImage();
}
resetSign() {
this.refs["sign"].resetImage();
}
_onSaveEvent(result) {
//result.encoded - for the base64 encoded png
//result.pathName - for the file path name
console.log(result);
}
_onDragEvent() {
// This callback will be called when the user enters signature
console.log("dragged");
}
}
const styles = StyleSheet.create({
signature: {
flex: 1,
borderColor: '#000033',
borderWidth: 1,
},
buttonStyle: {
flex: 1, justifyContent: "center", alignItems: "center", height: 50,
backgroundColor: "#eeeeee",
margin: 10
}
});
AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample);
```
-------------
Please checkout the example folder (iOS/Android):
https://github.com/RepairShopr/react-native-signature-capture/tree/master/Example
Library used:
https://github.com/jharwig/PPSSignatureView
https://github.com/gcacace/android-signaturepad