Added Screen component and other pages

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>

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;

src/components/screens/Add/add.js

@@ -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",
-  },
-});

src/components/screens/List/list.js

@@ -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",
-  },
-});

src/components/screens/Modify/modify.js

@@ -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",
-  },
-});

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;

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({
+const styles = StyleSheet.create({});
-    container: {
-        flex: 1,
-        backgroundColor: "#fff",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
 
 export default ModuleListScreen;

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;

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;

src/components/screens/View/view.js

@@ -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",
-  },
-});