Some checks failed
CI / Lint & Typecheck (push) Has been cancelled
CI / Test (routes) (push) Has been cancelled
CI / Test (security) (push) Has been cancelled
CI / Test (services) (push) Has been cancelled
CI / Test (unit) (push) Has been cancelled
CI / Test (integration) (push) Has been cancelled
CI / Test Coverage (push) Has been cancelled
CI / Build (push) Has been cancelled
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
/**
|
|
* 404 Not Found screen
|
|
*/
|
|
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
|
import { Stack, useRouter } from 'expo-router';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { colors, spacing, borderRadius, typography } from '@/lib/theme';
|
|
|
|
export default function NotFoundScreen() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
<Stack.Screen options={{ title: 'Page Not Found' }} />
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.content}>
|
|
<Text style={styles.errorCode}>404</Text>
|
|
<Text style={styles.title}>Page Not Found</Text>
|
|
<Text style={styles.subtitle}>
|
|
The page you're looking for doesn't exist or has been moved.
|
|
</Text>
|
|
<Pressable style={styles.button} onPress={() => router.replace('/')}>
|
|
<Text style={styles.buttonText}>Go Home</Text>
|
|
</Pressable>
|
|
</View>
|
|
</SafeAreaView>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background.dark,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: spacing.lg,
|
|
},
|
|
errorCode: {
|
|
fontSize: 72,
|
|
fontWeight: 'bold',
|
|
color: colors.cyan.core,
|
|
marginBottom: spacing.md,
|
|
},
|
|
title: {
|
|
fontSize: typography.fontSize['2xl'],
|
|
fontWeight: 'bold',
|
|
color: colors.text.primary.dark,
|
|
marginBottom: spacing.sm,
|
|
},
|
|
subtitle: {
|
|
fontSize: typography.fontSize.base,
|
|
color: colors.text.secondary.dark,
|
|
textAlign: 'center',
|
|
marginBottom: spacing.xl,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.cyan.core,
|
|
paddingVertical: spacing.md,
|
|
paddingHorizontal: spacing.xl,
|
|
borderRadius: borderRadius.md,
|
|
},
|
|
buttonText: {
|
|
fontSize: typography.fontSize.base,
|
|
fontWeight: '600',
|
|
color: colors.blue.core,
|
|
},
|
|
});
|