From 6f062bb150850c886b64a9755d4e0a3fe181e005 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 15:16:43 +0000
Subject: [PATCH 1/7] Added Forms and Local state to Add screen page

---
 src/components/screens/ModuleAddScreen.js | 103 +++++++++++++++++++---
 1 file changed, 89 insertions(+), 14 deletions(-)

diff --git a/src/components/screens/ModuleAddScreen.js b/src/components/screens/ModuleAddScreen.js
index ef5a929..669556c 100644
--- a/src/components/screens/ModuleAddScreen.js
+++ b/src/components/screens/ModuleAddScreen.js
@@ -1,40 +1,115 @@
-import {StyleSheet, Text} from "react-native";
+import {StyleSheet, Text, TextInput, View} from "react-native";
 import Screen from "../layout/Screen";
 import {Button, ButtonTray} from "../UI/Button";
 import Icons from "../UI/Icons";
+import {useState} from "react";
 
 const defaultModule = {
-    ModuleID: Math.floor(100000 + Math.random()*900000),
-    ModuleCode: "CI6330",
-    ModuleName: "Mobile Application Development",
-    ModuleLevel: 6,
-    ModuleLeaderID: 1,
-    ModuleLeaderName: "Graeme Jones",
-    ModuleImage: 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg',
+    ModuleID: null,
+    ModuleCode: null,
+    ModuleName: null,
+    ModuleLevel: null,
+    ModuleLeaderID: null,
+    ModuleLeaderName: null,
+    ModuleImage: null,
 };
 
 export const ModuleAddScreen = ({navigation, route}) => {
 //   Initialisation -------------
-    const { onAdd } = route.params;
+    const {onAdd} = route.params;
+
+    defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
+    defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
 
 //   State ----------------------
+    const [module, setModule] = useState(defaultModule);
+
 //   Handlers -------------------
 
-    const handleAdd = () => onAdd(defaultModule);
+    const handleAdd = () => onAdd(module);
     const handleCancel = navigation.goBack;
 
+    const handleChange = (field, value) => {setModule( {...module, [field]: value} )};
+
 //   View -----------------------
     return (
         <Screen style={styles.container}>
-            <Text>Add</Text>
+
+            <View style={styles.item}>
+                <Text style={styles.itemLabel}>Module Code</Text>
+                <TextInput
+                    value={module.ModuleCode}
+                    onChangeText={ (value) => handleChange('ModuleCode',value) }
+                    style={styles.itemTextInput}
+                />
+            </View>
+
+            <View style={styles.item}>
+                <Text style={styles.itemLabel}>Module Name</Text>
+                <TextInput
+                    value={module.ModuleName}
+                    onChangeText={ (value) => handleChange('ModuleName',value) }
+                    style={styles.itemTextInput}
+                />
+            </View>
+
+            <View style={styles.item}>
+                <Text style={styles.itemLabel}>Module Level</Text>
+                <TextInput
+                    value={module.ModuleLevel}
+                    onChangeText={ (value) => handleChange('ModuleLevel',value) }
+                    style={styles.itemTextInput}
+                />
+            </View>
+
+            <View style={styles.item}>
+                <Text style={styles.itemLabel}>Module Leader Name</Text>
+                <TextInput
+                    value={module.ModuleLeaderName}
+                    onChangeText={ (value) => handleChange('ModuleLeaderName',value) }
+                    style={styles.itemTextInput}
+                />
+            </View>
+
+            <View style={styles.item}>
+                <Text style={styles.itemLabel}>Module Image URL</Text>
+                <TextInput
+                    value={module.ModuleImage}
+                    onChangeText={ (value) => handleChange('ModuleImage',value) }
+                    style={styles.itemTextInput}
+                />
+            </View>
+
+
+
+
+            {/* This is to test whether the correct Data was being stored in Local State */}
+            {/*<Text> {module.ModuleCode}  {module.ModuleName} </Text>*/}
+
             <ButtonTray>
-                <Button label='Cancel' onClick={handleCancel} />
-                <Button label='Add' icon={<Icons.Add/>} onClick={handleAdd} />
+                <Button label='Cancel' onClick={handleCancel}/>
+                <Button label='Add' icon={<Icons.Add/>} onClick={handleAdd}/>
             </ButtonTray>
         </Screen>
     );
 };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+    item: {},
