jgrancher / React Native Sketch
Licence: mit
🎨 A React Native <Sketch /> component for touch-based drawing.
Stars: ✭ 627
Projects that are alternatives of or similar to React Native Sketch
Ypdrawsignatureview
Capture signature view in Swift and export it as a vector graphics or bitmap
Stars: ✭ 279 (-55.5%)
Mutual labels: drawing, signature
React Native Sketch View
A React Native component for touch based drawing supporting iOS and Android.
Stars: ✭ 97 (-84.53%)
Mutual labels: sketch, touch
React Sketch
Sketch Tool for React-based applications, backed up by FabricJS
Stars: ✭ 414 (-33.97%)
Mutual labels: drawing, sketch
Signature pad
HTML5 canvas based smooth signature drawing
Stars: ✭ 7,623 (+1115.79%)
Mutual labels: drawing, signature
Freedrawview
A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.
Stars: ✭ 627 (+0%)
Mutual labels: drawing, signature
Sketch Mate
These plugins will make you best friends with Sketch.
Stars: ✭ 508 (-18.98%)
Mutual labels: sketch
Sketch Styles Generator
Generate hundreds of Sketch Shared Styles in a matter of seconds.
Stars: ✭ 537 (-14.35%)
Mutual labels: sketch
Sketch Sf Ui Font Fixer
A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/SF UI Display fonts to what it would be when used in an iOS app.
Stars: ✭ 492 (-21.53%)
Mutual labels: sketch
Macos Ui Kit
💎 The most detailed and accurate macOS UI Kit for Sketch. This Sketch Library includes common Mac interface elements, cursors, and a Touch Bar UI Kit.
Stars: ✭ 551 (-12.12%)
Mutual labels: sketch
Ethereumjs Util
Project is in active development and has been moved to the EthereumJS monorepo.
Stars: ✭ 534 (-14.83%)
Mutual labels: signature
Imagesharp
📷 A modern, cross-platform, 2D Graphics library for .NET
Stars: ✭ 5,186 (+727.11%)
Mutual labels: drawing
Tap
1Kb library for easy unified handling of user interactions such as mouse, touch and pointer events.
Stars: ✭ 541 (-13.72%)
Mutual labels: touch
Drawsana
An open source library that lets your users draw on things - mark up images with text, shapes, etc.
Stars: ✭ 482 (-23.13%)
Mutual labels: drawing
Sketch simplification
Models and code related to sketch simplification of rough sketches.
Stars: ✭ 531 (-15.31%)
Mutual labels: sketch
Pixi Viewport
A highly configurable viewport/2D camera designed to work with pixi.js
Stars: ✭ 532 (-15.15%)
Mutual labels: touch
🎨 React Native Sketch
A React Native component for touch-based drawing.
Features
- 👆 Draw with your finger, and export an image from it.
- 🖍 Change the stroke color and thickness on the fly.
- 👻 Generate a transparent image (or not).
Setup
Install the module from npm:
npm i -S react-native-sketch
Link the module to your project:
react-native link react-native-sketch
Usage
import React from 'react';
import { Alert, Button, View } from 'react-native';
import Sketch from 'react-native-sketch';
export default class MyPaint extends React.Component {
save = () => {
this.sketch.save().then(({ path }) => {
Alert.alert('Image saved!', path);
});
};
render() {
return (
<View style={{ flex: 1 }}>
<Sketch
ref={sketch => {
this.sketch = sketch;
}}
strokeColor="#ff69b4"
strokeThickness={3}
/>
<Button onPress={this.save} title="Save" />
</View>
);
}
}
API
Here are the props of the the component:
| Name | Type | Default value | Comment |
|---|---|---|---|
fillColor |
String |
null |
The color of the sketch background. Default to null to keep it transparent! Note: This is different from the style.backgroundColor property, as the former will be seen in your exported drawing image, whereas the latter is only used to style the view.
|
imageType |
String |
png |
The type of image to export. Can be png or jpg. Default to png to get transparency out of the box. |
onChange |
Function |
() => {} |
Callback function triggered after every change on the drawing. The function takes one argument: the actual base64 representation of your drawing. |
onClear |
Function |
() => {} |
Callback function triggered after a clear has been triggered. |
strokeColor |
String |
'#000000' |
The stroke color you want to draw with. |
strokeThickness |
Number |
1 |
The stroke thickness, in pixels. |
style |
Style object | null |
Some View styles if you need. |
The component also has some instance methods:
| Name | Return type | Comment |
|---|---|---|
clear() |
Promise |
Clear the drawing. This method is a Promise mostly to be consistent with save(), but you could simply type: this.sketch.clear();
|
save() |
Promise |
Save the drawing to an image, using the defined props as settings (imageType, fillColor, etc...). The Promise resolves with an object containing the path property of that image. Ex: this.sketch.save().then(image => console.log(image.path));
|
Examples
The project contains a folder examples that contains few demos of how to use react-native-sketch. Just copy and paste the code to your React Native application.
-
Basic: uses the bare minimum to make it work. -
Digital Touch: tries to reproduce the look and feel of iOS Message Digital Touch.
Feel free to play with them!
Known issues
- Rotating the screen gets to a weird behavior of the sketch view: #23
Notes
- If you're using Expo, you will have to
detachto ExpoKit, as this module uses native iOS code. - The module is available only on iOS for now, as I don't know Android development... But if you think you can help on that matter, please feel free to create a Pull Request!
- The module uses this smooth freehand drawing technique under the hood.
Contributing
Feel free to contribute by sending a pull request or creating an issue.
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].