1  import React from 'react';
 2  import { Link, Stack } from 'expo-router';
 3  import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 4  import { useTheme, Theme } from '@react-navigation/native';
 5  import { Ionicons } from '@expo/vector-icons';
 6  
 7  export default function NotFoundScreen() {
 8    const { colors } = useTheme();
 9    const styles = getStyles(colors);
10  
11    return (
12      <>
13        <Stack.Screen options={{ title: 'Oops!', headerShown: false }} />
14        <View style={styles.container}>
15          <View style={styles.content}>
16            <Ionicons
17              name="alert-circle-outline"
18              size={80}
19              color={colors.primary}
20            />
21            <Text style={styles.title}>Page Not Found</Text>
22            <Text style={styles.message}>
23              The page you&apos;re looking for doesn&apos;t exist or has been
24              moved.
25            </Text>
26            <Link href="/" asChild>
27              <TouchableOpacity style={styles.button}>
28                <Text style={styles.buttonText}>Go to Home</Text>
29              </TouchableOpacity>
30            </Link>
31          </View>
32        </View>
33      </>
34    );
35  }
36  
37  const getStyles = (colors: Theme['colors']) =>
38    StyleSheet.create({
39      container: {
40        flex: 1,
41        backgroundColor: colors.card,
42        alignItems: 'center',
43        justifyContent: 'center',
44        padding: 20,
45      },
46      content: {
47        alignItems: 'center',
48        justifyContent: 'center',
49      },
50      title: {
51        fontSize: 24,
52        fontWeight: 'bold',
53        color: colors.text,
54        marginTop: 20,
55        marginBottom: 10,
56      },
57      message: {
58        fontSize: 16,
59        color: colors.text,
60        textAlign: 'center',
61        marginBottom: 30,
62      },
63      button: {
64        backgroundColor: colors.primary,
65        paddingHorizontal: 20,
66        paddingVertical: 10,
67        borderRadius: 5,
68      },
69      buttonText: {
70        color: colors.card,
71        fontSize: 16,
72        fontWeight: 'bold',
73      },
74    });