From afad68f1a83995eaa42a8f1c7c636ccef8914797 Mon Sep 17 00:00:00 2001
From: Ray <raykle.up@gmail.com>
Date: Wed, 31 Aug 2022 11:44:02 -0700
Subject: [PATCH] Change Wrapper of InspectorPanel from View to SafeAreaView
 (#34500)

Summary:
Currently, the `InspectorPanel` component is wrapped in `View`, which is a little difficult to click the panel button when in a device with a notch screen.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[General] [Fixed] - Change Wrapper of `InspectorPanel` from `View` to `SafeAreaView`

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

Test Plan:
**From:**

<img alt="" height="500" src="https://user-images.githubusercontent.com/3097366/186088404-32cb2707-a4f1-45d6-9f83-f0992d5ba64d.png"> <img alt="" height="500" src="https://user-images.githubusercontent.com/3097366/186088438-863fd7da-b827-4cc1-b873-f0bf38764e83.png">

**To:**

<img alt="" height="500" src="https://user-images.githubusercontent.com/3097366/186088518-6e131a8e-27ae-4eed-b97d-ee6f6ab5e669.png"> <img alt="" height="500" src="https://user-images.githubusercontent.com/3097366/186088550-35ce0512-ac4f-4ef1-b5db-f2a3ec434b24.png"> <img alt="" height="500" src="https://user-images.githubusercontent.com/3097366/186088579-ff42ee60-6b1c-4179-aae8-764f4d04e680.png">

Reviewed By: cipolleschi

Differential Revision: D39175153

Pulled By: lunaleaps

fbshipit-source-id: cba8b78a0dd3cbac27ee098dd1bb006d7af25987
---
 Libraries/Inspector/InspectorPanel.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Libraries/Inspector/InspectorPanel.js b/Libraries/Inspector/InspectorPanel.js
index cce08cd849dd1b..8b113f33b9da84 100644
--- a/Libraries/Inspector/InspectorPanel.js
+++ b/Libraries/Inspector/InspectorPanel.js
@@ -19,6 +19,7 @@ const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const View = require('../Components/View/View');
+import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
 
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 
@@ -84,7 +85,7 @@ class InspectorPanel extends React.Component<Props> {
       contents = <View style={styles.waiting}>{this.renderWaiting()}</View>;
     }
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         {!this.props.devtoolsIsOpen && contents}
         <View style={styles.buttonRow}>
           <InspectorPanelButton
@@ -108,7 +109,7 @@ class InspectorPanel extends React.Component<Props> {
             onClick={this.props.setTouchTargeting}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }