From 5345bd120ba8dabf0448d9ad06ed61ebcde960e2 Mon Sep 17 00:00:00 2001
From: mudabbir-ahmad <mudabbira.uk@gmail.com>
Date: Fri, 24 Oct 2025 21:45:55 +0100
Subject: [PATCH] Added Screen component and other pages

---
 App.js                                       | 33 ++++++++++++++++----
 src/components/layout/Screen.js              | 26 +++++++++++++++
 src/components/screens/Add/add.js            | 22 -------------
 src/components/screens/List/list.js          | 17 ----------
 src/components/screens/Modify/modify.js      | 17 ----------
 src/components/screens/ModuleAddScreen.js    | 19 +++++++++++
 src/components/screens/ModuleListScreen.js   | 13 ++------
 src/components/screens/ModuleModifyScreen.js | 19 +++++++++++
 src/components/screens/ModuleViewScreen.js   | 19 +++++++++++
 src/components/screens/View/view.js          | 17 ----------
 10 files changed, 113 insertions(+), 89 deletions(-)
 create mode 100644 src/components/layout/Screen.js
 delete mode 100644 src/components/screens/Add/add.js
 delete mode 100644 src/components/screens/List/list.js
 delete mode 100644 src/components/screens/Modify/modify.js
 create mode 100644 src/components/screens/ModuleAddScreen.js
 create mode 100644 src/components/screens/ModuleModifyScreen.js
 create mode 100644 src/components/screens/ModuleViewScreen.js
 delete mode 100644 src/components/screens/View/view.js

diff --git a/App.js b/App.js
index 1dfa680..dfa29a2 100644
--- a/App.js
+++ b/App.js
@@ -1,6 +1,9 @@
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import ModuleListScreen from "./src/components/screens/ModuleListScreen";
+import ModuleModifyScreen from "./src/components/screens/ModuleModifyScreen";
+import ModuleViewScreen from "./src/components/screens/ModuleViewScreen";
+import ModuleAddScreen from "./src/components/screens/ModuleAddScreen";
 
 const Stack = createNativeStackNavigator();
 
@@ -12,18 +15,36 @@ export const App = () => {
     return (
         <NavigationContainer>
          <Stack.Navigator
-             initialRouteName='ModuleListScreen'
+             initialRouteName='ModuleAddScreen'
              screenOptions= {{
                 headerStyle: { backgroundColor: "black" },
                 headerTintColor: "white"
          }}
          >
+             <Stack.Screen
+                 name="ModuleListScreen"
+                 component={ModuleListScreen}
+                 options={{  title: 'List Modules' }}
+             />
+
+             <Stack.Screen
+                 name="ModuleAddScreen"
+                 component={ModuleAddScreen}
+                 options={{  title: 'Add Modules' }}
+             />
+
+             <Stack.Screen
+                 name="ModuleViewScreen"
+                 component={ModuleViewScreen}
+                 options={{  title: 'View Modules' }}
+             />
+
+             <Stack.Screen
+              name="ModuleModifyScreen"
+              component={ModuleModifyScreen}
+              options={{  title: 'Modify Modules' }}
+             />
 
-          <Stack.Screen
-              name="ModuleListScreen"
-              component={ModuleListScreen}
-              options={{  title: 'List Modules' }}
-          />
          </Stack.Navigator>
 
         </NavigationContainer>
diff --git a/src/components/layout/Screen.js b/src/components/layout/Screen.js
new file mode 100644
index 0000000..cd41bca
--- /dev/null
+++ b/src/components/layout/Screen.js
@@ -0,0 +1,26 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, View } from "react-native";
+
+const Screen = ({children}) => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+    return (
+        <View style={styles.screen}>
+            {children}
+            <StatusBar style="light" />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+
+export default Screen;
\ No newline at end of file
diff --git a/src/components/screens/Add/add.js b/src/components/screens/Add/add.js
deleted file mode 100644
index ce7e179..0000000
--- a/src/components/screens/Add/add.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default function add() {
-  // Initialisation ...............
-  // State ........................
-  // Handlers .....................
-  // View .........................
-
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
diff --git a/src/components/screens/List/list.js b/src/components/screens/List/list.js
deleted file mode 100644
index afa17e1..0000000
--- a/src/components/screens/List/list.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function list() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
\ No newline at end of file
diff --git a/src/components/screens/Modify/modify.js b/src/components/screens/Modify/modify.js
deleted file mode 100644
index bef3630..0000000
--- a/src/components/screens/Modify/modify.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function modify() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
\ No newline at end of file
diff --git a/src/components/screens/ModuleAddScreen.js b/src/components/screens/ModuleAddScreen.js
new file mode 100644
index 0000000..b6eaf8e
--- /dev/null
+++ b/src/components/screens/ModuleAddScreen.js
@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleAddScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>Add</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleAddScreen;
\ No newline at end of file
diff --git a/src/components/screens/ModuleListScreen.js b/src/components/screens/ModuleListScreen.js
index 7112246..f9ee0ef 100644
--- a/src/components/screens/ModuleListScreen.js
+++ b/src/components/screens/ModuleListScreen.js
@@ -7,20 +7,13 @@ export const ModuleListScreen = () => {
 //   Handlers -------------------
 //   View -----------------------
   return (
-    <View style={styles.container}>
+    <Screen style={styles.container}>
       <Text>List</Text>
       <StatusBar style="auto" />
-    </View>
+    </Screen>
   );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
+const styles = StyleSheet.create({});
 
 export default ModuleListScreen;
\ No newline at end of file
diff --git a/src/components/screens/ModuleModifyScreen.js b/src/components/screens/ModuleModifyScreen.js
new file mode 100644
index 0000000..501f6a9
--- /dev/null
+++ b/src/components/screens/ModuleModifyScreen.js
@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleModifyScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>Modify</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleModifyScreen;
\ No newline at end of file
diff --git a/src/components/screens/ModuleViewScreen.js b/src/components/screens/ModuleViewScreen.js
new file mode 100644
index 0000000..ea3405c
--- /dev/null
+++ b/src/components/screens/ModuleViewScreen.js
@@ -0,0 +1,19 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+
+export const ModuleViewScreen = () => {
+//   Initialisation -------------
+//   State ----------------------
+//   Handlers -------------------
+//   View -----------------------
+  return (
+    <Screen style={styles.container}>
+      <Text>View</Text>
+      <StatusBar style="auto" />
+    </Screen>
+  );
+};
+
+const styles = StyleSheet.create({});
+
+export default ModuleViewScreen;
\ No newline at end of file
diff --git a/src/components/screens/View/view.js b/src/components/screens/View/view.js
deleted file mode 100644
index 908303c..0000000
--- a/src/components/screens/View/view.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function view() {
-  return (
-    <View style={styles.container}>
-      <Text>activity 1 complete on week 1 yay!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
\ No newline at end of file