React Native Signature Canvas

https://github.com/yanyuanfe/react-native-signature-canvas
Admin
A performant React Native component for capturing signatures and drawing on a canvas with smooth,...
Tokens:32,229
Snippets:343
Trust Score:9.4
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Development Setup Commands

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Use these commands to clone the repository, install necessary dependencies, and launch the example application.

```bash
# Clone the repository
git clone https://github.com/YanYuanFE/react-native-signature-canvas.git

# Install dependencies
cd react-native-signature-canvas
npm install

# Run example apps
cd example/expo-app
npm install && npm start
```

--------------------------------

### Change Pen Size Implementation Example

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Example showing how to update the pen size range using a ref and a size selector UI.

```jsx
const ref = useRef();
const [penSize, setPenSize] = useState('medium');

const sizes = {
  thin: { min: 0.5, max: 1.5, label: 'Thin' },
  medium: { min: 0.5, max: 2.5, label: 'Medium' },
  thick: { min: 1, max: 3.5, label: 'Thick' },
};

const handleSizeChange = (size) => {
  setPenSize(size);
  const config = sizes[size];
  ref.current?.changePenSize(config.min, config.max);
};

<SignatureCanvas
  ref={ref}
  minWidth={sizes[penSize].min}
  maxWidth={sizes[penSize].max}
  onChangePenSize={() => console.log('Pen size changed to:', penSize)}
/>
<View style={styles.sizeSelector}>
  {Object.keys(sizes).map((s) => (
    <Button
      key={s}
      title={sizes[s].label}
      onPress={() => handleSizeChange(s)}
    />
  ))}
</View>
```

--------------------------------

### Install react-native-signature-canvas

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/README.md

Install the package and its required peer dependency, then run pod install for iOS projects.

```bash
npm install react-native-signature-canvas
npm install react-native-webview  # Peer dependency
cd ios && pod install              # iOS only
```

--------------------------------

### Change Pen Color Implementation Example

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Example showing how to update the pen color using a ref and a color picker UI.

```jsx
const ref = useRef();
const [penColor, setPenColor] = useState('#000000');

const colors = [
  { name: 'Black', value: '#000000' },
  { name: 'Red', value: '#FF0000' },
  { name: 'Blue', value: '#0000FF' },
  { name: 'Green', value: '#00AA00' },
];

const handleColorChange = (color) => {
  setPenColor(color);
  ref.current?.changePenColor(color);
};

<SignatureCanvas
  ref={ref}
  penColor={penColor}
  onChangePenColor={() => console.log('Color changed to:', penColor)}
/>
<View style={styles.colorPicker}>
  {colors.map((c) => (
    <TouchableOpacity
      key={c.value}
      style={{
        backgroundColor: c.value,
        borderWidth: penColor === c.value ? 3 : 0,
      }}
      onPress={() => handleColorChange(c.value)}
    >
      <Text>{c.name}</Text>
    </TouchableOpacity>
  ))}
</View>
```

--------------------------------

### Configure WebView performance modes

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Examples for setting up high-performance or low-memory modes via webviewProps.

```jsx
// High-performance mode
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
/>
```

```jsx
// Low-memory mode
<SignatureCanvas
  webviewProps={{
    cacheEnabled: false,
    androidLayerType: "software",
    androidHardwareAccelerationDisabled: true,
  }}
/>
```

--------------------------------

### Install react-native-signature-canvas

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/QUICK_START.md

Commands to install the package and required WebView dependency for React Native CLI projects.

```bash
# Install the package
npm install react-native-signature-canvas

# For React Native CLI projects, also install WebView
npm install react-native-webview
cd ios && pod install # iOS only
```

--------------------------------

### Start Metro Development Server

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/example/signapp/README.md

Run the Metro JavaScript build tool from the project root to enable development features.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/example/signapp/README.md

Commands for setting up and updating native iOS dependencies via CocoaPods.

```sh
bundle install
```

```sh
bundle exec pod install
```

--------------------------------

### Injected JavaScript Examples

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Examples of the resulting JavaScript strings injected into the WebView for various method calls.

```javascript
// ref.current?.undo()
undo();true;

// ref.current?.changePenColor("#FF0000")
changePenColor("#FF0000");true;

// ref.current?.changePenSize(1, 2)
changePenSize(1,2);true;
```

--------------------------------

### WebView Configuration Variables

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Variables initialized during WebView setup to define drawing behavior and appearance.

```javascript
var penColor = '<%penColor%>';           // Color for drawing
var backgroundColor = '<%backgroundColor%>'; // Canvas background
var dotSize = <%dotSize%>;               // Single dot radius (null or number)
var minWidth = <%minWidth%>;             // Min line width
var maxWidth = <%maxWidth%>;             // Max line width
var minDistance = <%minDistance%>;       // Min distance between points
var autoClear = <%autoClear%>;           // Auto-clear after save
var trimWhitespace = <%trimWhitespace%>; // Trim image edges
var dataURL = <%dataURL%>;               // Initial signature
var imageType = '<%imageType%>';         // Export format
```

--------------------------------

### Parameter Sanitization Examples

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Demonstrates how different data types are processed by the sanitization function.

