Move HomeScreen into a seperate file. Replace add with +.

Add dummy AddEntry.

components/Timetable.js

@@ -1,56 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-	Button,
+	Portal,
-	Card,
-	Text
 } from "react-native-paper";
-
-import {
-	View,
-	StyleSheet
-} from "react-native";
-
 import { createStackNavigator } from "@react-navigation/stack";
 
-function HomeScreen({ timetable, subjects, navigation, days }) {
+import HomeScreen from "./timetable/HomeScreen";
-	return (<>
+import AddEntry from "./timetable/AddEntry";
-		{timetable.map((day, dayIdx) => (
-			<Card key={dayIdx} style={style.card}>
-				<Card.Title title={days[dayIdx]} />
-				<Card.Content>
-					{day.map((cls, idx) => {
-						const subject = subjects.find(i => i.id === cls.sub_id);
-						return (<View key={idx} style={style.class}>
-							<Text>{subject.name}</Text>
-							<Text>{cls.start} to {cls.end}</Text>
-							<Text>{cls.count}</Text>
-						</View>);
-					})}
-				</Card.Content>
-				<Card.Actions>
-					<Button
-						onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
-					>Add</Button>
-				</Card.Actions>
-			</Card>
-		))}
-	</>);
-}
-
-HomeScreen.propTypes = {
-	timetable: PropTypes.array,
-	subjects: PropTypes.array,
-	navigation: PropTypes.object,
-	days: PropTypes.array,
-};
 
 const Stack = createStackNavigator();
 
 export default function Timetable({ timetable, subjects }) {
 	const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 	return (
-		<Stack.Navigator>
+		<Portal.Host><Stack.Navigator headerMode="none">
 			<Stack.Screen name="Timetable">
 				{(props) => (
 					<HomeScreen
@@ -64,13 +27,16 @@ export default function Timetable({ timetable, subjects }) {
 			{days.map((day, idx) => (
 				<Stack.Screen name={`New Entry ${day}`} key={idx}>
 					{(props) => (
-						<Text
+						<AddEntry
 							{...props}
-						>{idx}</Text>
+							subjects={subjects}
+							day={idx}
+							days={days}
+						/>
 					)}
 				</Stack.Screen>
 			))}
-		</Stack.Navigator>
+		</Stack.Navigator></Portal.Host>
 	);
 }
 
@@ -80,19 +46,3 @@ Timetable.propTypes = {
 	addTimetableEntry: PropTypes.func,
 	removeTimetableEntry: PropTypes.func,
 };
-
-const style = StyleSheet.create({
-	card: {
-		marginTop: 12,
-		marginLeft: 10,
-		marginRight: 10,
-	},
-	text: {
-		marginTop: 12,
-		textAlign: "center",
-	},
-	class: {
-		flexDirection: "row",
-		justifyContent: "space-between"
-	}
-});

components/timetable/AddEntry.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+	IconButton,
+} from "react-native-paper";
+
+function AddEntry({navigation}) {
+	return (<>
+		<IconButton icon="arrow-left" onPress={() => navigation.pop()}/>
+	</>);
+}
+
+AddEntry.propTypes = {
+	subjects: PropTypes.array,
+	navigation: PropTypes.object,
+};
+
+export default AddEntry;

components/timetable/HomeScreen.js

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import {
+	IconButton,
+	Card,
+	Text,
+	withTheme,
+} from "react-native-paper";
+
+import {
+	View,
+	StyleSheet
+} from "react-native";
+
+function HomeScreen({ theme, timetable, subjects, navigation, days }) {
+	return (<>
+		{timetable.map((day, dayIdx) => (
+			<Card key={dayIdx} style={style.card}>
+				<Card.Title title={days[dayIdx]} />
+				<Card.Content>
+					{day.map((cls, idx) => {
+						const subject = subjects.find(i => i.id === cls.sub_id);
+						return (<View key={idx} style={style.class}>
+							<Text>{subject.name}</Text>
+							<Text>{cls.start} to {cls.end}</Text>
+							<Text>{cls.count}</Text>
+						</View>);
+					})}
+				</Card.Content>
+				<Card.Actions style={{justifyContent: "flex-end"}}>
+					<IconButton
+						onPress={() => navigation.navigate(`New Entry ${days[dayIdx]}`)}
+						icon="plus"
+						color={theme.colors.primary}
+					/>
+				</Card.Actions>
+			</Card>
+		))}
+	</>);
+}
+
+HomeScreen.propTypes = {
+	timetable: PropTypes.array,
+	subjects: PropTypes.array,
+	navigation: PropTypes.object,
+	days: PropTypes.array,
+	theme: PropTypes.object,
+};
+
+const style = StyleSheet.create({
+	card: {
+		marginTop: 12,
+		marginLeft: 10,
+		marginRight: 10,
+	},
+	text: {
+		marginTop: 12,
+		textAlign: "center",
+	},
+	class: {
+		flexDirection: "row",
+		justifyContent: "space-between"
+	},
+});
+
+export default withTheme(HomeScreen);