Fix TypeError crash from expo-router Sitemap on unmatched routes

app/+not-found.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { Screen } from "@/components/ui/screen";
+import { Text } from "@/components/ui/text";
+import { useRouter } from "expo-router";
+import { View } from "react-native";
+
+export default function NotFoundScreen() {
+  const router = useRouter();
+
+  return (
+    <Screen>
+      <View className="flex-1 items-center justify-center gap-6 px-6">
+        <Text variant="h2">Page not found</Text>
+        <Text variant="muted">The page you're looking for doesn't exist.</Text>
+        <Button variant="accent" onPress={() => router.back()}>
+          <Text>Go back</Text>
+        </Button>
+      </View>
+    </Screen>
+  );
+}

app/_layout.tsx

@@ -67,6 +67,7 @@ const RootLayout = () => {
             <Stack.Screen name="purchase/[token]" options={{ title: "" }} />
             <Stack.Screen name="post/[id]" options={{ title: "" }} />
             <Stack.Screen name="pdf-viewer" options={{ title: "PDF" }} />
+            <Stack.Screen name="+not-found" options={{ title: "Not Found" }} />
           </Stack>
           <StatusBar style="light" />
           <PortalHost />

tests/components/not-found-screen.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen, fireEvent } from "@testing-library/react-native";
+
+const mockBack = jest.fn();
+jest.mock("expo-router", () => ({
+  useRouter: () => ({ back: mockBack }),
+}));
+
+import NotFoundScreen from "@/app/+not-found";
+
+describe("NotFoundScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the not found message", () => {
+    render(<NotFoundScreen />);
+    expect(screen.getByText("Page not found")).toBeTruthy();
+    expect(screen.getByText("The page you're looking for doesn't exist.")).toBeTruthy();
+  });
+
+  it("navigates back when the button is pressed", () => {
+    render(<NotFoundScreen />);
+    fireEvent.press(screen.getByText("Go back"));
+    expect(mockBack).toHaveBeenCalled();
+  });
+});