```javascript
getParamForInjection("#FF0000")     // "#FF0000" (quoted string)
getParamForInjection(2.5)            // 2.5 (number)
getParamForInjection({ x: 1 })      // {"x":1} (JSON object)
```

--------------------------------

### Install package for modern React Native or Expo

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Use these commands for projects using React Native 0.60.0+ or Expo SDK 35.0.0+.

```bash
yarn add react-native-signature-canvas
```

```bash
npm install --save react-native-signature-canvas
```

--------------------------------

### Configure SignatureCanvas Callbacks

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Example usage of various event, data, and system callbacks within the SignatureCanvas component.

```jsx
<SignatureCanvas
  onBegin={() => console.log('Drawing started')}
  onEnd={() => console.log('Drawing ended')}
  onOK={(sig) => saveSignature(sig)}
  onEmpty={() => alert('Please draw a signature')}
  onClear={() => resetUI()}
  onError={(error) => logError(error)}
  onLoadEnd={() => setReady(true)}
/>
```

--------------------------------

### Install package for legacy React Native or Expo

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Use this specific version for older projects running React Native < 0.60.0 or Expo SDK < 33.0.0.

```bash
npm install --save react-native-signature-canvas@1.4.2
```

--------------------------------

### Reinitialize Usage Example

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Demonstrates reinitializing the component when a modal closes to handle iOS lifecycle issues.

```jsx
const ref = useRef();
const [isModalVisible, setIsModalVisible] = useState(false);
const [savedSignature, setSavedSignature] = useState(null);

const handleModalOpen = () => {
  setIsModalVisible(true);
};

const handleModalClose = () => {
  setIsModalVisible(false);
  // Reinitialize WebView when modal closes (iOS lifecycle)
  ref.current?.reinitialize();
  // Restore previous signature if available
  if (savedSignature) {
    ref.current?.setDataURL(savedSignature);
  }
};

<Modal visible={isModalVisible}>
  <SignatureCanvas
    ref={ref}
    onOK={(sig) => setSavedSignature(sig)}
  />
  <Button title="Close" onPress={handleModalClose} />
</Modal>
<Button title="Sign" onPress={handleModalOpen} />
```

--------------------------------

### Install react-native-webview dependency

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Required for React Native CLI projects to ensure the underlying WebView component is properly linked.

```bash
yarn add react-native-webview
cd ios && pod install
```

--------------------------------

### Setup Signature Canvas Event Listeners

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Attaches click event listeners to the clear and save buttons to trigger signature processing functions.

```javascript
if (clearButton) {
    clearButton.addEventListener("click", clearSignature);
}

if (saveButton) {
    saveButton.addEventListener("click", function() {
        readSignature();
        setTimeout(function() {
            getData();
        }, 10);
    });
}
```

--------------------------------

### Project File Structure

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Overview of the repository layout including core components, TypeScript definitions, and WebView assets.

```text
react-native-signature-canvas/
├── index.js                 # Main React component
├── index.d.ts              # TypeScript definitions
├── package.json            # Package metadata
├── h5/                     # WebView content
│   ├── html.js            # HTML template generator
│   ├── js/
│   │   ├── app.js         # Canvas control logic & event handlers
│   │   └── signature_pad.js # Signature pad library (v3.0.0-beta.3)
├── README.md              # User documentation
├── WEBVIEW_PROPS.md       # WebView customization guide
└── QUICK_START.md         # Quick start guide
```

--------------------------------

### Configure WebView Settings

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/QUICK_START.md

Common configurations for performance, memory management, and security via webviewProps.

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: false,
    androidLayerType: "software", 
    androidHardwareAccelerationDisabled: true,
  }}
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    allowFileAccess: false,
    allowFileAccessFromFileURLs: false,
    mixedContentMode: "never",
    allowsLinkPreview: false,
  }}
/>
```

--------------------------------

### Build and Run iOS Application

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/example/signapp/README.md

Execute the build process for the iOS platform using the configured package manager.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Configure Background and Overlay Images

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Apply custom background or overlay images by specifying dimensions and web styles. Overlay images must be PNGs with transparent backgrounds.

```jsx
const imgWidth = 300;
const imgHeight = 200;
const style = `.m-signature-pad {box-shadow: none; border: none; } 
              .m-signature-pad--body {border: none;}
              .m-signature-pad--footer {display: none; margin: 0px;}
              body,html {
              width: ${imgWidth}px; height: ${imgHeight}px;}`;

<View style={{ width: imgWidth, height: imgHeight }}>
  <SignatureCanvas
    ref={ref}
    bgSrc="https://example.com/background.jpg"
    bgWidth={imgWidth}
    bgHeight={imgHeight}
    webStyle={style}
    onOK={handleSignature}
  />
</View>
```

```jsx
const imgWidth = 256;
const imgHeight = 256;
const style = `.m-signature-pad {box-shadow: none; border: none; } 
              .m-signature-pad--body {border: none;}
              .m-signature-pad--footer {display: none; margin: 0px;}
              body,html {
              width: ${imgWidth}px; height: ${imgHeight}px;}`;

<View style={{ width: imgWidth, height: imgHeight }}>
  <SignatureCanvas
    ref={ref}
    overlaySrc="https://example.com/overlay.png" // Must be PNG with transparent background
    overlayWidth={imgWidth}
    overlayHeight={imgHeight}
    webStyle={style}
    onOK={handleSignature}
  />
