first commit

app/screens/NotFoundScreen.tsx

@@ -0,0 +1,40 @@
+import { StackScreenProps } from "@react-navigation/stack";
+import * as React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+import { RootStackParamList } from "../types";
+
+export default function NotFoundScreen({
+	navigation,
+}: StackScreenProps<RootStackParamList, "NotFound">) {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>This screen doesn't exist.</Text>
+			<TouchableOpacity onPress={() => navigation.replace("Root")} style={styles.link}>
+				<Text style={styles.linkText}>Go to home screen!</Text>
+			</TouchableOpacity>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "#fff",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: 20,
+	},
+	title: {
+		fontSize: 20,
+		fontWeight: "bold",
+	},
+	link: {
+		marginTop: 15,
+		paddingVertical: 15,
+	},
+	linkText: {
+		fontSize: 14,
+		color: "#2e78b7",
+	},
+});

app/screens/TabOneScreen.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+
+import EditScreenInfo from "../components/EditScreenInfo";
+import { Text, View } from "../components/Themed";
+
+export default function TabOneScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Tab One</Text>
+			<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+			<EditScreenInfo path="/screens/TabOneScreen.tsx" />
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	title: {
+		fontSize: 20,
+		fontWeight: "bold",
+	},
+	separator: {
+		marginVertical: 30,
+		height: 1,
+		width: "80%",
+	},
+});

app/screens/TabTwoScreen.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+
+import EditScreenInfo from "../components/EditScreenInfo";
+import { Text, View } from "../components/Themed";
+import type { Conversation } from "../../api/src/controller/sms";
+
+export default function TabTwoScreen() {
+	const [conversations, setConversations] = React.useState<Conversation>({});
+	const conversationsEntries = Object.entries(conversations);
+
+	React.useEffect(() => {
+		fetch("http://192.168.1.40:3000/conversations")
+			.then(response => response.json())
+			.then(conversations => setConversations(conversations))
+			.catch(error => console.error("error", error));
+	}, []);
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Tab Two</Text>
+			<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+			{conversationsEntries.map(([recipient, messages], index) => {
+				const lastMessage = messages[messages.length - 1];
+				return (
+					<>
+						<View>
+							<Text>{recipient}</Text>
+							<Text>{lastMessage.content}</Text>
+							<Text>{new Date(lastMessage.sentAt).toDateString()}</Text>
+						</View>
+						{index + 1 < messages.length && (
+							<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+						)}
+					</>
+				)
+			})}
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	title: {
+		fontSize: 20,
+		fontWeight: "bold",
+	},
+	separator: {
+		marginVertical: 30,
+		height: 1,
+		width: "80%",
+	},
+});