+    itemLabel: {
+        color: 'gray',
+        fontSize: 16,
+        margin: 5,
+    },
+    itemTextInput: {
+        height: 50,
+        paddingLeft: 10,
+        fontSize: 16,
+        backgroundColor: 'white',
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: 'lightgray',
+    },
+});
 
 export default ModuleAddScreen;
\ No newline at end of file

From a08c48b8b194c3f065cede2f4664ddda6a519e0f Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 16:26:58 +0000
Subject: [PATCH 2/7] Refactored Code

---
 Template.js                                 |  2 +-
 package-lock.json                           |  9 +-
 src/components/UI/Form.js                   | 73 ++++++++++++++++
 src/components/entity/modules/moduleForm.js | 93 ++++++++++++++++++++
 src/components/screens/ModuleAddScreen.js   | 97 +--------------------
 src/components/screens/ModuleViewScreen.js  |  2 +-
 6 files changed, 179 insertions(+), 97 deletions(-)
 create mode 100644 src/components/UI/Form.js
 create mode 100644 src/components/entity/modules/moduleForm.js

diff --git a/Template.js b/Template.js
index 73716b8..965079c 100644
--- a/Template.js
+++ b/Template.js
@@ -8,7 +8,7 @@ const Component = () => {
     //   View -----------------------
 
     return (
-        <Text></Text>
+        <View></View>
     );
 };
 
diff --git a/package-lock.json b/package-lock.json
index 65b89e7..72f8457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
       "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",
@@ -4050,6 +4051,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -4746,6 +4748,7 @@
       "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",
@@ -4797,6 +4800,7 @@
       "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"
       },
@@ -7672,6 +7676,7 @@
       "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"
       }
@@ -7689,7 +7694,6 @@
       "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"
       },
@@ -7707,6 +7711,7 @@
       "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",
@@ -7882,6 +7887,7 @@
       "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"
       }
@@ -9330,6 +9336,7 @@
       "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"
       }
