Changed Drop down to work with IOS as well as android using SelectList instead of picker

package-lock.json

@@ -17,6 +17,7 @@
         "expo-status-bar": "~3.0.9",
         "react": "19.1.0",
         "react-native": "^0.81.5",
+        "react-native-dropdown-select-list": "^2.0.5",
         "react-native-fullwidth-image": "^0.1.3",
         "react-native-gesture-handler": "~2.28.0",
         "react-native-reanimated": "~4.1.1",
@@ -7446,6 +7447,11 @@
         "react-native-reanimated": ">= 2.0.0"
       }
     },
+    "node_modules/react-native-dropdown-select-list": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
+      "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
+    },
     "node_modules/react-native-fullwidth-image": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/react-native-fullwidth-image/-/react-native-fullwidth-image-0.1.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-native": "^0.81.5",
+    "react-native-dropdown-select-list": "^2.0.5",
     "react-native-fullwidth-image": "^0.1.3",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",

src/components/UI/Form.js

@@ -1,6 +1,5 @@
 import {KeyboardAvoidingView, ScrollView, StyleSheet, Text, TextInput, View} from "react-native";
-import {Picker} from "@react-native-picker/picker";
+import {SelectList} from "react-native-dropdown-select-list";
-
 import {Button, ButtonTray} from "./Button";
 import Icons from "./Icons";
 
@@ -46,31 +45,24 @@ const InputText = ({label, value, onChange}) => {
 
 const InputSelect = ({label, prompt, options, value, onChange}) => {
     //   Initialisation -------------
+    const selectListData = options.map((option) => ({
+        key: option.value,
+        value: option.label,
+    }));
     //   State ----------------------
     //   Handlers -------------------
     //   View -----------------------
     return (
         <View style={styles.item}>
             <Text style={styles.itemLabel}>{label}</Text>
-            <Picker
+            <SelectList
-                mode="dropdown"
+                setSelected={onChange}
-                selectedValue={value}
+                data={selectListData}
-                onValueChange={onChange}
+                placeholder={prompt}
-                style={styles.itemPickerStyle}
+                defaultOption={selectListData.find((item) => item.key === value)}
-            >
+                boxStyles={styles.selectListBoxStyle}
-                <Picker.Item
+                dropdownStyles={styles.selectListDropdownStyle}
-                    value={null}
+            />
-                    label={prompt}
-                    style={styles.itemPickerPromptStyle}
-                />
-                {
-                    options.map((option, index) => <Picker.Item
-                        key={index}
-                        value={option.value}
-                        label={option.label}
-                    />)
-                }
-            </Picker>
         </View>
     )
 };
@@ -102,12 +94,17 @@ const styles = StyleSheet.create({
     formContainer: {
         gap: 10
     },
-    itemPickerStyle: {
+    selectListBoxStyle: {
         height: 50,
-        backgroundColor: 'whitesmoke',
+        backgroundColor: "whitesmoke",
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: "lightgrey",
+        paddingLeft: 10,
+        paddingTop: 15,
     },
-    itemPickerPromptStyle: {
+    selectListDropdownStyle: {
-        color: 'gray',
+        borderColor: "lightgrey",
     },
 });