app/index.tsx

@@ -3,7 +3,8 @@ import { ScrollView, Text, Alert, Button } from "react-native";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
-import ChipDistributionSummary from "@/components/ChipDistributionSummary"; 
+import ChipDistributionSummary from "@/components/ChipDistributionSummary";
+import ChipDetection from "@/components/ChipDetection";
 const IndexScreen = () => {
   const [playerCount, setPlayerCount] = useState(2);
   const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
@@ -29,6 +30,10 @@ const IndexScreen = () => {
         setPlayerCount={setPlayerCount}
       />
       <BuyInSelector setBuyInAmount={setBuyInAmount} />
+      <ChipDetection
+        totalChipsCount={totalChipsCount}
+        setTotalChipsCount={setTotalChipsCount}
+      />
       <ChipsSelector
         totalChipsCount={totalChipsCount}
         setTotalChipsCount={setTotalChipsCount}

components/ChipDetection.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+
+/**
+  The best way forward for this component is likely to send the image chosen to an AI + NLP API.
+  Google cloud vision is likely a good choice, as I think it offers some sort of free tier or trial usage for free, as long as it can also support NLP prompts
+  We need to thoughtfully prompt the API and ask it to return data in a well formatted JSON, or return an error if the image supplied is unable to be read, or otherwise out of context
+  We could also ask it to return a "confidence" level as a percentage, if the user may find that helpful
+
+  */
+
+const ChipDetection = ({
+  totalChipsCount,
+  setTotalChipsCount,
+}: {
+  totalChipsCount: number[];
+  setTotalChipsCount: React.Dispatch<React.SetStateAction<number[]>>;
+}) => {
+  const [image, setImage] = useState<any>(null);
+  const pickImage = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== "granted") {
+      alert("Permission denied!");
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: true,
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets[0].uri);
+    }
+  };
+
+  return (
+    <View>
+      <Text> Automatic Detection</Text>
+      <MaterialIcons name="camera-alt" onPress={pickImage} size={30} />
+    </View>
+  );
+};
+
+export default ChipDetection;

components/__tests__/ChipDetection.test.tsx

@@ -0,0 +1,18 @@
+import ChipDetection from "@/components/ChipDetection";
+import { render } from "@testing-library/react-native";
+import React from "react";
+
+const totalChipsCount: number[] = [];
+const mockSetTotalChipsCount = jest.fn();
+
+const rend = render(
+  <ChipDetection
+    totalChipsCount={totalChipsCount}
+    setTotalChipsCount={mockSetTotalChipsCount}
+  />
+);
+
+describe("tests for ChipDetection", () => {
+  it.todo("first test");
+  it.todo("second test");
+});

package.json

@@ -38,7 +38,8 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-image-picker": "~16.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",