Implement not-found page

src/lib/routes/types.ts

@@ -4,6 +4,7 @@ import type {NativeStackNavigationProp} from '@react-navigation/native-stack'
 export type {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 export type CommonNavigatorParams = {
+  NotFound: undefined
   Settings: undefined
   Profile: {name: string}
   ProfileFollowers: {name: string}

src/routes.tsx

@@ -20,6 +20,7 @@ import {BottomBar} from './view/shell/BottomBar'
 import {HomeScreen} from './view/screens/Home'
 import {SearchScreen} from './view/screens/Search'
 import {NotificationsScreen} from './view/screens/Notifications'
+import {NotFoundScreen} from './view/screens/NotFound'
 import {SettingsScreen} from './view/screens/Settings'
 import {ProfileScreen} from './view/screens/Profile'
 import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
@@ -87,7 +88,7 @@ const ROUTES: Record<string, Route> = {
 }
 
 export function matchPath(path: string): {name: string; params: RouteParams} {
-  let name = 'Home' // TODO should be not found
+  let name = 'NotFound'
   let params: RouteParams = {}
   for (const [screenName, matcher] of Object.entries(ROUTES)) {
     const res = matcher.match(path)
@@ -146,6 +147,7 @@ function buildStateObject(stack: string, route: string, params: RouteParams) {
 function commonScreens(Stack: typeof HomeTab) {
   return (
     <>
+      <Stack.Screen name="NotFound" component={NotFoundScreen} />
       <Stack.Screen name="Settings" component={SettingsScreen} />
       <Stack.Screen name="Profile" component={ProfileScreen} />
       <Stack.Screen

src/view/screens/NotFound.tsx

@@ -1,25 +1,40 @@
 import React from 'react'
-import {Button, StyleSheet, View} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
+import {StyleSheet, View} from 'react-native'
+import {useNavigation, StackActions} from '@react-navigation/native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Text} from '../com/util/text/Text'
+import {Button} from 'view/com/util/forms/Button'
 import {NavigationProp} from 'lib/routes/types'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
 
-export const NotFound = () => {
+export const NotFoundScreen = () => {
+  const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
 
+  const canGoBack = navigation.canGoBack()
   const onPressHome = React.useCallback(() => {
-    navigation.navigate('HomeTab') // TODO go fully home
-  }, [navigation])
+    if (canGoBack) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('HomeTab')
+      navigation.dispatch(StackActions.popToTop())
+    }
+  }, [navigation, canGoBack])
 
   return (
-    <View testID="notFoundView">
+    <View testID="notFoundView" style={pal.view}>
       <ViewHeader title="Page not found" />
       <View style={styles.container}>
-        <Text style={styles.title}>Page not found</Text>
+        <Text type="title-2xl" style={[pal.text, s.mb10]}>
+          Page not found
+        </Text>
+        <Text type="md" style={[pal.text, s.mb10]}>
+          We're sorry! We can't find the page you were looking for.
+        </Text>
         <Button
-          testID="navigateHomeButton"
-          title="Home"
+          type="primary"
+          label={canGoBack ? 'Go back' : 'Go home'}
           onPress={onPressHome}
         />
       </View>
@@ -29,12 +44,9 @@ export const NotFound = () => {
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
-    alignItems: 'center',
     paddingTop: 100,
-  },
-  title: {
-    fontSize: 40,
-    fontWeight: 'bold',
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    height: '100%',
   },
 })