Merge pull request #32 from simonyiszk/crash-handling

Crash handling

app/[...unmatched].tsx

@@ -0,0 +1,21 @@
+import { useRouter } from 'expo-router';
+import { SafeAreaView } from 'react-native';
+
+import { StyledButton } from '../components/common/styled-button';
+import { Subtitle } from '../components/common/subtitle';
+import { Title } from '../components/common/title';
+
+export default function Unmatched() {
+  const { canGoBack, back } = useRouter();
+  return (
+    <SafeAreaView className='items-center justify-center flex-grow space-y-5'>
+      <Title className='text-center'>Ismeretlen képernyőre jutottál</Title>
+      <Subtitle className='text-center'>Ilyet mi itt nem tartunk</Subtitle>
+      {canGoBack() && (
+        <StyledButton leftIcon='arrow-left' onPress={back}>
+          Vissza
+        </StyledButton>
+      )}
+    </SafeAreaView>
+  );
+}

app/_layout.tsx

@@ -2,10 +2,13 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { Slot } from 'expo-router';
 import { View } from 'react-native';
 
+import { ErrorBoundary } from '../components/common/error-boundary';
 import { Splash } from '../components/common/splash';
 import { queryClient } from '../config/query-client.config';
 import { FavoritePresentationsProvider } from '../contexts/favorite-presentations.context';
 
+export { ErrorBoundary };
+
 export default function MainLayout() {
   return (
     <QueryClientProvider client={queryClient}>

components/common/error-boundary.tsx

@@ -0,0 +1,31 @@
+import { ErrorBoundaryProps } from 'expo-router';
+import { ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { StyledButton } from './styled-button';
+import { Subtitle } from './subtitle';
+import { Title } from './title';
+
+export function ErrorBoundary(props: ErrorBoundaryProps) {
+  const { top, bottom, left, right } = useSafeAreaInsets();
+  return (
+    <View
+      className='bg-blue-500 items-center justify-center flex-1 space-y-5'
+      style={{
+        paddingTop: top,
+        paddingBottom: bottom,
+        paddingLeft: left + 20,
+        paddingRight: right + 20,
+      }}
+    >
+      <Title className='text-white'>Hopp, ez elszállt :(</Title>
+      <ScrollView>
+        <Subtitle className='text-white/50 flex-shrink'>{props.error.message}</Subtitle>
+      </ScrollView>
+      <Subtitle className='text-white/50'>Kérlek ezt jelezd a fejlesztőknek!</Subtitle>
+      <StyledButton onPress={props.retry} className='bg-blue-900'>
+        Újrapróbálkozás
+      </StyledButton>
+    </View>
+  );
+}