React Native Signature InkSignatures drawn by the platform's own ink

PencilKit on iOS, a hand-tuned velocity-Bezier renderer on Android. One Fabric component with a native toolbar, a typed ref API and PNG, JPEG, SVG and stroke-data export. No Skia, no WebView.

Get started

Try it in the browser

API reference

✍️

Truly native ink

iOS draws with PencilKit, with pressure and Apple Pencil support. Android runs a Kotlin velocity-Bezier renderer that thins the line as the pen speeds up.

iOS vs Android

🧰

Built-in toolbar

Undo, redo, clear and copy out of the box, plus custom icon or text buttons and an automatic overflow menu.

Toolbar

🖼️

Real exports

PNG or JPEG as base64 or a file, SVG, the system clipboard and the photo library, with optional trimming to the signature.

Export formats

🔁

Stroke data and replay

Save the strokes as JSON, restore them later and replay the signature as an animation at any speed.

Stroke data

⚡

Fabric-first

Built on the New Architecture with codegen specs. Drawing never touches the JS thread, and views recycle cleanly between screens.

Performance

📏

Same size everywhere

Every width and offset is in points or dp, so a signature looks the same on every screen density and on both platforms.

Props

Install

npmyarnExpo

npm install react-native-signature-ink

yarn add react-native-signature-ink

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

Then run pod install in ios/. The component needs the New Architecture. See Installation for permissions and Expo details.

Capture and export in a few lines

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 }); // raw base64, no data: prefix

See it on a device

iOS

Android