app/index.tsx

@@ -1,14 +1,18 @@
 import React, { useState } from "react";
-import { ScrollView, Text, Alert, Button } from "react-native";
+import { ScrollView, Text, Alert, Button, View, StyleSheet } 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 DarkModeToggle from "@/components/DarkModeToggle";
+
 const IndexScreen = () => {
   const [playerCount, setPlayerCount] = useState(2);
   const [buyInAmount, setBuyInAmount] = useState<number | null>(null);
   const [numberOfChips, setNumberOfChips] = useState<number>(5);
   const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
+  const [darkMode, setDarkMode] = useState(false);
+
   const handleSave = () => {
     if (buyInAmount === null) {
       Alert.alert("Error", "Please select a valid buy-in amount");
@@ -19,33 +23,55 @@ const IndexScreen = () => {
       );
     }
   };
+
   return (
-    <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
-      <Text style={{ fontSize: 24, marginBottom: 30, marginTop: 50 }}>
-        Poker Chip Helper
-      </Text>
-      <PlayerSelector
-        playerCount={playerCount}
-        setPlayerCount={setPlayerCount}
-      />
-      <BuyInSelector setBuyInAmount={setBuyInAmount} />
-      <ChipsSelector
-        totalChipsCount={totalChipsCount}
-        setTotalChipsCount={setTotalChipsCount}
-        numberOfChips={numberOfChips}
-        setNumberOfChips={setNumberOfChips}
-      />
-      <ChipDistributionSummary
-        playerCount={playerCount}
-        buyInAmount={buyInAmount}
-        totalChipsCount={totalChipsCount}
-      />
-      <Button
-        title="Save"
-        onPress={handleSave}
-        disabled={buyInAmount === null}
-      />
-    </ScrollView>
+    <View style={[styles.container, darkMode ? styles.darkBackground : styles.lightBackground]}>
+      <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
+        <Text style={[styles.title, darkMode ? styles.darkText : styles.lightText]}>
+          Poker Chip Helper
+        </Text>
+        <DarkModeToggle darkMode={darkMode} onToggle={() => setDarkMode(!darkMode)} />
+        <PlayerSelector playerCount={playerCount} setPlayerCount={setPlayerCount} />
+        <BuyInSelector setBuyInAmount={setBuyInAmount} />
+        <ChipsSelector
+          totalChipsCount={totalChipsCount}
+          setTotalChipsCount={setTotalChipsCount}
+          numberOfChips={numberOfChips}
+          setNumberOfChips={setNumberOfChips}
+        />
+        <ChipDistributionSummary
+          playerCount={playerCount}
+          buyInAmount={buyInAmount}
+          totalChipsCount={totalChipsCount}
+        />
+        <Button title="Save" onPress={handleSave} disabled={buyInAmount === null} />
+      </ScrollView>
+    </View>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 30,
+    marginTop: 50,
+    textAlign: "center",
+  },
+  lightBackground: {
+    backgroundColor: "#F0F0F0",
+  },
+  darkBackground: {
+    backgroundColor: "#B0B0B0",
+  },
+  lightText: {
+    color: "#000000",
+  },
+  darkText: {
+    color: "#FFFFFF",
+  },
+});
+
 export default IndexScreen;

components/DarkModeToggle.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, Text, Button, StyleSheet } from "react-native";
+
+interface DarkModeToggleProps {
+  darkMode: boolean;
+  onToggle: () => void;
+}
+
+const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ darkMode, onToggle }) => {
+  return (
+    <View style={[styles.container, darkMode ? styles.darkBackground : styles.lightBackground]}>
+      <Text style={[styles.text, darkMode ? styles.darkText : styles.lightText]}>
+        Dark Mode is {darkMode ? "Enabled" : "Disabled"}
+      </Text>
+      <Button title="Toggle Dark Mode" onPress={onToggle} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  text: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  lightBackground: {
+    backgroundColor: "#F0F0F0",
+  },
+  darkBackground: {
+    backgroundColor: "#B0B0B0",
+  },
+  lightText: {
+    color: "#000000",
+  },
+  darkText: {
+    color: "#FFFFFF",
+  },
+});
+
+export default DarkModeToggle;
+

components/__tests__/ChipDistributionSummary.test.tsx

@@ -8,8 +8,7 @@ describe("ChipDistributionSummary Component", () => {
     const totalChipsCount = [100, 200, 300, 400, 500];
     const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
 
-    // Update this to match the actual component's chip distribution logic
-    const expectedDistribution = [8, 16, 25, 33, 41]; // Adjust based on actual component calculations
+    const expectedDistribution = [8, 16, 25, 33, 41];
 
     const { getByText } = render(
       <ChipDistributionSummary
@@ -44,7 +43,7 @@ describe("ChipDistributionSummary Component", () => {
       totalChipsCount = totalChipsCount.map(count => Math.round(count * scaleFactor));
     }
 
-    const expectedDistribution = [30, 40, 50, 60, 70]; // Adjust to match actual component calculations
+    const expectedDistribution = [30, 40, 50, 60, 70]; 
     const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
 
     const { getByText } = render(

components/__tests__/DarkModeToggle.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import DarkModeToggle from "@/components/DarkModeToggle";
+
+describe("DarkModeToggle Component", () => {
+  it("renders correctly with initial light mode", () => {
+    const { getByText } = render(<DarkModeToggle darkMode={false} onToggle={() => {}} />);
+    expect(getByText("Dark Mode is Disabled")).toBeTruthy();
+  });
+
+  it("renders correctly with initial dark mode", () => {
+    const { getByText } = render(<DarkModeToggle darkMode={true} onToggle={() => {}} />);
+    expect(getByText("Dark Mode is Enabled")).toBeTruthy();
+  });
+
+  it("toggles dark mode when button is pressed", () => {
+    const mockToggle = jest.fn();
+    const { getByText } = render(<DarkModeToggle darkMode={false} onToggle={mockToggle} />);
+
+    const button = getByText("Toggle Dark Mode");
+    fireEvent.press(button);
+
+    expect(mockToggle).toHaveBeenCalledTimes(1);
+  });
+});

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
+        "@react-native-async-storage/async-storage": "^2.1.1",
         "@react-navigation/bottom-tabs": "^7.2.0",
         "@react-navigation/native": "^7.0.14",
         "expo": "~52.0.31",
@@ -3856,6 +3857,18 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.1.tgz",
+      "integrity": "sha512-UqlnxddwM3rlCHvteFz+HpIXjqhQM7GkBgVQ9sMvMdl8QVOJQDjG7BODCUvabysMDw+9QfMFlLiOI8U6c0VzzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.76.7",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.76.7.tgz",
@@ -9808,6 +9821,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -11890,6 +11912,18 @@
       "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
       "license": "MIT"
     },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "^2.1.1",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "expo": "~52.0.31",