Skip to content
A React Native component for user to draw anything by touching screen
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
images
.gitignore fix issues Aug 31, 2018
README.md
index.js
package-lock.json
package.json update README Aug 31, 2018

README.md

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! 👍

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:

image

You can’t perform that action at this time.