1.0.4 • Published 6 years ago

react-native-drawpad v1.0.4

Weekly downloads
2
License
MIT
Repository
-
Last release
6 years ago

react-native-drawpad

image

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

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