react-native-signature-canvas-lite

A lightweight, customizable signature canvas component for React Native, supporting signature capture as an image using react-native-view-shot.

Features

• Draw and capture signature using touch
• Export as PNG image
• Fully customizable (colors, stroke width, labels)
• Easy to integrate and lightweight

Installation

npm install react-native-signature-canvas-lite
# or
yarn add react-native-signature-canvas-lite

You also need to install react-native-svg and react-native-view-shot:

npm install react-native-svg react-native-view-shot
npx pod-install

Usage

import React from 'react';
import { View } from 'react-native';
import { SignatureCanvas } from 'react-native-signature-canvas-lite';

const MySignatureScreen = () => {
  const handleCapture = (uri: string) => {
    console.log('Captured signature URI:', uri);
  };

  return (
    <View style={{ flex: 1 }}>
      <SignatureCanvas onCapture={handleCapture} />
    </View>
  );
};

export default MySignatureScreen;

Props

| Prop | Type | Default | Description | |-------------------|----------------------|-----------------------|------------------------------------------| | onCapture | (uri: string) => void | () => {} | Called with URI after capture | | containerStyle | ViewStyle | {} | Custom style for the outer container | | strokeColor | string | 'black' | Signature stroke color | | strokeWidth | number | 2 | Stroke width | | viewShotOptions | ViewShotOptions | { format: 'png', quality: 1 } | Image capture options | | clearText | string | 'Clear' | Text on the clear button | | saveText | string | 'Save' | Text on the save button |

License

MIT

Keywords

[
  "react-native",
  "signature",
  "lite",
  "canvas",
  "signature-canvas",
  "signature-pad",
  "react-native-component",
  "signature-capture",
  "drawing-canvas",
  "esignature",
  "react-native-signature"
]