Merge pull request #7 from KeyValueSoftwareSystems/add-stroke-config

Add stroke config property so that stroke can be customized

README.md

@@ -5,24 +5,28 @@ React native package to capture user scribbling on screen and converting it to a
 ## Installation
 
 ```sh
-npm install react-native-scribble
+npm i @keyvaluesystems/react-native-scribble
 ```
 
 ## Usage
 
 ```jsx
+import { SvgCapture ,useSvgCapture } from '@keyvaluesystems/react-native-scribble';
+  // ...
   const signatureProps = useSvgCapture();
   const { clearPad, getFilePath } = signatureProps;
 
   const handleFileGeneration = async () => {
     const filePath = await getFilePath();
   };
   // ...
-  <>
-    <SvgCapture {...signatureProps} />
-    <Button title="Clear" onClick={clearPad} />
-    <Button title="Save" onClick={handleFileGeneration} />
-  </>
+  return (
+    <>
+      <SvgCapture {...signatureProps} />
+      <Button title="Clear" onClick={clearPad} />
+      <Button title="Save" onClick={handleFileGeneration} />
+    </>
+  );
 ```
 
 ## Contributing

src/components/SvgCapture.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ColorValue } from 'react-native';
 import {
   type GestureResponderEvent,
   type LayoutChangeEvent,
@@ -8,10 +9,18 @@ import {
   type StyleProp,
 } from 'react-native';
 import Svg, { G, Polyline } from 'react-native-svg';
+import {
+  DEFAULT_STROKE_COLOR,
+  DEFAULT_STROKE_WIDTH,
+} from '../constants/common';
 
 type CaptureSignatureProps = {
   paths: number[][];
   canvasStyle?: StyleProp<ViewStyle>;
+  strokeConfig?: {
+    strokeColor: ColorValue;
+    strokeWidth: number;
+  };
   handleOnTouchStart: (e: GestureResponderEvent) => void;
   handleOnTouchMove: (e: GestureResponderEvent) => void;
   handleLayout: (e: LayoutChangeEvent) => void;
@@ -20,6 +29,7 @@ type CaptureSignatureProps = {
 const SvgCapture = ({
   paths,
   canvasStyle,
+  strokeConfig,
   handleOnTouchStart,
   handleOnTouchMove,
   handleLayout,
@@ -40,8 +50,10 @@ const SvgCapture = ({
                   key={JSON.stringify(item)}
                   points={item}
                   fill="transparent"
-                  stroke="blue"
-                  strokeWidth="3"
+                  stroke={strokeConfig?.strokeColor || DEFAULT_STROKE_COLOR}
+                  strokeWidth={
+                    strokeConfig?.strokeWidth || DEFAULT_STROKE_WIDTH
+                  }
                 />
               );
             })}

src/constants/common.ts

@@ -0,0 +1,4 @@
+const DEFAULT_STROKE_WIDTH = 3;
+const DEFAULT_STROKE_COLOR = 'black';
+
+export { DEFAULT_STROKE_COLOR, DEFAULT_STROKE_WIDTH };