Added Screen component and other pages

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