Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rn-draw with all npm packages installed. Try it out:

require("expo/package.json"); // expo is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-native/package.json"); // react-native is a peer dependency. require("react-native-svg/package.json"); // react-native-svg is a peer dependency. var rnDraw = require("rn-draw")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rn-draw v0.0.6

Drawing library for react-native using svg.

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
  containerStyle={{backgroundColor: 'rgba(0,0,0,0.01)'}}
  rewind={(undo) => {this._undo = undo}
  clear={(clear) => {this._clear = clear}
  color={'#000000'}
  strokeWidth={4}
/>

Props

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

Work in progress

Smoothing out pen strokes (curves)

Image backgrounds

Optimizations in pointer

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free