Home

Awesome

react-native-drawpad

image

Basic useful feature list:

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! :+1:

import ReactNativeDrawPad from 'react-native-drawpad';
...


render(){
  return (
    <ReactNativeDrawPad
        ref="drawpad"
        padWidth={300}
        padHeight={300}
        padColor={"#efefef"}
        onPadUpdated={this.catchImageEncode}
    />
   )
 }
 
changePenColor(color){
	this.refs.drawpad.changeColor(color)
}

undo(){
  this.refs.drawpad.undo(coor)
}

changePenColor(thickness){
	this.refs.drawpad.changethickness(thickness)
}

catchImageEncode(base64EncodingImage){
	//do anything with the image here
}

...

Props

PropDescriptionDefault
showColorSelectorsBoolean, if true, show the color selectortrue
showErasorBoolean, if true, show the erasor buttontrue
showUndoButtonBoolean, if true, show the undo buttontrue
showThicknessSliderBoolean, if true, show the thickness slidertrue
selectedColorSring, color for text in button when selected#dd7777
padColorSring, color of the drawpad#eee
padWidthNumber, width of the drawpad300
padHeightNumber, height of the drawpad300
initColorSring, color of the pen initially#dd7777
colorsArray, a set of color used in color selector['#dd7777','#222','#FE5722', '#FEEA3B', '#4CAE50', '#2196F2','purple']
onPadUpdatedFunction, the function to listen to the change of the drawpada function log the base64 encoding image data

Reference:

image