React Native Signature Canvas

React Native Signature Canvas is a simple and easy to use library that allows you to capture user's signature in your React Native app. It is built using React Native and supports both Android and iOS platforms.

Features

• Simple and intuitive API
• Supports both Android and iOS platforms
• Customizable signature view
• Easy to integrate with your existing React Native project

Installation

To install React Native Signature Canvas, simply run the following command:

npm install react-native-signature-canvas

Usage

To use React Native Signature Canvas, simply add the SignatureView component to your React Native app.

Here's an example:

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import SignatureView from 'react-native-signature-canvas';

const App = () => {
  const signatureRef = useRef(null);
  
  const handleOnPress = () => {
    signatureRef.current.clearSignature();
  };
  
  const handleOnSave = signature => {
    console.log(signature);
  };
  
  return (
    <View>
      <SignatureView
        ref={signatureRef}
        onSave={handleOnSave}
      />
      
      <Button
        title="Clear signature"
        onPress={handleOnPress}
      />
    </View>
  );
};

export default App;

In the example above, we are using the SignatureView component to capture user's signature. We are also adding a button that allows us to clear the signature if we need to.

Props

The SignatureView component accepts the following props:

| Prop | Type | Description | | --- | --- | --- | | onSave | function | A callback function that is called when the user saves their signature. The function receives the signature as a base64 encoded string. | | strokeColor | string | The color of the signature strokes. Default is 'black'. | | strokeWidth | number | The width of the signature strokes. Default is 2. | | canvasStyle | object | The style of the signature canvas. | | imageType | string | The type of image format you want the signature to be saved as. Default is 'png'. | | imageDataURL | string | The base64 encoded image data of the saved signature. |

Conclusion

React Native Signature Canvas is a simple and easy to use library that allows you to capture user's signature in your React Native app. It is built using React Native and supports both Android and iOS platforms. It is a great addition to your React Native toolkit if you need to capture signatures in your app.