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

src/components/entity/modules/ModuleItem.js

@@ -1,12 +1,12 @@
 import {StyleSheet, Text, View, Pressable} from "react-native";
 
-const ModuleItem = ({module, onSelect }) => {
+const ModuleItem = ({module, onSelect}) => {
     //   Initialisation -------------
     //   State ----------------------
     //   Handlers -------------------
     //   View -----------------------
 
-    return(
+    return (
         <Pressable key={module.ModuleCode} onPress={() => onSelect(module)}>
             <View style={styles.modulesItem}>
                 <Text style={styles.text}>

src/components/entity/modules/ModuleList.js

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

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/layout/Screen.js

@@ -1,5 +1,5 @@
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, View } from "react-native";
+import {StatusBar} from "expo-status-bar";
+import {StyleSheet, View} from "react-native";
 
 const Screen = ({children}) => {
 //   Initialisation -------------
@@ -9,7 +9,7 @@ const Screen = ({children}) => {
     return (
         <View style={styles.screen}>
             {children}
-            <StatusBar style="light" />
+            <StatusBar style="light"/>
         </View>
     );
 };

src/components/screens/ModuleAddScreen.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text } from "react-native";
+import {StyleSheet, Text} from "react-native";
 import Screen from "../layout/Screen";
 
 export const ModuleAddScreen = () => {
@@ -6,11 +6,11 @@ export const ModuleAddScreen = () => {
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
-  return (
-    <Screen style={styles.container}>
-      <Text>Add</Text>
-    </Screen>
-  );
+    return (
+        <Screen style={styles.container}>
+            <Text>Add</Text>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({});

src/components/screens/ModuleListScreen.js

@@ -1,17 +1,16 @@
-import { useState } from "react";
-import { StyleSheet } from "react-native";
+import {useState} from "react";
+import {StyleSheet} from "react-native";
 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 -------------
 //    let modules = initialModules;
 
 //   State ----------------------
-    const [ modules, setModules] = useState(initialModules);
+    const [modules, setModules] = useState(initialModules);
 
 
 //   Handlers -------------------
@@ -19,15 +18,15 @@ const ModuleListScreen = ({navigation}) => {
     const handleDelete = (module) =>
         setModules(modules.filter((item) => item.ModuleID !== module.ModuleID));
 
-    const handleSelect = (module) => navigation.navigate('ModuleViewScreen', { module });
+    const handleSelect = (module) => navigation.navigate('ModuleViewScreen', {module});
 //   View -----------------------
 
-  return (
-    <Screen>
-        <RenderCount />
-        <ModuleList modules={modules} onSelect={handleSelect} />
-    </Screen>
-  );
+    return (
+        <Screen>
+            <RenderCount/>
+            <ModuleList modules={modules} onSelect={handleSelect}/>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({});

src/components/screens/ModuleModifyScreen.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text } from "react-native";
+import {StyleSheet, Text} from "react-native";
 import Screen from "../layout/Screen";
 
 export const ModuleModifyScreen = () => {
@@ -6,11 +6,11 @@ export const ModuleModifyScreen = () => {
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
-  return (
-    <Screen style={styles.container}>
-      <Text>Modify</Text>
-    </Screen>
-  );
+    return (
+        <Screen style={styles.container}>
+            <Text>Modify</Text>
+        </Screen>
+    );
 };
 
 const styles = StyleSheet.create({});

src/components/screens/ModuleViewScreen.js

@@ -1,21 +1,19 @@
-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;
+    const {module} = route.params;
 
 //   State ----------------------
 //   Handlers -------------------
 //   View -----------------------
-  return (
-    <Screen style={styles.container}>
-      <Text>
-          View {module.ModuleCode} {module.ModuleName}
-      </Text>
-    </Screen>
-  );
+    return (<Screen>
+        <ModuleView module={module}></ModuleView>
+    </Screen>);
 };
 
 const styles = StyleSheet.create({});