</View>
```

--------------------------------

### Build and Run Android Application

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/example/signapp/README.md

Execute the build process for the Android platform using the configured package manager.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Implement Basic SignatureCanvas

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/README.md

Initialize the component with a ref to access its methods and define basic styling properties.

```jsx
import React, { useRef } from 'react';
import SignatureCanvas from 'react-native-signature-canvas';

const MyComponent = () => {
  const ref = useRef();

  return (
    <SignatureCanvas
      ref={ref}
      onOK={(signature) => console.log(signature)}
      penColor="black"
      backgroundColor="white"
    />
  );
};
```

--------------------------------

### Initializing SignaturePad

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Configuration of the SignaturePad object using the injected constants.

```javascript
signaturePad = new SignaturePad(canvas, {
  onBegin: () => postMessage("BEGIN"),
  onEnd: () => postMessage("END"),
  penColor: penColor,
  backgroundColor: backgroundColor,
  dotSize: dotSize,
  minWidth: minWidth,
  maxWidth: maxWidth,
  minDistance: minDistance,
});
```

--------------------------------

### Configure Performance Presets

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Adjust webviewProps and stroke parameters to optimize performance based on device hardware capabilities.

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
  minWidth={0.5}
  maxWidth={2.5}
  minDistance={5}
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: false,
    androidLayerType: "software",
    androidHardwareAccelerationDisabled: true,
  }}
  minWidth={1}
  maxWidth={2}
  minDistance={10}
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
  }}
  minWidth={0.5}
  maxWidth={2.5}
  minDistance={5}
/>
```

--------------------------------

### Implement v5.x New Features

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Demonstrates the use of the new onError callback and webviewProps for WebView customization.

```jsx
// NEW: Enhanced error handling
<SignatureCanvas
  onError={(error) => console.error(error)} // New callback
/>

// NEW: WebView customization
<SignatureCanvas
  webviewProps={{ // New prop
    cacheEnabled: false,
    androidLayerType: "software"
  }}
/>
```

--------------------------------

### Inject Initial Scripts via WebView Source

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Uses useMemo to generate the HTML source for the WebView, incorporating injected scripts and template variables.

```javascript
const source = useMemo(() => {
  const htmlContentValue = customHtml || htmlContent;
  let html = htmlContentValue(injectedScript);
  // ... replace template variables ...
  return { html };
}, [injectedScript, ...dependencies]);

// WebView receives: <WebView source={source} />
```

--------------------------------

### Component State Management

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Initializes core state variables and refs for managing WebView lifecycle, error handling, and signature data persistence.

```javascript
const [loading, setLoading] = useState(true);        // WebView loading
const [hasError, setHasError] = useState(false);     // Error state
const [retryCount, setRetryCount] = useState(0);     // Retry attempts
const [webViewKey, setWebViewKey] = useState(0);     // Force remount key

const webViewRef = useRef();                         // WebView reference
const currentDataURLRef = useRef(dataURL);           // Current signature data
const prevDataURLRef = useRef(dataURL);              // Previous data URL
```

--------------------------------

### Resolve Signature Pad Loading Issues

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Provides a configuration to debug loading states and handle errors during component initialization.

```jsx
// Solution: Add error handling and check WebView props
<SignatureCanvas
  onError={(error) => console.log('Error:', error)}
  onLoadEnd={() => console.log('Loaded successfully')}
  webviewProps={{
    startInLoadingState: true,
    renderLoading: () => <ActivityIndicator />
  }}
/>
```

--------------------------------

### Optimize Performance

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/README.md

