react-native-drawpad
Basic useful feature list:
- Let users draw anything they want!
- change color of input easily
- change thickness of input easily
- default penal to change color, thickness and undo
- get base64 encoding callback
Still developing, any PR is welcome!
How to install
npm install react-native-drawpad --save
rnpm link react-native-webview-bridge
And here's some code! 👍
;... { return <ReactNativeDrawPad ref="drawpad" padWidth=300 padHeight=300 padColor="#efefef" onPadUpdated=thiscatchImageEncode /> } { thisrefsdrawpad} { thisrefsdrawpad} { thisrefsdrawpad} { //do anything with the image here} ...
Props
Prop | Description | Default |
---|---|---|
showColorSelectors |
Boolean, if true, show the color selector | true |
showErasor |
Boolean, if true, show the erasor button | true |
showUndoButton |
Boolean, if true, show the undo button | true |
showThicknessSlider |
Boolean, if true, show the thickness slider | true |
selectedColor |
Sring, color for text in button when selected | #dd7777 |
padColor |
Sring, color of the drawpad | #eee |
padWidth |
Number, width of the drawpad | 300 |
padHeight |
Number, height of the drawpad | 300 |
initColor |
Sring, color of the pen initially | #dd7777 |
colors |
Array, a set of color used in color selector | ['#dd7777','#222','#FE5722', '#FEEA3B', '#4CAE50', '#2196F2','purple'] |
onPadUpdated |
Function, the function to listen to the change of the drawpad | a function log the base64 encoding image data |
Reference:
- React Native Webviw-Bridge for webview/native communication