npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-seaart-sketch-canvas

v1.0.2

Published

react-native-seaart-sketch-canvas allows you to draw / sketch on both iOS and Android devices and sync the drawing data between users. Of course you can save as image.

Downloads

15

Readme

react-native-sketch-canvas

Forked from terrylinla/react-native-sketch-canvas as package abandoned in 2018.


A React Native component for drawing by touching on both iOS and Android.

Features

  • Support iOS and Android
  • Stroke thickness and color are changeable while drawing.
  • Can undo strokes one by one.
  • Can serialize path data to JSON. So it can sync other devices or someone else and continue to edit.
  • Save drawing to a non-transparent image (png or jpg) or a transparent image (png only)
  • Use vector concept. So sketches won't be cropped in different sizes of canvas.
  • Support translucent colors and eraser.
  • Support drawing on an image (Thanks to diego-caceres-galvan)
  • High performance (See below. Thanks to jeanregisser)
  • Can draw multiple canvases in the same screen.
  • Can draw multiple multiline text on canvas.

Installation


Install from yarn (only support RN >= 0.40)

yarn add react-native-seaart-sketch-canvas

Usage


● Using without UI component (for customizing UI)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
} from 'react-native';

import { SketchCanvas } from 'react-native-seaart-sketch-canvas';

export default class example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <SketchCanvas
            style={{ flex: 1 }}
            strokeColor={'red'}
            strokeWidth={7}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('example', () => example);

Properties


| Prop | Type | Description | |:------------------------|:----------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | style | object | Styles to be applied on canvas component | | strokeColor | string | Set the color of stroke, which can be #RRGGBB or #RRGGBBAA. If strokeColor is set to #00000000, it will automatically become an eraser. NOTE: Once an eraser path is sent to Android, Android View will disable hardware acceleration automatically. It might reduce the canvas performance afterward. | | strokeWidth | number | The thickness of stroke | | onStrokeStart | function | An optional function which accepts 2 arguments x and y. Called when user's finger touches the canvas (starts to draw) | | onStrokeChanged | function | An optional function which accepts 2 arguments x and y. Called when user's finger moves | | onStrokeEnd | function | An optional function called when user's finger leaves the canvas (end drawing) | | onSketchSaved | function | An optional function which accepts 2 arguments success and path. If success is true, image is saved successfully and the saved image path might be in second argument. In Android, image path will always be returned. In iOS, image is saved to camera roll or file system, path will be set to null or image location respectively. | | onPathsChange | function | An optional function which accepts 1 argument pathsCount, which indicates the number of paths. Useful for UI controls. (Thanks to toblerpwn) | | user | string | An identifier to identify who draws the path. Useful when undo between two users | | touchEnabled | bool | If false, disable touching. Default is true. | | localSourceImage | object | Require an object (see below) which consists of filename, directory(optional) and mode(optional). If set, the image will be loaded and display as a background in canvas. (Thanks to diego-caceres-galvan))(Here for details) | | permissionDialogTitle | string | Android Only: Provide a Dialog Title for the Image Saving PermissionDialog. Defaults to empty string if not set | | permissionDialogMessage | string | Android Only: Provide a Dialog Message for the Image Saving PermissionDialog. Defaults to empty string if not set |

Methods


| Method | Description | |:------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clear() | Clear all the paths | | undo() | Delete the latest path. Can undo multiple times. | | addPath(path) | Add a path (see below) to canvas. | | deletePath(id) | Delete a path with its id | | save(imageType, transparent, folder, filename, includeImage, cropToImageSize) | Save image to camera roll or filesystem. If localSourceImage is set and a background image is loaded successfully, set includeImage to true to include background image and set cropToImageSize to true to crop output image to background image.Android: Save image in imageType format with transparent background (if transparent sets to True) to /sdcard/Pictures/folder/filename (which is Environment.DIRECTORY_PICTURES).iOS: Save image in imageType format with transparent background (if transparent sets to True) to camera roll or file system. If folder and filename are set, image will save to temporary directory/folder/filename (which is NSTemporaryDirectory()) | | getPaths() | Get the paths that drawn on the canvas | | getBase64(imageType, transparent, includeImage, cropToImageSize, callback) | Get the base64 of image and receive data in callback function, which called with 2 arguments. First one is error (null if no error) and second one is base64 result. |

Constants


| Constant | Description | |:------------|:-------------------------------------------------------------------------------------| | MAIN_BUNDLE | Android: empty string, '' iOS: equivalent to [[NSBundle mainBundle] bundlePath] | | DOCUMENT | Android: empty string, '' iOS: equivalent to NSDocumentDirectory | | LIBRARY | Android: empty string, '' iOS: equivalent to NSLibraryDirectory | | CACHES | Android: empty string, '' iOS: equivalent to NSCachesDirectory |

Example


The source code includes 3 examples, using build-in UI components, using with only canvas, and sync between two canvases.

Check full example app in the example folder