From 5e3f9b72361159da57c072cafed44424184d57f5 Mon Sep 17 00:00:00 2001
From: pylixonly <82711525+pylixonly@users.noreply.github.com>
Date: Sat, 9 Nov 2024 17:03:06 +0800
Subject: [PATCH] fix: wrap ErrorBoundaryScreen with SafeAreaProvider

---
 .../components/ErrorBoundaryScreen.tsx        | 38 ++++++++++---------
 src/metro/common/components.ts                |  2 +-
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx b/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
index 124d665..7ff7c18 100644
--- a/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
+++ b/src/core/ui/reporter/components/ErrorBoundaryScreen.tsx
@@ -5,7 +5,7 @@ import { settings } from "@lib/api/settings";
 import { Codeblock, ErrorBoundary } from "@lib/ui/components";
 import { createStyles } from "@lib/ui/styles";
 import { tokens } from "@metro/common";
-import { Button, Card, SafeAreaView, Text } from "@metro/common/components";
+import { Button, Card, SafeAreaProvider, SafeAreaView, Text } from "@metro/common/components";
 import { ScrollView, View } from "react-native";
 
 import ErrorComponentStackCard from "./ErrorComponentStackCard";
@@ -31,22 +31,24 @@ export default function ErrorBoundaryScreen(props: {
     const debugInfo = getDebugInfo();
 
     return <ErrorBoundary>
-        <SafeAreaView style={styles.container}>
-            <View style={{ gap: 4 }}>
-                <Text variant="display-lg">Uh oh.</Text>
-                <Text variant="text-md/normal">A crash occurred while rendering a component. This could be caused by a plugin, Bunny or Discord itself.</Text>
-                <Text variant="text-sm/normal" color="text-muted">{debugInfo.os.name}; {debugInfo.discord.build} ({debugInfo.discord.version}); {debugInfo.bunny.version}</Text>
-            </View>
-            <ScrollView fadingEdgeLength={64} contentContainerStyle={{ gap: 12 }}>
-                <Codeblock selectable={true}>{props.error.message}</Codeblock>
-                {hasStack(props.error) && <ErrorStackCard error={props.error} />}
-                {isComponentStack(props.error) ? <ErrorComponentStackCard componentStack={props.error.componentStack} /> : null}
-            </ScrollView>
-            <Card style={{ gap: 6 }}>
-                <Button text="Reload Discord" onPress={() => BundleUpdaterManager.reload()} />
-                {!settings.safeMode?.enabled && <Button text="Reload in Safe Mode" onPress={() => toggleSafeMode()} />}
-                <Button variant="destructive" text="Retry Render" onPress={() => props.rerender()} />
-            </Card>
-        </SafeAreaView>
+        <SafeAreaProvider> {/* for iOS */}
+            <SafeAreaView style={styles.container}>
+                <View style={{ gap: 4 }}>
+                    <Text variant="display-lg">Uh oh.</Text>
+                    <Text variant="text-md/normal">A crash occurred while rendering a component. This could be caused by a plugin, Bunny or Discord itself.</Text>
+                    <Text variant="text-sm/normal" color="text-muted">{debugInfo.os.name}; {debugInfo.discord.build} ({debugInfo.discord.version}); {debugInfo.bunny.version}</Text>
+                </View>
+                <ScrollView fadingEdgeLength={64} contentContainerStyle={{ gap: 12 }}>
+                    <Codeblock selectable={true}>{props.error.message}</Codeblock>
+                    {hasStack(props.error) && <ErrorStackCard error={props.error} />}
+                    {isComponentStack(props.error) ? <ErrorComponentStackCard componentStack={props.error.componentStack} /> : null}
+                </ScrollView>
+                <Card style={{ gap: 6 }}>
+                    <Button text="Reload Discord" onPress={() => BundleUpdaterManager.reload()} />
+                    {!settings.safeMode?.enabled && <Button text="Reload in Safe Mode" onPress={() => toggleSafeMode()} />}
+                    <Button variant="destructive" text="Retry Render" onPress={() => props.rerender()} />
+                </Card>
+            </SafeAreaView>
+        </SafeAreaProvider>
     </ErrorBoundary>;
 }
diff --git a/src/metro/common/components.ts b/src/metro/common/components.ts
index 49e69c6..48c8d3e 100644
--- a/src/metro/common/components.ts
+++ b/src/metro/common/components.ts
@@ -20,7 +20,7 @@ export const CompatButton = findByPropsLazy("Looks", "Colors", "Sizes");
 export const HelpMessage = findByNameLazy("HelpMessage");
 
 // React Native's included SafeAreaView only adds padding on iOS.
-export const SafeAreaView = proxyLazy(() => findByProps("useSafeAreaInsets").SafeAreaView);
+export const { SafeAreaView, SafeAreaProvider } = lazyDestructure(() => findByProps("useSafeAreaInsets"));
 
 // ActionSheet
 export const ActionSheetRow = findProp("ActionSheetRow");