Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 7x 9x 9x 9x 4x 1x 3x 2x 9x 9x | import { useContext } from 'react';
import { FallbackComponentProps } from 'react-native-error-boundary';
import { Text, View } from 'react-native';
import { NavigationContext } from '@react-navigation/native';
import { Button } from '@repo/ui/components/Button';
import { makeStyles } from '@repo/ui/themes/makeStyles';
export const FallbackError = ({ resetError }: FallbackComponentProps) => {
const styles = useStyles();
const navigation = useContext(NavigationContext);
const handleGoBack = () => {
if (navigation && typeof navigation.goBack === 'function') {
navigation.goBack();
} else if (resetError) {
// If there's no navigation context (e.g. root-level error), fall back to resetting
resetError();
}
};
return (
<View style={styles.container}>
<Text
style={styles.title}
accessible={true}
accessibilityRole="header"
accessibilityLabel="Something happened"
>
Something happened!
</Text>
<View style={styles.buttonGroup}>
<Button
onPress={handleGoBack}
style={styles.button}
accessible={true}
accessibilityRole="button"
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen or retries"
>
Go Back
</Button>
{resetError && (
<Button
onPress={resetError}
style={styles.button}
accessible={true}
accessibilityRole="button"
accessibilityLabel="Try again"
accessibilityHint="Attempts to reload the previous action"
>
Try Again
</Button>
)}
</View>
</View>
);
};
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
gap: theme.metrics.spacing[6],
},
title: {
fontSize: theme.metrics.textSize[24],
fontWeight: theme.metrics.fontWeight.bold,
},
buttonGroup: {
flexDirection: 'row',
gap: theme.metrics.spacing[4],
},
button: {
width: theme.metrics.spacing[25],
},
}));
|