Updates to forms and added picker for module form.

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/vector-icons": "^15.0.3",
+        "@react-native-picker/picker": "^2.11.4",
         "@react-navigation/native": "^7.1.18",
         "@react-navigation/native-stack": "^7.5.1",
         "expo": "^54.0.20",
@@ -55,7 +56,6 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -3055,6 +3055,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.4.tgz",
+      "integrity": "sha512-Kf8h1AMnBo54b1fdiVylP2P/iFcZqzpMYcglC28EEFB1DEnOjsNr6Ucqc+3R9e91vHxEDnhZFbYDmAe79P2gjA==",
+      "license": "MIT",
+      "workspaces": [
+        "example"
+      ],
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.81.5",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
@@ -4051,7 +4064,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -4748,7 +4760,6 @@
       "resolved": "https://registry.npmjs.org/expo/-/expo-54.0.20.tgz",
       "integrity": "sha512-mWHky+H63W60P5Oo+VbtqzF2sLvdaoSSwG57H9rlq1DrgIla++QJZuwJkXXo55lYPymVmkVhwG6FjWYKKylwpw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.20.0",
         "@expo/cli": "54.0.13",
@@ -4800,7 +4811,6 @@
       "version": "14.0.9",
       "resolved": "https://registry.npmjs.org/expo-font/-/expo-font-14.0.9.tgz",
       "integrity": "sha512-xCoQbR/36qqB6tew/LQ6GWICpaBmHLhg/Loix5Rku/0ZtNaXMJv08M9o1AcrdiGTn/Xf/BnLu6DgS45cWQEHZg==",
-      "peer": true,
       "dependencies": {
         "fontfaceobserver": "^2.1.0"
       },
@@ -7676,7 +7686,6 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7694,6 +7703,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
       "integrity": "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -7711,7 +7721,6 @@
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.81.5.tgz",
       "integrity": "sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/create-cache-key-function": "^29.7.0",
         "@react-native/assets-registry": "0.81.5",
@@ -7887,7 +7896,6 @@
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
       "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9336,7 +9344,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/native": "^7.1.18",
     "@react-navigation/native-stack": "^7.5.1",
     "expo": "^54.0.20",

src/components/UI/Form.js

@@ -1,7 +1,10 @@
 import {StyleSheet, Text, TextInput, View} from "react-native";
+import {Picker} from "@react-native-picker/picker";
+
 import {Button, ButtonTray} from "./Button";
 import Icons from "./Icons";
 
+
 const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
 
     //   Initialisation -------------
@@ -41,8 +44,40 @@ const InputText = ({label, value, onChange}) => {
     )
 };
 
+const InputSelect = ({label, prompt, options, value, onChange}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+    return (
+        <View style={styles.item}>
+            <Text style={styles.itemLabel}>{label}</Text>
+            <Picker
+                mode="dropdown"
+                selectedValue={value}
+                onValueChange={onChange}
+                style={styles.itemPickerStyle}
+            >
+                <Picker.Item
+                    value={null}
+                    label={prompt}
+                    style={styles.itemPickerPromptStyle}
+                />
+                {
+                    options.map((option, index) => <Picker.Item
+                        key={index}
+                        value={option.value}
+                        label={option.label}
+                    />)
+                }
+            </Picker>
+        </View>
+    )
+};
+
 // Compose components
 Form.InputText = InputText;
+Form.InputSelect = InputSelect;
 
 // Styles
 
@@ -67,7 +102,13 @@ const styles = StyleSheet.create({
     formContainer: {
         gap: 10
     },
-
+    itemPickerStyle: {
+        height: 50,
+        backgroundColor: 'whitesmoke',
+    },
+    itemPickerPromptStyle: {
+        color: 'gray',
+    },
 });
 
 export default Form;

src/components/entity/modules/moduleForm.js

@@ -20,6 +20,14 @@ const ModuleForm = ({onSubmit, onCancel}) => {
     defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
     defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
 
+    const levels = [
+        {value: 3, label: '3 (Foundation)'},
+        {value: 4, label: '4 (First Year)'},
+        {value: 5, label: '5 (Second Year)'},
+        {value: 6, label: '6 (Third Year)'},
+        {value: 7, label: '7 (Masters)'},
+    ];
+
 
     //   State ----------------------
 
@@ -60,8 +68,10 @@ const ModuleForm = ({onSubmit, onCancel}) => {
                 onChange={(value) => handleChange('ModuleName', value)}
             />
 
-            <Form.InputText
+            <Form.InputSelect
                 label='Module Level'
+                prompt={'Select module level...'}
+                options={levels}
                 value={module.ModuleLevel}
                 onChange={(value) => handleChange('ModuleLevel', value)}
             />