A react-native component for touch-based drawing.
Install rnpm to make things easy:
$ npm i -g rnpm
Then, use rnpm to install and link this component to your project:
$ rnpm install react-native-sketch
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Sketch from 'react-native-sketch';
const styles = StyleSheet.create({
container: {
padding: 20,
},
instructions: {
fontSize: 16,
marginBottom: 20,
textAlign: 'center',
},
sketch: {
height: 250, // Height needed; Default: 200px
marginBottom: 20,
},
button: {
alignItems: 'center',
backgroundColor: '#111111',
padding: 20,
},
buttonText: {
color: '#ffffff',
fontSize: 16,
},
});
class Signature extends Component {
constructor(props) {
super(props);
this.onReset = this.onReset.bind(this);
this.onSave = this.onSave.bind(this);
this.onUpdate = this.onUpdate.bind(this);
}
state = {
encodedSignature: null,
};
/**
* Do extra things after the sketch reset
*/
onReset() {
console.log('The drawing has been cleared!');
}
/**
* The Sketch component provides a 'saveImage' function (promise),
* so that you can save the drawing in the device and get an object
* once the promise is resolved, containing the path of the image.
*/
onSave() {
this.sketch.saveImage(this.state.encodedSignature)
.then((data) => console.log(data))
.catch((error) => console.log(error));
}
/**
* On every update (touch up from the drawing),
* you'll receive the base64 representation of the drawing as a callback.
*/
onUpdate(base64Image) {
this.setState({ encodedSignature: base64Image });
}
render() {
return (
<View style={styles.container}>
<Text style={styles.instructions}>
Use your finger on the screen to sign.
</Text>
<Sketch
fillColor="#f5f5f5"
strokeColor="#111111"
strokeThickness={2}
onReset={this.onReset}
onUpdate={this.onUpdate}
ref={(sketch) => { this.sketch = sketch; }}
style={styles.sketch}
/>
<TouchableOpacity
disabled={!this.state.encodedSignature}
style={styles.button}
onPress={this.onSave}
>
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
</View>
);
}
}
export default Signature;
- [ ] Define a way for an external component to clear the current drawing.
- [ ] Improve the documentation.
- [ ] Make some tests.
- [ ] Android support (help wanted ¯\(ツ)/¯).
This component uses this smooth freehand drawing technique under the hood.
Feel free to contribute by sending a pull request or creating an issue.
MIT