diff --git a/App.js b/App.js
index 6100bbcf..ba8a8518 100644
--- a/App.js
+++ b/App.js
@@ -15,6 +15,7 @@ import Main from './src/navigators/Main';
import { createDatabase } from './src/database/db';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import LottieSplashScreen from 'react-native-lottie-splash-screen';
+import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
const App = () => {
useEffect(() => {
@@ -23,16 +24,18 @@ const App = () => {
}, []);
return (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/package-lock.json b/package-lock.json
index 6a77a5e5..0e96951d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
"react-native-background-actions": "^2.6.5",
"react-native-device-info": "^8.4.7",
"react-native-easing-gradient": "^1.0.0",
+ "react-native-error-boundary": "^1.1.16",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "~1.10.2",
"react-native-lottie-splash-screen": "^1.0.1",
@@ -12765,6 +12766,15 @@
"react-native": "*"
}
},
+ "node_modules/react-native-error-boundary": {
+ "version": "1.1.16",
+ "resolved": "https://registry.npmjs.org/react-native-error-boundary/-/react-native-error-boundary-1.1.16.tgz",
+ "integrity": "sha512-yCbKhjGo2kMJBoUdy503L3oaInrLo1gychGr5e/IrezfPhfUGhfr8EtG2EKgZDcSfmvodBXvARq942hWis5sUA==",
+ "peerDependencies": {
+ "react": ">=16.6.0",
+ "react-native": ">=0.57.7"
+ }
+ },
"node_modules/react-native-fast-image": {
"version": "8.5.11",
"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",
@@ -26017,6 +26027,11 @@
"resolved": "https://registry.npmjs.org/react-native-easing-gradient/-/react-native-easing-gradient-1.0.0.tgz",
"integrity": "sha512-wkFPbjDLvySHKzqkCYxD8vTgKLdlgch9AL8wkO+liJuukwVXeD2sDqtPPsMKqX6hWK+Ebg8shjIeavNfoOLy7w=="
},
+ "react-native-error-boundary": {
+ "version": "1.1.16",
+ "resolved": "https://registry.npmjs.org/react-native-error-boundary/-/react-native-error-boundary-1.1.16.tgz",
+ "integrity": "sha512-yCbKhjGo2kMJBoUdy503L3oaInrLo1gychGr5e/IrezfPhfUGhfr8EtG2EKgZDcSfmvodBXvARq942hWis5sUA=="
+ },
"react-native-fast-image": {
"version": "8.5.11",
"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",
diff --git a/package.json b/package.json
index 4ebae328..03a42cd0 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"react-native-background-actions": "^2.6.5",
"react-native-device-info": "^8.4.7",
"react-native-easing-gradient": "^1.0.0",
+ "react-native-error-boundary": "^1.1.16",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "~1.10.2",
"react-native-lottie-splash-screen": "^1.0.1",
diff --git a/src/components/AppErrorBoundary/AppErrorBoundary.tsx b/src/components/AppErrorBoundary/AppErrorBoundary.tsx
new file mode 100644
index 00000000..0da1a1a4
--- /dev/null
+++ b/src/components/AppErrorBoundary/AppErrorBoundary.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { StyleSheet, View, Text, StatusBar } from 'react-native';
+import ErrorBoundary from 'react-native-error-boundary';
+
+import { Button, List } from '@components';
+import { useTheme } from '@hooks';
+import { ButtonVariation } from '@components/Button/Button';
+
+interface ErrorFallbackProps {
+ error: Error;
+ resetError: () => void;
+}
+
+export const ErrorFallback: React.FC = ({
+ error,
+ resetError,
+}) => {
+ const theme = useTheme();
+
+ return (
+
+
+
+
+ An Unexpected Error Ocurred
+
+
+ The application ran into an unexpected error. We suggest you
+ screenshot this message and then share it in our support channel on
+ Discord.
+
+
+ {`${error.message}\n\n${error.stack}`}
+
+
+
+
+
+ );
+};
+
+interface AppErrorBoundaryProps {
+ children: React.ReactNode | React.ReactElement;
+}
+
+const AppErrorBoundary: React.FC = ({ children }) => {
+ return (
+ {children}
+ );
+};
+
+export default AppErrorBoundary;
+
+const styles = StyleSheet.create({
+ mainCtn: {
+ flex: 1,
+ },
+ errorInfoCtn: {
+ flex: 1,
+ justifyContent: 'center',
+ padding: 16,
+ },
+ buttonCtn: {
+ margin: 16,
+ marginBottom: 32,
+ },
+ errorTitle: {
+ marginBottom: 8,
+ textAlign: 'center',
+ fontSize: 20,
+ },
+ errorDesc: {
+ lineHeight: 20,
+ marginVertical: 8,
+ },
+ errorCtn: {
+ borderRadius: 8,
+ lineHeight: 20,
+ marginVertical: 16,
+ paddingVertical: 16,
+ paddingHorizontal: 8,
+ },
+});