forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import React from 'react'
2import {StyleSheet, View} from 'react-native'
3import {msg, Trans} from '@lingui/macro'
4import {useLingui} from '@lingui/react'
5import {
6 StackActions,
7 useFocusEffect,
8 useNavigation,
9} from '@react-navigation/native'
10
11import {usePalette} from '#/lib/hooks/usePalette'
12import {type NavigationProp} from '#/lib/routes/types'
13import {s} from '#/lib/styles'
14import {useSetMinimalShellMode} from '#/state/shell'
15import {Button} from '#/view/com/util/forms/Button'
16import {Text} from '#/view/com/util/text/Text'
17import {ViewHeader} from '#/view/com/util/ViewHeader'
18import * as Layout from '#/components/Layout'
19
20export const NotFoundScreen = () => {
21 const pal = usePalette('default')
22 const {_} = useLingui()
23 const navigation = useNavigation<NavigationProp>()
24 const setMinimalShellMode = useSetMinimalShellMode()
25
26 useFocusEffect(
27 React.useCallback(() => {
28 setMinimalShellMode(false)
29 }, [setMinimalShellMode]),
30 )
31
32 const canGoBack = navigation.canGoBack()
33 const onPressHome = React.useCallback(() => {
34 if (canGoBack) {
35 navigation.goBack()
36 } else {
37 navigation.navigate('HomeTab')
38 navigation.dispatch(StackActions.popToTop())
39 }
40 }, [navigation, canGoBack])
41
42 return (
43 <Layout.Screen testID="notFoundView">
44 <ViewHeader title={_(msg`Page Not Found`)} />
45 <View style={styles.container}>
46 <Text type="title-2xl" style={[pal.text, s.mb10]}>
47 <Trans>Page not found</Trans>
48 </Text>
49 <Text type="md" style={[pal.text, s.mb10]}>
50 <Trans>
51 We're sorry! We can't find the page you were looking for.
52 </Trans>
53 </Text>
54 <Button
55 type="primary"
56 label={canGoBack ? _(msg`Go Back`) : _(msg`Go Home`)}
57 accessibilityLabel={canGoBack ? _(msg`Go back`) : _(msg`Go home`)}
58 accessibilityHint={
59 canGoBack
60 ? _(msg`Returns to previous page`)
61 : _(msg`Returns to home page`)
62 }
63 onPress={onPressHome}
64 />
65 </View>
66 </Layout.Screen>
67 )
68}
69
70const styles = StyleSheet.create({
71 container: {
72 paddingTop: 100,
73 paddingHorizontal: 20,
74 alignItems: 'center',
75 height: '100%',
76 },
77})