React Native Signature InkChữ ký vẽ bằng chính engine mực của nền tảng

PencilKit trên iOS, renderer velocity-Bezier tinh chỉnh kỹ trên Android. Một Fabric component với toolbar native, ref API có type đầy đủ và xuất PNG, JPEG, SVG, stroke data. Không Skia, không WebView.

Bắt đầu

Thử ngay trên trình duyệt

API reference

✍️

Mực native thật sự

iOS vẽ bằng PencilKit, hỗ trợ lực nhấn và Apple Pencil. Android chạy renderer velocity-Bezier viết bằng Kotlin, nét mảnh dần khi bút di chuyển nhanh.

iOS và Android

🧰

Toolbar có sẵn

Undo, redo, xoá và copy dùng được ngay, thêm nút tuỳ chỉnh bằng icon hoặc chữ và menu overflow tự động.

Toolbar

🖼️

Xuất ảnh đủ định dạng

PNG hoặc JPEG dạng base64 hoặc file, SVG, clipboard hệ thống và thư viện ảnh, có thể cắt sát vùng chữ ký.

Định dạng xuất

🔁

Stroke data và replay

Lưu nét vẽ dưới dạng JSON, khôi phục lại sau và phát lại chữ ký thành animation với tốc độ tuỳ ý.

Stroke data

⚡

Ưu tiên Fabric

Xây trên New Architecture với codegen spec. Việc vẽ không bao giờ đi qua JS thread, và view được tái sử dụng gọn gàng giữa các màn hình.

Hiệu năng

📏

Kích thước như nhau ở mọi nơi

Mọi độ dày và khoảng cách đều tính bằng point hoặc dp, nên chữ ký trông giống nhau trên mọi mật độ màn hình và trên cả hai nền tảng.

Props

Cài đặt

npmyarnExpo

npm install react-native-signature-ink

yarn add react-native-signature-ink

npx expo install react-native-signature-ink
npx expo prebuild

Sau đó chạy pod install trong ios/. Component cần New Architecture. Xem Cài đặt để biết về quyền truy cập và Expo.

Ký và xuất ảnh chỉ với vài dòng

tsx

import { useRef } from 'react';
import { SignatureInk, type SignatureInkHandle } from 'react-native-signature-ink';

const ref = useRef<SignatureInkHandle>(null);

<SignatureInk ref={ref} style={{ height: 240 }} showBaseline showToolbar />;

const png = await ref.current?.toBase64({ trim: true }); // base64 thuần, không có tiền tố data:

Xem trên thiết bị thật

iOS

Android