Configure webviewProps to enable hardware acceleration and caching for improved rendering performance.

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
/>
```

--------------------------------

### Implement Basic Signature Canvas

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/QUICK_START.md

A minimal implementation using refs to trigger clear and save actions.

```jsx
import React, { useRef, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

export default function App() {
  const ref = useRef();
  const [signature, setSignature] = useState();

  const handleOK = (signature) => {
    console.log(signature);
    setSignature(signature);
  };

  const handleClear = () => {
    ref.current?.clearSignature();
  };

  const handleSave = () => {
    ref.current?.readSignature();
  };

  return (
    <View style={styles.container}>
      <SignatureCanvas
        ref={ref}
        onOK={handleOK}
        onEmpty={() => console.log('Empty')}
        descriptionText="Sign here"
        clearText="Clear"
        confirmText="Save"
        style={styles.signature}
      />
      
      <View style={styles.buttons}>
        <Button title="Clear" onPress={handleClear} />
        <Button title="Save" onPress={handleSave} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  signature: {
    flex: 1,
    borderColor: '#000033',
    borderWidth: 1,
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
  },
});
```

--------------------------------

### Apply Platform-Specific Configuration

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Use Platform.OS to conditionally apply props based on the target operating system.

```jsx
import { Platform } from 'react-native';

<SignatureCanvas
  androidLayerType={Platform.OS === 'android' ? 'hardware' : undefined}
  webviewProps={Platform.OS === 'ios' ? {
    decelerationRate: 'fast',
  } : {
    textZoom: 100,
  }}
/>
```

--------------------------------

### Configure SignatureCanvas WebView Integration

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Demonstrates basic WebView integration options including styling and nested scrolling.

```jsx
<SignatureCanvas
  androidLayerType="hardware"
  nestedScrollEnabled={true}
  showsVerticalScrollIndicator={false}
  webviewContainerStyle={{ borderRadius: 10 }}
  webStyle={`
    .m-signature-pad { border-radius: 10px; }
    .button { background-color: #FF6600; }
  `}
  webviewProps={{
    cacheEnabled: true,
    bounces: false,
  }}
/>
```

--------------------------------

### Inject Custom CSS

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Apply custom styles to the signature pad interface using the webStyle prop.

```javascript
webStyle={`
  .m-signature-pad { border-radius: 10px; }
  .button { background: blue; }
`}
```

--------------------------------

### Implement Signature Pad in a Modal

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/usage-examples.md

Uses a ref to control the signature canvas and reinitializes the WebView on iOS to ensure stability when the modal is opened.

```jsx
import React, { useRef, useState } from 'react';
import { View, Button, Modal, Text, StyleSheet } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

export default function ModalSignatureApp() {
  const ref = useRef();
  const [modalVisible, setModalVisible] = useState(false);
  const [signature, setSignature] = useState(null);

  const handleSignature = (sig) => {
    setSignature(sig);
    setModalVisible(false);
  };

  const handleCancel = () => {
    ref.current?.clearSignature();
    setModalVisible(false);
  };

  const openSignaturePad = () => {
    setModalVisible(true);
    // Reinitialize WebView on iOS to recover from termination
    setTimeout(() => {
      ref.current?.reinitialize();
    }, 100);
  };

  return (
    <View style={styles.container}>
      <Text>
        {signature ? 'Signature Captured ✓' : 'No signature yet'}
      </Text>
      
      <Button title="Add Signature" onPress={openSignaturePad} />

      <Modal visible={modalVisible} animationType="slide">
        <View style={styles.modalContainer}>
          <Text style={styles.title}>Sign Here</Text>
          
          <SignatureCanvas
            ref={ref}
            onOK={handleSignature}
            onEmpty={() => alert('Please draw a signature')}
            descriptionText="Sign above"
            style={styles.canvas}
          />

          <View style={styles.modalButtons}>
            <Button title="Cancel" onPress={handleCancel} />
            <Button title="Save" onPress={() => ref.current?.readSignature()} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  modalContainer: { flex: 1, padding: 20 },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
  canvas: { flex: 1, marginBottom: 10, borderWidth: 1 },
  modalButtons: { flexDirection: 'row', justifyContent: 'space-around' },
});
```

--------------------------------

### Implement Background and Overlay Images

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/usage-examples.md

Configures the SignatureCanvas component with specific background and overlay image sources and dimensions. Requires custom webStyle to align the signature pad container with the image dimensions.

```jsx
import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

export default function BackgroundImageApp() {
  const ref = useRef();

  const IMAGE_WIDTH = 300;
  const IMAGE_HEIGHT = 200;

  const customStyle = `
    .m-signature-pad {
      box-shadow: none;
      border: 2px solid #ccc;
    }
    .m-signature-pad--body {
      border: none;
    }
    .m-signature-pad--footer {
      display: none;
    }
    body, html {
      width: ${IMAGE_WIDTH}px;
      height: ${IMAGE_HEIGHT}px;
    }
  `;

  return (
    <View style={styles.container}>
      <View style={{ width: IMAGE_WIDTH, height: IMAGE_HEIGHT }}>
        <SignatureCanvas
          ref={ref}
          bgSrc="https://example.com/signature-box.png"
          bgWidth={IMAGE_WIDTH}
          bgHeight={IMAGE_HEIGHT}
          overlaySrc="https://example.com/watermark.png"
          overlayWidth={IMAGE_WIDTH}
          overlayHeight={IMAGE_HEIGHT}
          webStyle={customStyle}
          onOK={(sig) => console.log('Signature with background:', sig)}
        />
      </View>

      <View style={styles.buttons}>
        <Button 
          title="Save Signature" 
          onPress={() => ref.current?.readSignature()} 
        />
        <Button 
          title="Clear" 
          onPress={() => ref.current?.clearSignature()} 
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  buttons: { flexDirection: 'row', marginTop: 20, justifyContent: 'space-around' },
});
```

--------------------------------

### Implement Signature Capture Component

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

A full implementation of a signature pad screen including event handlers for capture, clearing, and error states.

```jsx
import React, { useRef, useState } from 'react';
import { StyleSheet, View, Image } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

const SignatureScreen = () => {
  const [signature, setSignature] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const ref = useRef();

  const handleSignature = (signature) => {
    console.log('Signature captured:', signature);
    setSignature(signature);
    setIsLoading(false);
  };

  const handleEmpty = () => {
    console.log('Signature is empty');
    setIsLoading(false);
  };

  const handleClear = () => {
    console.log('Signature cleared');
    setSignature(null);
  };

  const handleError = (error) => {
    console.error('Signature pad error:', error);
    setIsLoading(false);
  };

  const handleEnd = () => {
    setIsLoading(true);
    ref.current?.readSignature();
  };

  return (
    <View style={styles.container}>
      <View style={styles.preview}>
        {signature && (
          <Image
            resizeMode="contain"
            style={{ width: 335, height: 114 }}
            source={{ uri: signature }}
          />
        )}
      </View>
      <SignatureCanvas
        ref={ref}
        onEnd={handleEnd}
        onOK={handleSignature}
        onEmpty={handleEmpty}
        onClear={handleClear}
        onError={handleError}
        autoClear={true}
        descriptionText="Sign here"
        clearText="Clear"
        confirmText={isLoading ? "Processing..." : "Save"}
        penColor="#000000"
        backgroundColor="rgba(255,255,255,0)"
        webviewProps={{
          // Custom WebView optimization
          cacheEnabled: true,
          androidLayerType: "hardware",
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  preview: {
    width: 335,
    height: 114,
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 15,
  },
});

export default SignatureScreen;
```

--------------------------------

### Implement Basic Signature Capture

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/signature-canvas-component.md

A standard implementation showing how to capture, display, and save a signature using a ref and state.

```jsx
import React, { useRef, useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

export default function App() {
  const ref = useRef();
  const [signature, setSignature] = useState(null);

  const handleSignature = (sig) => {
    setSignature(sig);
  };

  return (
    <View style={styles.container}>
      {signature && (
        <Image
          source={{ uri: signature }}
          style={styles.preview}
        />
      )}
      <SignatureCanvas
        ref={ref}
        onOK={handleSignature}
        onEmpty={() => alert('Empty')}
        style={styles.signature}
      />
      <Button 
        title="Save" 
        onPress={() => ref.current?.readSignature()} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  signature: { flex: 1, borderWidth: 1 },
  preview: { height: 150, margin: 10 },
});
```

--------------------------------

### Configure Background and Overlay Images

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Adds background or overlay images to the canvas with specific dimensions.

```jsx
<SignatureCanvas
  bgSrc="https://example.com/signature-box.png"
  bgWidth={300}
  bgHeight={150}
  overlaySrc="https://example.com/watermark.png"
  overlayWidth={300}
  overlayHeight={150}
/>
```

--------------------------------

### High Performance Mode Configuration

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/WEBVIEW_PROPS.md

Enable hardware acceleration and caching for improved performance.

```jsx
<SignatureCanvas
  webviewProps={{
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
/>
```

--------------------------------

### Execute WebView Method

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Uses injectJavaScript to trigger methods within the WebView. Requires a valid webViewRef and properly formatted parameters.

```javascript
const executeWebViewMethod = useCallback((method, params = []) => {
  if (!webViewRef.current) {
    console.warn(`WebView ref is null when calling ${method}`);
    return;
  }

  try {
    const script = params.length > 0
      ? `${method}(${params.map(getParamForInjection).join(',')});true;`
      : `${method}();true;`;
    webViewRef.current.injectJavaScript(script);
  } catch (error) {
    console.error(`Error executing WebView method ${method}:`, error);
  }
}, []);
```

--------------------------------

### Injecting Props into WebView

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Constants injected into the WebView to configure the SignaturePad instance.

```javascript
// Generated script injected into WebView:
var penColor = '<%penColor%>';           // "black"
var backgroundColor = '<%backgroundColor%>'; // "rgba(255,255,255,0)"
var dotSize = <%dotSize%>;               // null or number
var minWidth = <%minWidth%>;             // 0.5
var maxWidth = <%maxWidth%>;             // 2.5
var minDistance = <%minDistance%>;       // 5
var autoClear = <%autoClear%>;           // true or false
var trimWhitespace = <%trimWhitespace%>; // true or false
var dataURL = <%dataURL%>;               // "" or base64 string
```

--------------------------------

### Migration to webviewProps

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/WEBVIEW_PROPS.md

Consolidate individual WebView props into the webviewProps object for cleaner configuration.

```jsx
<SignatureCanvas
  androidLayerType="hardware"
  androidHardwareAccelerationDisabled={false}
  // other props...
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
  }}
  // other props...
/>
```

--------------------------------

### LoadingOverlayProps Interface

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/signature-canvas-component.md

Configuration for the loading and error overlay display.

```typescript
type LoadingOverlayProps = {
  loadingOverlayStyle?: StyleProp<ViewStyle>;
  activityIndicatorProps?: React.ComponentProps<typeof ActivityIndicator>;
};
```

--------------------------------

### Configure Loading State WebView Props

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Manages the loading state and provides a custom loading component.

```jsx
webviewProps={{
  startInLoadingState: true,         // Show loading state initially
  renderLoading: () => <LoadingView />, // Custom loading component
}}
```

--------------------------------

### WebView Runtime Variables

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Variables created by the application to manage DOM elements and the SignaturePad instance.

```javascript
var wrapper;           // DOM element for signature pad
var clearButton;       // Clear button element
var saveButton;        // Save button element
var canvas;            // Canvas element
var signaturePad;      // SignaturePad instance
```

--------------------------------

### draw()

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Enables drawing mode on the signature canvas.

```APIDOC
## draw()

### Description
Enables drawing mode. This sets the signature pad to drawing mode, disables erase mode, and triggers the onDraw callback.

### Signature
`draw(): void`

### Return Type
void
```

--------------------------------

### Configure WebView Bridge Props

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Defines the core WebView configuration including mandatory bridge handlers and performance settings.

```javascript
<WebView
  // Core bridge props (cannot be overridden)
  ref={webViewRef}
  source={source}
  onMessage={getSignature}
  onError={renderError}
  javaScriptEnabled={true}
  useWebKit={true}
  
  // Default performance props (can be overridden)
  cacheEnabled={true}
  
  // User-provided props (via webviewProps)
  {...webviewProps}
  
  // Core functionality preserved
  key={`signature-webview-${webViewKey}`}
/>
```

--------------------------------

### SignatureCanvas Methods

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Imperative methods available on the SignatureCanvas component instance via ref.

```APIDOC
## SignatureCanvas Methods

### clearSignature()
Clears the current signature from the canvas.

### changePenColor(color)
Changes the pen color. 
- **color** (string) - The color to set.

### changePenSize(minW, maxW)
Changes the pen size.
- **minW** (number) - Minimum width.
- **maxW** (number) - Maximum width.

### draw()
Enables drawing mode.

### erase()
Enables erasing mode.

### getData()
Triggers the `onGetData` callback with the current signature data.

### readSignature()
Reads the current signature and triggers associated callbacks.

### undo()
Undoes the last stroke.

### redo()
Redoes the last stroke.
```

--------------------------------

### Configure Canvas Display Options

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Sets visual properties like colors, labels, and orientation for the signature canvas.

```jsx
<SignatureCanvas
  backgroundColor="white"
  penColor="#0066cc"
  descriptionText="Please sign below"
  clearText="Reset"
  confirmText="Save Signature"
  rotated={false}
/>
```

--------------------------------

### Customize WebView behavior with webviewProps

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Use webviewProps to configure performance, security, and UI settings for the underlying WebView component.

```jsx
<SignatureCanvas
  // ... other props
  webviewProps={{
    // Performance optimization
    cacheEnabled: true,
    androidLayerType: "hardware",
    androidHardwareAccelerationDisabled: false,
    
    // Security settings
    allowFileAccess: false,
    allowFileAccessFromFileURLs: false,
    mixedContentMode: "never",
    
    // UI customization
    decelerationRate: 'fast',
    bounces: false,
    
    // Any other WebView props...
  }}
/>
```

--------------------------------

### Configure Security Presets

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Standard and enhanced security configurations for the underlying webview to restrict file access and external origins.

```jsx
<SignatureCanvas
  webviewProps={{
    allowFileAccess: false,
    allowFileAccessFromFileURLs: false,
    allowUniversalAccessFromFileURLs: false,
    mixedContentMode: "never",
    allowsLinkPreview: false,
  }}
/>
```

```jsx
<SignatureCanvas
  webviewProps={{
    allowFileAccess: false,
    allowFileAccessFromFileURLs: false,
    allowUniversalAccessFromFileURLs: false,
    mixedContentMode: "never",
    allowsLinkPreview: false,
    originWhitelist: [], // Block all external origins
  }}
/>
```

--------------------------------

### SignatureCanvas Instance Methods

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/signature-canvas-component.md

Methods available via the component ref to control the signature canvas programmatically.

```APIDOC
## SignatureCanvas Instance Methods

### Description
Methods exposed via the component ref to manipulate the signature pad.

### Methods
- **readSignature()** - Triggers the capture of the current signature.
- **undo()** - Reverts the last stroke on the canvas.
- **redo()** - Re-applies the last undone stroke.
- **changePenColor(color: string)** - Updates the pen color using a hex string.
- **setDataURL(data: string)** - Restores a signature from a base64 data URL.
```

--------------------------------

### Implement Performance Modes for SignatureCanvas

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/usage-examples.md

Configures webview properties and drawing constraints based on selected performance modes. Use this to toggle between high-fidelity and low-resource consumption settings.

```jsx
import React, { useRef, useState } from 'react';
import { View, Button, Platform, StyleSheet } from 'react-native';
import SignatureCanvas from 'react-native-signature-canvas';

export default function PerformanceOptimizedApp() {
  const ref = useRef();
  const [mode, setMode] = useState('balanced'); // 'high', 'balanced', 'low'

  const getModeConfig = () => {
    switch (mode) {
      case 'high':
        return {
          webviewProps: {
            cacheEnabled: true,
            androidLayerType: 'hardware',
            androidHardwareAccelerationDisabled: false,
          },
          minWidth: 0.5,
          maxWidth: 2.5,
          minDistance: 5,
        };
      case 'low':
        return {
          webviewProps: {
            cacheEnabled: false,
            androidLayerType: 'software',
            androidHardwareAccelerationDisabled: true,
          },
          minWidth: 1,
          maxWidth: 2,
          minDistance: 10,
        };
      default: // balanced
        return {
          webviewProps: {
            cacheEnabled: true,
            androidLayerType: 'hardware',
          },
          minWidth: 0.5,
          maxWidth: 2.5,
          minDistance: 5,
        };
    }
  };

  const config = getModeConfig();

  return (
    <View style={styles.container}>
      <View style={styles.modeSelector}>
        {['high', 'balanced', 'low'].map((m) => (
          <Button
            key={m}
            title={m.charAt(0).toUpperCase() + m.slice(1)}
            onPress={() => setMode(m)}
            color={mode === m ? '#007AFF' : '#999'}
          />
        ))}
      </View>

      <SignatureCanvas
        ref={ref}
        {...config}
        onOK={(sig) => console.log('Signature:', sig)}
        style={styles.canvas}
      />

      <View style={styles.buttons}>
        <Button 
          title="Save" 
          onPress={() => ref.current?.readSignature()} 
        />
        <Button 
          title="Clear" 
          onPress={() => ref.current?.clearSignature()} 
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  modeSelector: { flexDirection: 'row', justifyContent: 'space-around', padding: 10 },
  canvas: { flex: 1, borderWidth: 1, margin: 10 },
  buttons: { flexDirection: 'row', justifyContent: 'space-around', padding: 10 },
});
```

--------------------------------

### Configure Image Export Options

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Defines the format and post-processing behavior when exporting the signature.

```jsx
<SignatureCanvas
  imageType="image/jpeg"
  trimWhitespace={true}
  autoClear={true}
/>
```

--------------------------------

### Performance Optimization Props

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/WEBVIEW_PROPS.md

Customize performance-related WebView settings like caching and media playback.

```jsx
webviewProps={{
  cacheEnabled: true, // Enable/disable WebView cache
  allowsInlineMediaPlayback: false, // Disable media playback
  mediaPlaybackRequiresUserAction: true, // Require user action for media
  allowsBackForwardNavigationGestures: false, // Disable navigation gestures
}}
```

--------------------------------

### Async-Like Callback Pattern

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Use state to manage sequential operations since methods do not return promises.

```jsx
const handleSaveAndClear = () => {
  ref.current?.readSignature();
  // Set up one-time callback listener
  // Note: This won't work - onOK is a prop, not event listener
};

// Instead, use state to track flow
const [saved, setSaved] = useState(false);

const handleSaveAndClear = () => {
  setNeedsClear(true);
  ref.current?.readSignature();
};

<SignatureCanvas
  ref={ref}
  onOK={(sig) => {
    setSaved(true);
    if (needsClear) {
      ref.current?.clearSignature();
      setNeedsClear(false);
    }
  }}
/>
```

--------------------------------

### Executing Imperative Methods

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Injecting JavaScript into the WebView to trigger internal functions.

```javascript
// Example: ref.current?.undo()
webViewRef.current.injectJavaScript(`
  undo();
  true;
`);

// Example: ref.current?.changePenColor("#FF0000")
webViewRef.current.injectJavaScript(`
  changePenColor("#FF0000");
  true;
`);
```

--------------------------------

### Component Methods

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/README.md

Methods exposed via the component ref to control the signature canvas programmatically.

```APIDOC
## Component Methods

### readSignature()
Triggers the capture of the signature.

### setDataURL(dataURL)
Restores a signature from a data URL string.

### undo()
Reverts the last stroke on the canvas.

### redo()
Re-applies the last undone stroke on the canvas.
```

--------------------------------

### Optimize Performance for Older Devices

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/README.md

Configures the WebView to use software rendering and disables hardware acceleration to improve stability on older hardware.

```jsx
// Solution: Use low-performance mode
<SignatureCanvas
  webviewProps={{
    androidLayerType: "software",
    androidHardwareAccelerationDisabled: true,
    cacheEnabled: false
  }}
/>
```

--------------------------------

### Configure WebView Security Settings

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Default security enhancements applied to the WebView to restrict file access and mixed content.

```javascript
allowFileAccess: false,                    // No file:// access
allowFileAccessFromFileURLs: false,        // No file:// → file:// access
allowUniversalAccessFromFileURLs: false,   // No universal access
mixedContentMode: "never",                 // Block HTTP in HTTPS
allowsLinkPreview: false,                  // Disable link preview
originWhitelist: ['*'],                    // Allow all origins (for canvas)
```

--------------------------------

### Security Enhancement Props

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/WEBVIEW_PROPS.md

Configure security settings to restrict file access and content origins.

```jsx
webviewProps={{
  allowsLinkPreview: false, // Disable link previews
  allowFileAccess: false, // Disable file access
  allowFileAccessFromFileURLs: false, // Disable file URL access
  allowUniversalAccessFromFileURLs: false, // Disable universal access
  mixedContentMode: "never", // Block mixed content
  originWhitelist: ['*'], // Allow all origins
}}
```

--------------------------------

### Android-Specific WebView Props

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/WEBVIEW_PROPS.md

Configure hardware acceleration settings for Android devices.

```jsx
webviewProps={{
  androidLayerType: "hardware", // Use hardware acceleration
  androidHardwareAccelerationDisabled: false, // Enable hardware acceleration
}}
```

--------------------------------

### Implement postMessage bridge wrapper

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Ensures the ReactNativeWebView bridge is available before attempting to send data. Logs a warning if the bridge is not initialized.

```javascript
function postMessage(data) {
    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
        window.ReactNativeWebView.postMessage(data);
    } else {
        console.warn("[signature-canvas] RN bridge unavailable, dropped message: " + data);
    }
}
```

--------------------------------

### Handle Lifecycle Event Callbacks

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/architecture.md

Monitor signature interactions by providing callback functions for various lifecycle events.

```javascript
onBegin={() => /* track signature start */}
onEnd={() => /* track signature end */}
onOK={(sig) => /* save signature */}
onError={(err) => /* handle error */}
// ... 10+ additional callbacks
```

--------------------------------

### Apply WebView Container Styles

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Use the webviewContainerStyle prop to style the container wrapping the internal WebView.

```jsx
<SignatureCanvas
  webviewContainerStyle={{
    flex: 1,
    borderRadius: 8,
    overflow: 'hidden',
  }}
/>
```

--------------------------------

### Handle Canvas Resizing

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Uses ResizeObserver to adjust canvas dimensions while preserving the drawn signature content and applying device pixel ratios.

```javascript
const observer = new ResizeObserver(() => {
    resizeCanvas();
});

observer.observe(canvas);

function resizeCanvas() {
    if (!canvas || !canvas.getContext || !signaturePad) {
        return;
    }

    var context = canvas.getContext("2d");
    var ratio = Math.max(window.devicePixelRatio || 1, 1);

    // Save current signature
    var imgData = signaturePad.toData();
    var hasDrawnContent = imgData && imgData.length > 0;

    // Update canvas dimensions
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    canvas.width = width * ratio;
    canvas.height = height * ratio;
    context.scale(ratio, ratio);

    // Restore signature
    if (hasDrawnContent) {
        signaturePad.fromData(imgData);
    } else if (dataURL) {
        signaturePad.fromDataURL(dataURL);
    }
}
```

--------------------------------

### Configure Signature Data and Custom HTML

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Restores signature data or provides a custom HTML template for the canvas container.

```jsx
<SignatureCanvas
  dataURL={savedSignatureDataURL}
/>

// Custom HTML example
<SignatureCanvas
  customHtml={(injectedScript) => `
    <!DOCTYPE html>
    <html>
      <head><title>Custom Sig Pad</title></head>
      <body>
        <div id="signature-pad" class="m-signature-pad">
          <div class="m-signature-pad--body"><canvas></canvas></div>
        </div>
        <script>${injectedScript}</script>
      </body>
    </html>
  `}
/>
```

--------------------------------

### SignatureCanvas Callbacks

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

A comprehensive list of available callbacks for the SignatureCanvas component, categorized by event type, data handling, and system lifecycle.

```APIDOC
## SignatureCanvas Callbacks

### Event Callbacks
- **onBegin** (() => void) - Triggered when the user starts drawing a stroke.
- **onEnd** (() => void) - Triggered when the user completes a stroke.
- **onDraw** (() => void) - Triggered when draw mode is enabled.
- **onErase** (() => void) - Triggered when erase mode is enabled.
- **onUndo** (() => void) - Triggered when an undo operation completes.
- **onRedo** (() => void) - Triggered when a redo operation completes.
- **onChangePenColor** (() => void) - Triggered when the pen color changes.
- **onChangePenSize** (() => void) - Triggered when the pen size changes.

### Data Callbacks
- **onOK** ((signature: string) => void) - Triggered when a non-empty signature is saved; receives the signature as a data URL.
- **onEmpty** (() => void) - Triggered when an empty signature save is attempted.
- **onClear** (() => void) - Triggered when the signature is cleared.
- **onGetData** ((data: string) => void) - Triggered when point data is exported.

### System Callbacks
- **onLoadEnd** (() => void) - Triggered when the WebView finishes loading.
- **onError** ((error: Error) => void) - Triggered when a WebView error occurs.
```

--------------------------------

### Accessing Ref Methods

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Basic implementation of the useRef hook to interact with the SignatureCanvas component.

```jsx
import { useRef } from 'react';
import SignatureCanvas from 'react-native-signature-canvas';

export default function MyComponent() {
  const ref = useRef();
  
  return (
    <>
      <SignatureCanvas ref={ref} />
      <Button onPress={() => ref.current?.readSignature()} />
    </>
  );
}
```

--------------------------------

### changePenSize(minWidth, maxWidth)

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/api-reference/ref-methods.md

Updates the line width range for subsequent strokes, allowing for dynamic scaling based on pen velocity.

```APIDOC
## changePenSize(minWidth, maxWidth)

### Description
Changes the line width range for subsequent strokes. The line width scales dynamically based on pen velocity, where fast movement approaches the minWidth and slow movement approaches the maxWidth.

### Signature
`changePenSize(minWidth: number, maxWidth: number): void`

### Parameters
- **minWidth** (number) - Required - Minimum line width in pixels
- **maxWidth** (number) - Required - Maximum line width in pixels

### Returns
- **void**
```

--------------------------------

### Logging Injected Scripts

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/webview-internals.md

Log scripts before injection to verify the exact command being sent to the WebView.

```javascript
const executeWebViewMethod = useCallback((method, params = []) => {
  const script = params.length > 0
    ? `${method}(${params.map(getParamForInjection).join(',')});true;`
    : `${method}();true;`;
  console.log("Injecting script:", script);
  webViewRef.current.injectJavaScript(script);
}, []);
```

--------------------------------

### Customize Loading Overlay

Source: https://github.com/yanyuanfe/react-native-signature-canvas/blob/master/_autodocs/configuration.md

Adjust the appearance of the loading overlay and activity indicator using loadingOverlayProps.

```jsx
<SignatureCanvas
  loadingOverlayProps={{
    loadingOverlayStyle: {
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    activityIndicatorProps: {
      size: 'large',
      color: '#0066cc',
    }
  }}
/>
```
Tokens:
Raw