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

| 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