Merge pull request #8 from KeyValueSoftwareSystems/integrate-example-app

Integrate the package in the example app

Author: nirmalkeyvalue

example/src/App.tsx

@@ -1,21 +1,34 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
+import { Button, StyleSheet, View } from 'react-native';
+import {
+  SvgCapture,
+  useSvgCapture,
+} from '@keyvaluesystems/react-native-scribble';
 
 export default function App() {
+  const signatureProps = useSvgCapture();
+  const { clearPad } = signatureProps;
+
   return (
     <View style={styles.container}>
-      <Text>Example app</Text>
+      <View style={styles.svgCaptureContainer}>
+        <SvgCapture {...signatureProps} />
+      </View>
+      <Button title="Clear" onPress={clearPad} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
     justifyContent: 'center',
   },
+  svgCaptureContainer: {
+    width: '100%',
+    height: '80%',
+  },
   box: {
     width: 60,
     height: 60,

src/hooks/useSvgCapture.ts

@@ -18,7 +18,7 @@ const useSvgCapture = () => {
     const { locationX, locationY } = e.nativeEvent;
     handleSetLowestPoints(locationX, locationY);
     setPaths((prev) => {
-      return [[locationX, locationY], ...prev];
+      return [[locationX, locationY, locationX + 1, locationY + 1], ...prev];
     });
   }, []);
 

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "rootDir": ".",
     "paths": {
-      "react-native-scribble": ["./src/index"]
+      "@keyvaluesystems/react-native-scribble": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,