diff --git a/src/components/UI/Form.js b/src/components/UI/Form.js
new file mode 100644
index 0000000..811b1b7
--- /dev/null
+++ b/src/components/UI/Form.js
@@ -0,0 +1,73 @@
+import {StyleSheet, Text, TextInput, View} from "react-native";
+import {Button, ButtonTray} from "./Button";
+import Icons from "./Icons";
+
+const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
+
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (
+        <View style={styles.formContainer}>
+
+            <View style={styles.formItems}>
+                {children}
+            </View>
+
+            <ButtonTray>
+                <Button label='Cancel' icon={<Icons.Close/>} onClick={onCancel}/>
+                <Button label={submitLabel} icon={submitIcon} onClick={onSubmit}/>
+            </ButtonTray>
+        </View>
+    );
+};
+
+const InputText = ({label, value, onChange}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+    return (
+        <View style={styles.item}>
+            <Text style={styles.itemLabel}>{label}</Text>
+            <TextInput
+                value={value}
+                onChangeText={onChange}
+                style={styles.itemTextInput}
+            />
+        </View>
+    )
+};
+
+// Compose components
+Form.InputText = InputText;
+
+// Styles
+
+const styles = StyleSheet.create({
+    itemLabel: {
+        color: 'gray',
+        fontSize: 16,
+        margin: 5,
+    },
+    itemTextInput: {
+        height: 50,
+        paddingLeft: 10,
+        fontSize: 16,
+        backgroundColor: 'white',
+        borderRadius: 7,
+        borderWidth: 1,
+        borderColor: 'lightgray',
+    },
+    formItems: {
+        gap: 5,
+    },
+    formContainer: {
+        gap: 10
+    },
+
+});
+
+export default Form;
\ No newline at end of file
diff --git a/src/components/entity/modules/moduleForm.js b/src/components/entity/modules/moduleForm.js
new file mode 100644
index 0000000..e409d1e
--- /dev/null
+++ b/src/components/entity/modules/moduleForm.js
@@ -0,0 +1,93 @@
+import {StyleSheet, Text, TextInput, View} from "react-native";
+import {useState} from "react";
+import Icons from "../../UI/Icons";
+import Form from "../../UI/Form";
+
+const defaultModule = {
+    ModuleID: null,
+    ModuleCode: null,
+    ModuleName: null,
+    ModuleLevel: null,
+    ModuleLeaderID: null,
+    ModuleLeaderName: null,
+    ModuleImage: null,
+};
+
+const ModuleForm = ({onSubmit, onCancel}) => {
+
+    //   Initialisation -------------
+
+    defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
+    defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
+
+
+    //   State ----------------------
+
+    const [module, setModule] = useState(defaultModule);
+
+    //   Handlers -------------------
+
+    const handleChange = (field, value) => {
+        setModule({...module, [field]: value})
+    };
+
+    const handleSubmit = () => onSubmit(module);
+
+
+    //   View -----------------------
+
+    const submitLabel = 'Add';
+    const submitIcon = <Icons.Add/>;
+
+
+    return (
+        <Form
+            onSubmit={handleSubmit}
+            onCancel={onCancel}
+            submitLabel={submitLabel}
+            submitIcon={submitIcon}
+        >
+
+            <Form.InputText
+                label='Module Code'
+                value={module.ModuleCode}
+                onChange={(value) => handleChange('ModuleCode', value)}
+            />
+
+            <Form.InputText
+                label='Module Name'
+                value={module.ModuleName}
+                onChange={(value) => handleChange('ModuleName', value)}
+            />
+
+            <Form.InputText
+                label='Module Level'
+                value={module.ModuleLevel}
+                onChange={(value) => handleChange('ModuleLevel', value)}
+            />
+
+            <Form.InputText
+                label='Module Leader Name'
+                value={module.ModuleLeaderName}
+                onChange={(value) => handleChange('ModuleLeaderName', value)}
+            />
+
+            <Form.InputText
+                label='Module Image URL'
+                value={module.ModuleImage}
+                onChange={(value) => handleChange('ModuleImage', value)}
+            />
+
+            {/* This is to test whether the correct Data was being stored in Local State */}
+            {/*<Text> {module.ModuleCode}  {module.ModuleName} </Text>*/}
+
+        </Form>
+    );
+};
+
+const styles = StyleSheet.create({
+    formContainer: {},
+    item: {},
+});
+
+export default ModuleForm;
\ No newline at end of file
diff --git a/src/components/screens/ModuleAddScreen.js b/src/components/screens/ModuleAddScreen.js
index 669556c..6a2f192 100644
--- a/src/components/screens/ModuleAddScreen.js
+++ b/src/components/screens/ModuleAddScreen.js
@@ -1,115 +1,24 @@
 import {StyleSheet, Text, TextInput, View} from "react-native";
 import Screen from "../layout/Screen";
-import {Button, ButtonTray} from "../UI/Button";
-import Icons from "../UI/Icons";
-import {useState} from "react";
+import ModuleForm from "../entity/modules/moduleForm";
 
