Module View added, with images and moved view into reusable component for ModuleView. All activities done for week 2.

package-lock.json

@@ -13,7 +13,8 @@
         "expo": "^54.0.20",
         "expo-status-bar": "~3.0.8",
         "react": "19.1.0",
-        "react-native": "^0.81.5"
+        "react-native": "^0.81.5",
+        "react-native-fullwidth-image": "^0.1.3"
       }
     },
     "node_modules/@0no-co/graphql.web": {
@@ -7756,6 +7757,11 @@
         }
       }
     },
+    "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",
+      "integrity": "sha512-nFe5EAEPlPaT1vw1abwnNmSZN9oLMzNXJAKKxeuWqPI9L7rGhXhpZH4KEBUzbqkk+58TjdT9d2bf070/GB4PGQ=="
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",

package.json

@@ -14,7 +14,8 @@
     "expo": "^54.0.20",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",
-    "react-native": "^0.81.5"
+    "react-native": "^0.81.5",
+    "react-native-fullwidth-image": "^0.1.3"
   },
   "private": true
 }

src/components/entity/modules/ModuleView.js

@@ -0,0 +1,42 @@
+import {StyleSheet, Text, View } from "react-native";
+import FullWidthImage from "react-native-fullwidth-image";
+
+const ModuleView = ({module}) => {
+    //   Initialisation -------------
+    //   State ----------------------
+    //   Handlers -------------------
+    //   View -----------------------
+
+    return (<View style={styles.container}>
+        <FullWidthImage source={{uri: module.ModuleImage}} style={styles.image}/>
+
+        <View style={styles.infoTray}>
+            <Text style={styles.boldText}>View {module.ModuleCode} {module.ModuleName}</Text>
+            <Text style={styles.text}>Level {module.ModuleLevel}</Text>
+            <Text style={styles.Text}>
+                {module.ModuleLeaderName} <Text style={styles.dimText}>(Module Leader)</Text>
+            </Text>
+
+        </View>
+    </View>);
+};
+
+
+const styles = StyleSheet.create({
+    container: {
+        gap: 15,
+    }, infoTray: {
+        gap: 5,
+    }, image: {
+        borderRadius: 3,
+    }, text: {
+        fontSize: 16,
+    }, boldText: {
+        fontSize: 16, fontWeight: 'bold',
+    }, dimText: {
+        color: "grey",
+    }
+
+});
+
+export default ModuleView;

src/components/screens/ModuleListScreen.js

@@ -4,7 +4,6 @@ import Screen from "../layout/Screen";
 import ModuleList from "../entity/modules/ModuleList";
 import initialModules from "../../data/modules.js";
 import RenderCount from "../UI/RenderCount";
-import ModuleViewScreen from "./ModuleViewScreen";
 
 const ModuleListScreen = ({navigation}) => {
 //   Initialisation -------------

src/components/screens/ModuleViewScreen.js

@@ -1,7 +1,9 @@
-import { StyleSheet, Text } from "react-native";
+import {StyleSheet} from "react-native";
 import Screen from "../layout/Screen";
+import ModuleView from "../entity/modules/ModuleView";
 
-export const ModuleViewScreen = ({Navigate, route}) => {
+
+export const ModuleViewScreen = ({ route }) => {
 //   Initialisation -------------
 
     const {module} = route.params;
@@ -9,13 +11,9 @@ export const ModuleViewScreen = ({Navigate, route}) => {
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
-  return (
+    return (<Screen>
-    <Screen style={styles.container}>
+        <ModuleView module={module}></ModuleView>
-      <Text>
+    </Screen>);
-          View {module.ModuleCode} {module.ModuleName}
-      </Text>
-    </Screen>
-  );
 };
 
 const styles = StyleSheet.create({});