Skip to content

React native draw tool for react native applications

Notifications You must be signed in to change notification settings

jayeszee/rn-draw

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Draw

React native draw tool using react-native-svg.

rn-draw.gif

Installation

First install react-native-svg and follow the directions to properly set it up: https://github.com/react-native-community/react-native-svg

Install rn-draw with npm install -S rn-draw or yarn add rn-draw

Expo Applications

Make sure you follow the proper guidelines on https://expo.io to set up your react native application with expo sdk.

Install rn-draw with npm install -S rn-draw or yarn add rn-draw

Compatibility

expo version <= 21 or react native <= 48 w/ react 16 alpha 12 --- rn-draw@0.0.4

expo version = 22 or react native = 49 w/ react 16 beta 5 --- >= rn-draw@0.0.5

How to use

import RNDraw from 'rn-draw'
  
<RNDraw
  strokes={[]}
  containerStyle={{backgroundColor: 'rgba(0,0,0,0.01)'}}
  rewind={(undo) => {this._undo = undo}}
  clear={(clear) => {this._clear = clear}}
  color={'#000000'}
  strokeWidth={4}
  onChangeStrokes={(strokes) => console.log(strokes)}
/>

### Props
**strokes** [Array] - set with some initial data. (defaults to [])

**containerStyle** [Object] - style for the container of the draw component.

**color** [String] - string representation of pen color (defaults to '#000000')

**strokeWidth** [Number] - width of pen strokes (defaults to 4)

**rewind** [Func] - a function for passing the draw component's undo functionality

**clear** [Func] - a function for passing the draw component's clear functionality

**onChangeStrokes** [Func] - callback that is called when the draw changes.

  
## Work in progress

Smoothing out pen strokes (curves) 

Image backgrounds

Optimizations in pointer

About

React native draw tool for react native applications

Resources

Stars

Watchers

Forks

Packages

No packages published