quick fix on dropdowns

client/components/pack/AddPack.tsx

@@ -9,9 +9,7 @@ import useTheme from '../../hooks/useTheme';
 import useCustomStyles from '~/hooks/useCustomStyles';
 import { useAddNewPack } from '~/hooks/packs';
 import { useRouter } from 'expo-router';
-import { Box, Button, CheckIcon, Input, Select, Text } from 'native-base';
 import { packSelectOptions } from '~/constants/options';
-
 
 export const AddPack = ({ isCreatingTrip = false }) => {
   //Hooks

client/components/pack/PackContainer.tsx

@@ -74,6 +74,8 @@ export default function PackContainer({ isCreatingTrip = false }) {
     <View style={styles.mainContainer}>
       <DropdownComponent
         data={packs ?? []}
+        textKey={'name'}
+        valueKey={'_id'}
         value={currentPackId}
         onValueChange={handlePack}
         placeholder={'Select a Pack'}

packages/ui/src/RSelect/index.tsx

@@ -1,56 +1,81 @@
 import { useMemo } from 'react';
 import { Check, ChevronDown } from '@tamagui/lucide-icons';
-import {
-  Adapt,
-  Select,
-  Sheet,
-  YStack,
-  getFontSize,
-} from 'tamagui';
+import { Adapt, Select, Sheet, YStack, getFontSize } from 'tamagui';
 
+// Entry point for the Select component
 export default function RSelect(props) {
+  // Default key names for text and value, can be overridden by props
+  const { textKey = 'label', valueKey = 'value', ...otherProps } = props;
+
   return (
-    <SelectItem native {...props}/>
-  )
+    <SelectItem native textKey={textKey} valueKey={valueKey} {...otherProps} />
+  );
 }
 
-const extractOptionAttributes = (item, index) => {
-  if (typeof item !== 'object' || item === null) return { text: item, value: item, index };
-  return {
-    text: item.name,
-    value: item.id || item._id || item.name,
-    index,
+// Function to extract option attributes from data items
+const extractOptionAttributes = (item, index, textKey, valueKey) => {
+  // Handle simple types: strings, numbers, and booleans
+  if (
+    typeof item === 'string' ||
+    typeof item === 'number' ||
+    typeof item === 'boolean'
+  ) {
+    return { text: item.toString(), value: item.toString(), index };
   }
-}
 
+  // Handle objects
+  if (typeof item === 'object' && item !== null) {
+    return {
+      text: item[textKey] ?? item.toString(),
+      value: item[valueKey] ?? item.toString(),
+      index,
+    };
+  }
+
+  // Default case for other invalid types
+  return { text: 'Invalid Item', value: 'invalid', index };
+};
+
+// Component to render the Select dropdown
 export function SelectItem(props) {
   const {
-    value,
+    value = '',
     onValueChange,
-    data,
-    placeholder,
+    data = [],
+    placeholder = 'Select an option',
+    textKey = 'label',
+    valueKey = 'value',
     ...forwardedProps
   } = props;
 
-  const handleChange = (newValue) => onValueChange && onValueChange(newValue);
+  const handleChange = (newValue) => {
+    if (typeof onValueChange === 'function') {
+      onValueChange(newValue);
+    }
+  };
 
   const options = useMemo(() => {
-    if (!data) return null;
+    if (!Array.isArray(data)) return [];
     return data
-      .map(extractOptionAttributes)
+      .map((item, index) =>
+        extractOptionAttributes(item, index, textKey, valueKey),
+      )
       .map(({ text, value, index }) => (
-        <Select.Item
-          key={text}
-          index={index}
-          value={value}
-        >
-          <Select.ItemText>{text.charAt(0).toUpperCase() + text.slice(1)}</Select.ItemText>
+        <Select.Item key={`${text} + ${value}`} index={index} value={value}>
+          <Select.ItemText>
+            {text.charAt(0).toUpperCase() + text.slice(1)}
+          </Select.ItemText>
           <Select.ItemIndicator marginLeft="auto">
             <Check size={16} />
           </Select.ItemIndicator>
         </Select.Item>
-      ))
-  }, [data])
+      ));
+  }, [data, textKey, valueKey]);
+
+  // Conditional rendering based on options
+  if (options.length === 0) {
+    return <div>No options available</div>;
+  }
 
   return (
     <Select
@@ -87,12 +112,8 @@ export function SelectItem(props) {
         </Sheet>
       </Adapt>
       <Select.Content zIndex={200000}>
-        <Select.Viewport
-          minWidth={200}
-        >
-          <Select.Group>
-            {options}
-          </Select.Group>
+        <Select.Viewport minWidth={200}>
+          <Select.Group>{options}</Select.Group>
 
           {props.native && (
             <YStack
@@ -111,5 +132,5 @@ export function SelectItem(props) {
         </Select.Viewport>
       </Select.Content>
     </Select>
-  )
+  );
 }