Files
Tracearr/apps/mobile/app/+not-found.tsx
Rephl3x 3015f48118
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
Initial Upload
2025-12-17 12:32:50 +13:00

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&apos;re looking for doesn&apos;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,
},
});