feat(intial auth): intial auth setup for the scanner

lstMobile/src/components/LSTScanner.tsx

@@ -1,24 +1,51 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import { useCallback, useEffect } from "react";
+import { Text, View } from "react-native";
+
+import { zebraScanner } from "../lib/ZebraScanner";
 
 export default function LSTScanner() {
-  return (
-     <View><View style={{ alignItems: "center", margin: 10 }}>
-                         <Text style={{ fontSize: 20, fontWeight: "600" }}>LST Scanner</Text>
-                     </View>
-                     <View
-                         style={{
-                             marginTop: 50,
-                             alignItems: "center",
-                         }}
-                     >
-                         <Text>Relocate</Text>
-                         <Text>0 / 4</Text>
-                     </View>
-         
-                     {/* <View>
+	const handleScan = useCallback(async (scan: any) => {
+		console.log(scan);
+	}, []);
+
+	const clearScans = () => {
+		// add in
+	};
+
+	//console.log(lastScan);
+
+	useEffect(() => {
+		zebraScanner.ensureProfile();
+		zebraScanner.startListening();
+
+		const sub = zebraScanner.addScanListener((scan) => {
+			//console.log("SCAN:", scan);
+			handleScan(scan);
+		});
+
+		return () => {
+			sub.remove();
+			zebraScanner.stopListening();
+		};
+	}, [handleScan]);
+	return (
+		<View>
+			<View style={{ alignItems: "center", margin: 10 }}>
+				<Text style={{ fontSize: 20, fontWeight: "600" }}>LST Scanner</Text>
+			</View>
+			<View
+				style={{
+					marginTop: 50,
+					alignItems: "center",
+				}}
+			>
+				<Text>Relocate</Text>
+				<Text>0 / 4</Text>
+			</View>
+
+			{/* <View>
                          <Text>List of recent scanned pallets TBA</Text>
                      </View> */}
-                    </View>
-  )
+		</View>
+	);
 }

lstMobile/src/components/ui/input.tsx

@@ -0,0 +1,29 @@
+import { cn } from '@/lib/utils';
+import { Platform, TextInput } from 'react-native';
+
+function Input({ className, ...props }: React.ComponentProps<typeof TextInput> & React.RefAttributes<TextInput>) {
+  return (
+    <TextInput
+      className={cn(
+        'dark:bg-input/30 border-input bg-background text-foreground flex h-10 w-full min-w-0 flex-row items-center rounded-md border px-3 py-1 text-base leading-5 shadow-sm shadow-black/5 sm:h-9',
+        props.editable === false &&
+        cn(
+          'opacity-50',
+          Platform.select({ web: 'disabled:pointer-events-none disabled:cursor-not-allowed' })
+        ),
+        Platform.select({
+          web: cn(
+            'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground outline-none transition-[color,box-shadow] md:text-sm',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+          ),
+          native: 'placeholder:text-muted-foreground/50',
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };