From 6d6b1fdc75d870fa73abc6ee9bf0099f3f15e658 Mon Sep 17 00:00:00 2001
From: Philip Heinser <philipheinser@me.com>
Date: Wed, 17 May 2023 02:48:29 -0700
Subject: [PATCH] logbox footer buttons fix safearea (#36427)

Summary:
The logbox buttons on iOS are not easy to reach since they draw in the safe area. This pr should fix that.

## Changelog

[IOS] [FIXED] - logbox footer buttons respect safe area

Pull Request resolved: https://github.com/facebook/react-native/pull/36427

Test Plan:
| after  | before  |
|---|---|
| ![IMG_3296](https://user-images.githubusercontent.com/3705499/224150030-b2637977-9fbc-4a5e-9efb-86a42a62b31a.PNG) | ![IMG_9BF70BD03E1B-1](https://user-images.githubusercontent.com/3705499/224150681-dc84295b-134a-4840-9773-23c601b24e01.jpeg)

Reviewed By: NickGerleman

Differential Revision: D43957242

Pulled By: javache

fbshipit-source-id: 9d26bc52b45c110f7bc3b0d6c1da1ed2d31a154c
---
 .../LogBox/UI/LogBoxInspectorFooter.js        | 55 ++++++++-----------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js
index b67f99d5e07..44d344f0334 100644
--- a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js
+++ b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js
@@ -10,10 +10,10 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import DeviceInfo from '../../Utilities/DeviceInfo';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
@@ -52,39 +52,21 @@ type ButtonProps = $ReadOnly<{|
 
 function FooterButton(props: ButtonProps): React.Node {
   return (
-    <LogBoxButton
-      backgroundColor={{
-        default: 'transparent',
-        pressed: LogBoxStyle.getBackgroundDarkColor(),
-      }}
-      onPress={props.onPress}
-      style={buttonStyles.safeArea}>
-      <View style={buttonStyles.content}>
-        <Text style={buttonStyles.label}>{props.text}</Text>
-      </View>
-    </LogBoxButton>
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
   );
 }
 
-const buttonStyles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    // $FlowFixMe[sketchy-null-bool]
-    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
-  },
-  content: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  label: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
-});
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -97,6 +79,17 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',