react-native-sketch
A react-native component for touch-based drawing.
Getting started
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
Usage
;;; const styles = StyleSheet; { superprops; thisonReset = thisonReset; thisonSave = thisonSave; thisonUpdate = thisonUpdate; } state = encodedSignature: null ; /** * Do extra things after the sketch reset */ { console; } /** * 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. */ { thissketch ; } /** * On every update (touch up from the drawing), * you'll receive the base64 representation of the drawing as a callback. */ { this; } { return <View style=stylescontainer> <Text style=stylesinstructions> Use your finger on the screen to sign </Text> <Sketch fillColor="#f5f5f5" strokeColor="#111111" strokeThickness=2 onReset=thisonReset onUpdate=thisonUpdate ref= { thissketch = sketch; } style=stylessketch /> <TouchableOpacity disabled=!thisstateencodedSignature style=stylesbutton onPress=thisonSave > <Text style=stylesbuttonText>Save</Text> </TouchableOpacity> </View> ; } ;
Roadmap
- Define a way for an external component to clear the current drawing.
- Improve the documentation.
- Make some tests.
- Android support (help wanted ¯\(ツ)/¯).
Notes
This component uses this smooth freehand drawing technique under the hood.
Contributing
Feel free to contribute by sending a pull request or creating an issue.
License
MIT