optimizations

components/ui/Button.tsx

@@ -1,24 +1,26 @@
 import { ReactNode } from "react";
-import { View, Text, GestureResponderEvent } from "react-native";
+import { View, GestureResponderEvent, StyleSheet } from "react-native";
 import { Button as PaperButton } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface ButtonProps {
   buttonColor?: string;
   buttonMode?: "outlined" | "contained";
   buttonTextColor?: string;
   onPress: (event: GestureResponderEvent) => void;
-  disabled: boolean;
+  disabled?: boolean;
   children: ReactNode;
   className?: string;
   icon?: string;
 }
 
 export const Button = ({
-  buttonColor = "#6750a4",
+  buttonColor = colors.primaryPurpleDark,
   buttonMode = "outlined",
   buttonTextColor = "white",
   onPress,
-  disabled,
+  disabled = false,
   children,
   className,
   icon,
@@ -33,14 +35,17 @@ export const Button = ({
         disabled={disabled}
         textColor={buttonTextColor}
         icon={icon}
-        style={{ borderRadius: 4, borderColor: "transparent" }}
+        style={styles.buttonStyle}
       >
-        {typeof children === "string" || typeof children === "number" ? (
-          <Text>{children}</Text>
-        ) : (
-          children
-        )}
+        {children}
       </PaperButton>
     </View>
   );
 };
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    borderRadius: 4,
+    borderColor: "transparent",
+  },
+});

components/ui/CustomCheckbox.tsx

@@ -1,6 +1,8 @@
 import { TouchableOpacity, View } from "react-native";
 import { Text } from "react-native-paper";
 
+import { colors } from "@/constants/colors";
+
 interface CustomCheckboxProps {
   checked: boolean;
   onPress: () => void;
@@ -32,7 +34,7 @@ export const CustomCheckbox = ({
           borderRadius: 2,
           justifyContent: "center",
           alignItems: "center",
-          backgroundColor: checked ? "#6750a4" : "transparent",
+          backgroundColor: checked ? colors.primaryPurpleDark : "transparent",
         }}
       >
         {checked && (

components/ui/CustomPicker.tsx

@@ -2,6 +2,8 @@ import { View, StyleSheet } from "react-native";
 import { Picker, PickerProps } from "@react-native-picker/picker";
 import { Ionicons } from "@expo/vector-icons";
 
+import { colors } from "@/constants/colors";
+
 export const PickerItem = Picker.Item;
 
 interface CustomPickerProps extends PickerProps {
@@ -17,9 +19,7 @@ export const CustomPicker = ({
     <View style={styles.container}>
       <Picker
         selectedValue={selectedValue}
-        onValueChange={(itemValue, itemIndex) => {
-          onValueChange?.(itemValue, itemIndex);
-        }}
+        onValueChange={onValueChange}
         style={[styles.pickerStyle, { appearance: "none" } as any]}
       >
         {children}
@@ -27,7 +27,7 @@ export const CustomPicker = ({
       <Ionicons
         name="chevron-down"
         size={20}
-        color="#333"
+        color={colors.darkGray}
         style={styles.customIcon}
       />
     </View>

components/ui/SearchableDropdown.tsx

@@ -65,7 +65,7 @@ export const SearchableDropdown = ({
 
         // Filter to only keep items that are still selected
         return Array.from(itemsMap.values()).filter((item) =>
-          selectedIds.includes(item.id)
+          selectedIds.includes(item.id),
         );
       });
     }
@@ -163,7 +163,7 @@ export const SearchableDropdown = ({
           mode === "multi" ||
           isOpen) && (
           <TextInput
-            className={`border !mr-0 ${
+            className={`border mr-0! ${
               error ? "border-highRisk" : "border-gray-300"
             } rounded p-2 text-base bg-white`}
             value={searchQuery}

constants/colors.ts

@@ -0,0 +1,21 @@
+export const colors = {
+  primaryPurple: "#49385D",
+  primaryPurpleLight: "#A78FA1",
+  primaryPurpleDark: "#6750a4",
+  darkGray: "#49454F",
+  darkMediumGray: "#7A757C",
+  mediumGray: "#C4BEBE",
+  lightGray: "#D9D9D9",
+  secondary: "#B768FF",
+  tertiary: "#2E1155",
+  accent: "#FF00FF",
+  background: "#1E0933",
+  highRisk: "#F83434",
+  mediumRisk: "#F8F834",
+  lowRisk: "#22C927",
+  orange: "#FF9800",
+  blue: "#56B3FA",
+} as const;
+
+// CommonJS export for tailwind.config.js
+export default colors;

store/api/baseApi.ts

@@ -46,7 +46,7 @@ export const baseApi = createApi({
       return headers;
     },
   }),
-  refetchOnFocus: true,
+  refetchOnFocus: false,
   refetchOnReconnect: true,
   tagTypes: ["Users", "Todos", "UserLogs"],
   endpoints: () => ({}),

tailwind.config.js

@@ -1,9 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 
-module.exports = {
-  content: ["./components/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
-  presets: [require("nativewind/preset")],
-  theme: {
+import { colors } from "./constants/colors";
+
+export const content = [
+  "./components/**/*.{js,jsx,ts,tsx}",
+  "./app/**/*.{js,jsx,ts,tsx}",
+];
+export const presets = [require("nativewind/preset")];
+export const theme = {
   extend: {
     fontFamily: {
       inter: ["Inter", "sans-serif"],
@@ -11,25 +15,7 @@ module.exports = {
     fontSize: {
       inter: "16px",
     },
-      colors: {
-        primaryPurple: "#49385D",
-        primaryPurpleLight: "#A78FA1",
-        primaryPurpleDark: "#6750a4",
-        darkGray: "#49454F",
-        darkMediumGray: "#7A757C",
-        mediumGray: "#C4BEBE",
-        lightGray: "#D9D9D9",
-        secondary: "#B768FF",
-        tertiary: "#2E1155",
-        accent: "#FF00FF",
-        background: "#1E0933",
-        highRisk: "#F83434",
-        mediumRisk: "#F8F834",
-        lowRisk: "#22C927",
-        orange: "#FF9800",
-        blue: "#56B3FA",
+    colors,
   },
-    },
-  },
-  plugins: [],
 };
+export const plugins = [];