How to save a drawing as an image with a background in react-native-sketch-canvas?

Use the save method with parameters like includeImage and cropToImageSize. Set includeImage to true to include the background image, and cropToImageSize to true to crop the output to the image size, as detailed in the SavePreference object.

Is react-native-sketch-canvas good for signature capture in mobile apps?

Yes, it's well-suited for signature capture with features like stroke customization, undo/redo, and export to PNG/JPG. The vector-based drawing ensures signatures remain clear at any resolution.

react-native-sketch-canvas vs react-native-signature-capture for drawing features?

react-native-sketch-canvas offers more features like vector drawing, background images, and text annotations, but may have performance issues on iOS. react-native-signature-capture is simpler and focused on signatures, with potentially better out-of-the-box performance.

How to handle undo and redo functionality in react-native-sketch-canvas?

The library provides built-in undo() and redo() methods. You can use the undo component in the built-in UI or call these methods programmatically to manage stroke history, as shown in the usage examples.

Does react-native-sketch-canvas support custom fonts for text annotations?

Yes, you can specify custom fonts in the CanvasText object by setting the font property to load TTF files from assets. However, setup requires platform-specific steps, like adding fonts to native project directories.

What are the performance impacts of using eraser mode in react-native-sketch-canvas?

On Android, using the eraser (via transparent stroke color) disables hardware acceleration, which can reduce canvas performance. The README warns about this in the strokeColor property description.

Open-Awesome

react-native-sketch-canvas

MITJavaScript

A React Native component for drawing by touch on iOS and Android with vector-based strokes, undo/redo, and image export.

GitHub

717 stars453 forks0 contributors

What is react-native-sketch-canvas?

react-native-sketch-canvas is a React Native library that provides a touch-based drawing component for iOS and Android apps. It allows users to draw, sketch, annotate images, or capture signatures directly within a mobile interface. The component uses vector graphics to ensure drawings remain crisp at any scale and includes features like undo/redo, stroke customization, and image export.

Target Audience

React Native developers building mobile applications that require drawing, sketching, annotation, or signature capture functionality, such as note-taking apps, design tools, educational platforms, or document signing workflows.

Value Proposition

Developers choose this library for its cross-platform compatibility, high-performance vector-based rendering, and extensive customization options. It eliminates the need to build native drawing components from scratch and provides a robust, feature-rich solution that handles complex interactions like real-time stroke editing and multi-canvas support.

Overview

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

Use Cases

Best For

Adding signature capture to React Native mobile apps
Building drawing or sketching features in educational or creative applications
Implementing image annotation tools for photo editing or mark-up
Creating collaborative whiteboarding or brainstorming interfaces
Developing note-taking apps with freehand drawing capabilities
Integrating touch-based canvas interactions for prototyping or design tools

Not Ideal For

Apps requiring high-performance drawing with transparent strokes on iOS (CPU usage can hit 100%)
Projects needing pixel-based or raster drawing where cropping is desired over vector scaling
Teams wanting a fully styled, drop-in drawing component without custom UI work (even the built-in UI requires significant customization)
Applications that rely on advanced features like pressure sensitivity, layer management, or custom brush effects

Pros & Cons

Pros

Cross-Platform Compatibility

Provides a unified React Native API for both iOS and Android, eliminating the need for separate native implementations, as emphasized in the features.

Vector-Based Drawing

Uses vector paths so sketches scale without quality loss and aren't cropped on different canvas sizes, ensuring crisp output at any scale.

Real-Time Customization

Allows changing stroke thickness, color (including translucent), and eraser mode while drawing, enabling dynamic user interactions without resetting the canvas.

Data Serialization and Sync

Supports serializing path data to JSON for easy syncing across devices or collaborative editing, a key feature for multi-user applications.

Cons

iOS Performance Issues

The README admits that using transparent paths on iOS can cause CPU usage to spike to 100%, severely impacting performance in drawing-intensive apps.

Complex Background Setup

Loading background images requires platform-specific file paths and directory constants (e.g., MAIN_BUNDLE), which is error-prone and adds development overhead.

Limited Advanced Features

Focuses on basic strokes and text annotations; lacks support for pressure sensitivity, custom brushes, or layer management, limiting use in professional art tools.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,879

Forks2,101

Last commit25 days ago

lottie-react-native

Lottie wrapper for React Native.

React Native Mapview component for iOS + Android

Stars15,967

Forks4,954

Last commit2 months ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,424

Forks3,608