-const defaultModule = {
-    ModuleID: null,
-    ModuleCode: null,
-    ModuleName: null,
-    ModuleLevel: null,
-    ModuleLeaderID: null,
-    ModuleLeaderName: null,
-    ModuleImage: null,
-};
 
 export const ModuleAddScreen = ({navigation, route}) => {
 //   Initialisation -------------
     const {onAdd} = route.params;
-
-    defaultModule.ModuleID = Math.floor(100000 + Math.random() * 900000);
-    defaultModule.ModuleImage = 'https://images.freeimages.com/images/small-preview/cf5/cellphone-1313194.jpg';
-
 //   State ----------------------
-    const [module, setModule] = useState(defaultModule);
-
 //   Handlers -------------------
 
-    const handleAdd = () => onAdd(module);
     const handleCancel = navigation.goBack;
 
-    const handleChange = (field, value) => {setModule( {...module, [field]: value} )};
-
 //   View -----------------------
     return (
         <Screen style={styles.container}>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Code</Text>
-                <TextInput
-                    value={module.ModuleCode}
-                    onChangeText={ (value) => handleChange('ModuleCode',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Name</Text>
-                <TextInput
-                    value={module.ModuleName}
-                    onChangeText={ (value) => handleChange('ModuleName',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Level</Text>
-                <TextInput
-                    value={module.ModuleLevel}
-                    onChangeText={ (value) => handleChange('ModuleLevel',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Leader Name</Text>
-                <TextInput
-                    value={module.ModuleLeaderName}
-                    onChangeText={ (value) => handleChange('ModuleLeaderName',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-            <View style={styles.item}>
-                <Text style={styles.itemLabel}>Module Image URL</Text>
-                <TextInput
-                    value={module.ModuleImage}
-                    onChangeText={ (value) => handleChange('ModuleImage',value) }
-                    style={styles.itemTextInput}
-                />
-            </View>
-
-
-
-
-            {/* This is to test whether the correct Data was being stored in Local State */}
-            {/*<Text> {module.ModuleCode}  {module.ModuleName} </Text>*/}
-
-            <ButtonTray>
-                <Button label='Cancel' onClick={handleCancel}/>
-                <Button label='Add' icon={<Icons.Add/>} onClick={handleAdd}/>
-            </ButtonTray>
+            <ModuleForm onSubmit={onAdd} onCancel={handleCancel}/>
         </Screen>
     );
 };
 
-const styles = StyleSheet.create({
-    item: {},
-    itemLabel: {
-        color: 'gray',
-        fontSize: 16,
-        margin: 5,
-    },
-    itemTextInput: {
-        height: 50,
-        paddingLeft: 10,
-        fontSize: 16,
-        backgroundColor: 'white',
-        borderRadius: 7,
-        borderWidth: 1,
-        borderColor: 'lightgray',
-    },
-});
+const styles = StyleSheet.create({});
 
 export default ModuleAddScreen;
\ No newline at end of file
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
index 3e90694..7d32a61 100644
--- a/src/components/screens/ModuleViewScreen.js
+++ b/src/components/screens/ModuleViewScreen.js
@@ -12,7 +12,7 @@ export const ModuleViewScreen = ({route}) => {
 //   Handlers -------------------
 //   View -----------------------
     return (<Screen>
-        <ModuleView module={module} onDelete={onDelete}></ModuleView>
+        <ModuleView module={module} onDelete={onDelete} />
     </Screen>);
 };
 

From d22b5decda62d332a303715ce38cf2ff42df8951 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 17:29:59 +0000
Subject: [PATCH 3/7] Updates to forms and added picker for module form.

---
 package-lock.json                           | 23 +++++++----
 package.json                                |  1 +
 src/components/UI/Form.js                   | 43 ++++++++++++++++++++-
 src/components/entity/modules/moduleForm.js | 12 +++++-
 4 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72f8457..362c06a 100644
--- a/package-lock.json
+++ b/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"
       }
diff --git a/package.json b/package.json
index 47f7106..edb9d14 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/UI/Form.js b/src/components/UI/Form.js
index 811b1b7..f6c44cc 100644
--- a/src/components/UI/Form.js
+++ b/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;
\ No newline at end of file
diff --git a/src/components/entity/modules/moduleForm.js b/src/components/entity/modules/moduleForm.js
index e409d1e..821844e 100644
--- a/src/components/entity/modules/moduleForm.js
+++ b/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)}
             />

From 6cd703af3356c1f762973c743f0852090ef99859 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 17:51:50 +0000
Subject: [PATCH 4/7] added keyboard avoiding view and scroll view to form.js

---
 src/components/UI/Form.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/UI/Form.js b/src/components/UI/Form.js
index f6c44cc..394c141 100644
--- a/src/components/UI/Form.js
+++ b/src/components/UI/Form.js
@@ -1,4 +1,4 @@
-import {StyleSheet, Text, TextInput, View} from "react-native";
+import {KeyboardAvoidingView, ScrollView, StyleSheet, Text, TextInput, View} from "react-native";
 import {Picker} from "@react-native-picker/picker";
 
 import {Button, ButtonTray} from "./Button";
@@ -13,17 +13,17 @@ const Form = ({children, onSubmit, onCancel, submitLabel, submitIcon}) => {
     //   View -----------------------
 
     return (
-        <View style={styles.formContainer}>
+        <KeyboardAvoidingView style={styles.formContainer}>
 
-            <View style={styles.formItems}>
+            <ScrollView contentContainerStyle={styles.formItems}>
                 {children}
-            </View>
+            </ScrollView>
 
             <ButtonTray>
                 <Button label='Cancel' icon={<Icons.Close/>} onClick={onCancel}/>
                 <Button label={submitLabel} icon={submitIcon} onClick={onSubmit}/>
             </ButtonTray>
-        </View>
+        </KeyboardAvoidingView>
     );
 };
 

From 1f76cd8015039d2666efdece8697a108d3c6460b Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 18:02:15 +0000
Subject: [PATCH 5/7] Added modify screen routing

---
 src/components/entity/modules/ModuleView.js |  8 ++++++--
 src/components/screens/ModuleListScreen.js  | 22 +++++++++++++++------
 src/components/screens/ModuleViewScreen.js  | 13 +++++++++---
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/entity/modules/ModuleView.js b/src/components/entity/modules/ModuleView.js
index d1852ec..134aad3 100644
--- a/src/components/entity/modules/ModuleView.js
+++ b/src/components/entity/modules/ModuleView.js
@@ -3,7 +3,7 @@ import FullWidthImage from "react-native-fullwidth-image";
 import {Button, ButtonTray} from "../../UI/Button";
 import Icons from "../../UI/Icons.js"
 
-const ModuleView = ({module, onDelete}) => {
+const ModuleView = ({module, onDelete, onModify}) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
@@ -35,7 +35,11 @@ const ModuleView = ({module, onDelete}) => {
         </View>
 
         <ButtonTray>
-            <Button icon={<Icons.Edit/>} label={"Modify"}/>
+            <Button
+                icon={<Icons.Edit/>}
+                label={"Modify"}
+                onClick={onModify}
+            />
             <Button
                 icon={<Icons.Delete/>}
                 label={"Delete"}
diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 115e9e4..1a5ec75 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -15,7 +15,6 @@ const ModuleListScreen = ({navigation}) => {
 //   State ----------------------
     const [modules, setModules] = useState(initialModules);
 
-
 //   Handlers -------------------
 
     const handleDelete = (module) =>
@@ -27,17 +26,28 @@ const ModuleListScreen = ({navigation}) => {
         navigation.goBack();
     }
 
-    const handleAdd = (module) => setModules([ ...modules, module]);
+    const handleAdd = (module) => setModules([...modules, module]);
+
+    const handleModify = (updatedModule) => setModules(
+        modules.map((module) => (module.ModuleID === updatedModule.ModuleID) ? updatedModule : module),
+    );
 
     const onAdd = (module) => {
         handleAdd(module);
         navigation.goBack();
     };
 
+    const onModify = (module) => {
+        handleModify(module);
+        navigation.navigate('ModuleListScreen');
+    };
+
     const goToViewScreen = (module) =>
-        navigation.navigate('ModuleViewScreen', {module, onDelete});
+        navigation.navigate('ModuleViewScreen', {module, onDelete, onModify});
+
+    const goToAddScreen = () =>
+        navigation.navigate('ModuleAddScreen', {onAdd});
 
-    const goToAddScreen = () => navigation.navigate('ModuleAddScreen', {onAdd});
 
 //   View -----------------------
 
@@ -45,9 +55,9 @@ const ModuleListScreen = ({navigation}) => {
         <Screen>
             {/*<RenderCount/>*/}
             <ButtonTray>
-                <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen} />
+                <Button label='Add' icon={<Icons.Add/>} onClick={goToAddScreen}/>
             </ButtonTray>
-            <ModuleList modules={modules} onSelect={goToViewScreen} />
+            <ModuleList modules={modules} onSelect={goToViewScreen}/>
         </Screen>
     );
 };
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
index 7d32a61..e79d3f4 100644
--- a/src/components/screens/ModuleViewScreen.js
+++ b/src/components/screens/ModuleViewScreen.js
@@ -3,16 +3,23 @@ import Screen from "../layout/Screen";
 import ModuleView from "../entity/modules/ModuleView";
 
 
-export const ModuleViewScreen = ({route}) => {
+export const ModuleViewScreen = ({navigation, route}) => {
 //   Initialisation -------------
 
-    const {module, onDelete} = route.params;
+    const {module, onDelete, onModify} = route.params;
 
 //   State ----------------------
 //   Handlers -------------------
+
+    const goToModifyScreen = () => navigation.navigate("ModuleModifyScreen");
+
 //   View -----------------------
     return (<Screen>
-        <ModuleView module={module} onDelete={onDelete} />
+        <ModuleView
+            module={module}
+            onDelete={onDelete}
+            onModify={goToModifyScreen}
+        />
     </Screen>);
 };
 

From 924b57186feeb836e5533a5c3617b64e2f33c983 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 18:21:40 +0000
Subject: [PATCH 6/7] Added modify functionality.

---
 src/components/entity/modules/moduleForm.js  |  8 ++++----
 src/components/screens/ModuleModifyScreen.js | 14 ++++++++++++--
 src/components/screens/ModuleViewScreen.js   |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/entity/modules/moduleForm.js b/src/components/entity/modules/moduleForm.js
index 821844e..a46990b 100644
--- a/src/components/entity/modules/moduleForm.js
+++ b/src/components/entity/modules/moduleForm.js
@@ -13,7 +13,7 @@ const defaultModule = {
     ModuleImage: null,
 };
 
-const ModuleForm = ({onSubmit, onCancel}) => {
+const ModuleForm = ({originalModule, onSubmit, onCancel}) => {
 
     //   Initialisation -------------
 
@@ -31,7 +31,7 @@ const ModuleForm = ({onSubmit, onCancel}) => {
 
     //   State ----------------------
 
-    const [module, setModule] = useState(defaultModule);
+    const [module, setModule] = useState(originalModule || defaultModule);
 
     //   Handlers -------------------
 
@@ -44,8 +44,8 @@ const ModuleForm = ({onSubmit, onCancel}) => {
 
     //   View -----------------------
 
-    const submitLabel = 'Add';
-    const submitIcon = <Icons.Add/>;
+    const submitLabel = originalModule ? 'Modify' : 'Add';
+    const submitIcon = originalModule ? <Icons.Edit/> : <Icons.Add/>;
 
 
     return (
diff --git a/src/components/screens/ModuleModifyScreen.js b/src/components/screens/ModuleModifyScreen.js
index ae2ccec..a0ec622 100644
--- a/src/components/screens/ModuleModifyScreen.js
+++ b/src/components/screens/ModuleModifyScreen.js
@@ -1,14 +1,24 @@
 import {StyleSheet, Text} from "react-native";
 import Screen from "../layout/Screen";
+import ModuleForm from "../entity/modules/moduleForm";
 
-export const ModuleModifyScreen = () => {
+export const ModuleModifyScreen = ({navigation, route}) => {
 //   Initialisation -------------
+    const {module, onModify} = route.params;
+
 //   State ----------------------
 //   Handlers -------------------
+
+    const handleCancel = () => navigation.navigate.goBack();
+
 //   View -----------------------
     return (
         <Screen style={styles.container}>
-            <Text>Modify</Text>
+            <ModuleForm
+                originalModule={module}
+                onSubmit={onModify}
+                onCancel={handleCancel}
+            />
         </Screen>
     );
 };
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
index e79d3f4..a08eb9b 100644
--- a/src/components/screens/ModuleViewScreen.js
+++ b/src/components/screens/ModuleViewScreen.js
@@ -11,7 +11,7 @@ export const ModuleViewScreen = ({navigation, route}) => {
 //   State ----------------------
 //   Handlers -------------------
 
-    const goToModifyScreen = () => navigation.navigate("ModuleModifyScreen");
+    const goToModifyScreen = () => navigation.navigate("ModuleModifyScreen", { module, onModify });
 
 //   View -----------------------
     return (<Screen>

From 68d67feab232af28fa7d73e23e9b4401de9974b0 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Thu, 4 Dec 2025 18:29:36 +0000
Subject: [PATCH 7/7] Fixed page rendering by using replace method aka strategy
 2B from fix Video.

---
 src/components/screens/ModuleListScreen.js | 2 +-
 src/components/screens/ModuleViewScreen.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 1a5ec75..1947231 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -39,7 +39,7 @@ const ModuleListScreen = ({navigation}) => {
 
     const onModify = (module) => {
         handleModify(module);
-        navigation.navigate('ModuleListScreen');
+        navigation.replace('ModuleViewScreen', { module, onDelete, onModify });
     };
 
     const goToViewScreen = (module) =>
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
index a08eb9b..2a9da5f 100644
--- a/src/components/screens/ModuleViewScreen.js
+++ b/src/components/screens/ModuleViewScreen.js
@@ -11,7 +11,7 @@ export const ModuleViewScreen = ({navigation, route}) => {
 //   State ----------------------
 //   Handlers -------------------
 
-    const goToModifyScreen = () => navigation.navigate("ModuleModifyScreen", { module, onModify });
+    const goToModifyScreen = () => navigation.replace("ModuleModifyScreen", { module, onModify });
 
 //   View -----------------------
     return (<Screen>