addition of module list and module item and alert stating which module is selected

src/components/entity/modules/ModuleItem.js

@@ -0,0 +1,32 @@
+import {StyleSheet, Text, View, Pressable} from "react-native";
+
+const ModuleItem = ({module, onSelect }) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return(
+        <Pressable key={module.ModuleCode} onPress={() => onSelect(module)}>
+            <View style={styles.modulesItem}>
+                <Text style={styles.text}>
+                    {module.ModuleCode} {module.ModuleName}
+                </Text>
+            </View>
+        </Pressable>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    modulesItem: {
+        paddingVertical: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: "light grey",
+    },
+    text: {
+        // fontSize: 16,
+    },
+});
+
+export default ModuleItem;

src/components/entity/modules/ModuleList.js

@@ -0,0 +1,31 @@
+import {StyleSheet, ScrollView } from "react-native";
+import modules from "../../../data/modules";
+import ModuleItem from "./ModuleItem";
+import React from "react";
+
+const ModuleList = ({module, onSelect }) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return(
+        <ScrollView style={styles.modulesContainer}>
+            {modules.map((module) => {
+                return(
+                    <ModuleItem module={module} key={module.ModuleCode} onSelect={onSelect} />
+                )
+            })
+            }
+        </ScrollView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    modulesContainer: {
+
+    },
+});
+
+export default ModuleList;

src/components/screens/ModuleListScreen.js

@@ -1,7 +1,8 @@
-import {StyleSheet, Text, ScrollView, View, Pressable} from "react-native";
+import {StyleSheet } from "react-native";
-import Screen from "../layout/Screen";
 
+import Screen from "../layout/Screen";
 import initialModules from "../../data/modules.js";
+import ModuleList from "../entity/modules/ModuleList";
 
 
 export const ModuleListScreen = () => {
@@ -10,42 +11,19 @@ export const ModuleListScreen = () => {
 
 //   State ----------------------
 //   Handlers -------------------
-    const handleSelect = () => alert("Item selected");
+    const handleSelect = (module) => alert(`Item ${module.ModuleName} selected`);
 
 //   View -----------------------
+
   return (
     <Screen>
-        <ScrollView style={styles.modulesContainer}>
+        <ModuleList modules={{modules}} onSelect={handleSelect} />
-        {modules.map((module) => {
-                return(
-                    <Pressable key={module.ModuleCode} onPress={handleSelect}>
-                        <View style={styles.modulesItem}>
-                            <Text style={styles.text}>
-                                {module.ModuleCode} {module.ModuleName}
-                            </Text>
-                        </View>
-                    </Pressable>
-                )
-            })
-        }
-    </ScrollView>
     </Screen>
   );
 };
 
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({});
-    modulesContainer: {
-        marginTop: 20,
-    },
-    modulesItem: {
-        padding: 15,
-        marginBottom: 10,
-        borderTopWidth: 1,
-        borderTopColor: "light grey",
-        // borderRadius: 15,
-    },
-    text: {
-    },
-});
 
 export default ModuleListScreen;
+
+