@gdn/react-native-simple-canvas v1.2.3

SimpleCanvas

A simple canvas component for React Native that allows drawing and signature capture.

Features

• Smooth signature drawing
• Customizable stroke color and width
• Get signature as SVG
• Get raw signature points
• Set signature from existing points
• Clear and reset functionality
• TypeScript support
• Lightweight and performant

Demo

npm install react-native-simple-canvas

or

yarn add react-native-simple-canvas

Peer Dependencies

This package requires the following peer dependencies:

• react: ^18.2.0
• react-native: ^0.74.2
• react-native-svg: ^15.4.0

Usage

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { SimpleCanvas, SimpleCanvasRef, clearCanvas } from '@gdn/react-native-simple-canvas';

const App = () => {
  const signatureRef = useRef<SimpleCanvasRef>(null);

  const handleClear = () => {
    clearCanvas(signatureRef);
  };

  return (
    <View style={{ flex: 1 }}>
      <SimpleCanvas
        ref={signatureRef}
        strokeColor="blue"
        strokeWidth={3}
        backgroundColor="white"
        onCanvasChange={(isEmpty) => console.log('Canvas changed:', isEmpty)}
      />
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10 }}>
        <Button title="Clear" onPress={handleClear} />
      </View>
    </View>
  );
};

export default App;

Props

Methods

All methods are accessible through the component ref:

const signatureRef = useRef<SimpleCanvasRef>(null);

Types

interface Point {
  x: number;
  y: number;
}

interface SimpleCanvasProps {
  onDragEvent?: () => void;
  onCanvasChange?: (isEmpty: boolean) => void;
  strokeColor?: string;
  strokeWidth?: number;
  backgroundColor?: string;
  style?: ViewStyle;
  minPoints?: number;
}

interface SimpleCanvasRef {
  resetImage: () => void;
  getSVG: () => RefObject<Svg>;
  isEmpty: () => boolean;
  getPoints: () => Point[];
  setPoints: (points: Point[]) => void;
}

Troubleshooting

Invalid Hook Call Error

If you encounter an error like: Invalid hook call. Hooks can only be called inside of the body of a function component or Cannot read property 'useState' of null, this is typically due to React dependency conflicts. To fix this:

1. Ensure React versions match: Make sure your project and all dependencies use compatible React versions.

2. Fix duplicate React installations: This error often occurs when multiple versions of React exist in your node_modules. Run this in your main project:

   npm ls react

   If you see multiple versions, consider using npm/yarn resolutions to force a single version:

   "resolutions": {
     "react": "18.2.0",
     "react-dom": "18.2.0"
   }

3. Set up proper module resolution: If using this library in a monorepo or via local path, ensure your bundler (Metro) is configured to resolve React correctly for all packages:

   // metro.config.js
   module.exports = {
     resolver: {
       extraNodeModules: {
         'react': path.resolve(__dirname, 'node_modules/react'),
         'react-native': path.resolve(__dirname, 'node_modules/react-native')
       }
     }
   };

4. Check for peer dependency mismatches: Verify that this library's peer dependencies align with your project versions.