From c70ac249667f8ccb29b22a7db64c6958d4e70580 Mon Sep 17 00:00:00 2001
From: Valentin Shergin <shergin@fb.com>
Date: Mon, 25 Sep 2017 23:28:46 -0700
Subject: [PATCH] Using SafeAreaView in YellowBox (2nd attempt)

Summary: Now it does not clipped on iPhone X.

Reviewed By: yungsters

Differential Revision: D5907527

fbshipit-source-id: 10d05e4ac5d16a9e257efa78795bff9f14f4c0bb
---
 Libraries/ReactNative/YellowBox.js | 86 ++++++++++++++++--------------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/Libraries/ReactNative/YellowBox.js b/Libraries/ReactNative/YellowBox.js
index dae362d69..365d7f715 100644
--- a/Libraries/ReactNative/YellowBox.js
+++ b/Libraries/ReactNative/YellowBox.js
@@ -16,6 +16,7 @@
 const EventEmitter = require('EventEmitter');
 const Platform = require('Platform');
 const React = require('React');
+const SafeAreaView = require('SafeAreaView');
 const StyleSheet = require('StyleSheet');
 const RCTLog = require('RCTLog');
 
@@ -264,47 +265,49 @@ const WarningInspector = ({
 
   return (
     <View style={styles.inspector}>
-      <View style={styles.inspectorCount}>
-        <Text style={styles.inspectorCountText}>
-          {countSentence}
-        </Text>
-        <TouchableHighlight
-          onPress={toggleStacktrace}
-          underlayColor="transparent">
-          <Text style={styles.inspectorButtonText}>
-            {stacktraceVisible ? '\u{25BC}' : '\u{25B6}'} Stacktrace
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.inspectorCount}>
+          <Text style={styles.inspectorCountText}>
+            {countSentence}
           </Text>
-        </TouchableHighlight>
-      </View>
-      <ScrollView style={styles.inspectorWarning}>
-        {stacktraceList}
-        <Text style={styles.inspectorWarningText}>
-          {warning}
-        </Text>
-      </ScrollView>
-      <View style={styles.inspectorButtons}>
-        <TouchableHighlight
-          activeOpacity={0.5}
-          onPress={onMinimize}
-          style={styles.inspectorButton}
-          underlayColor="transparent">
-          <Text style={styles.inspectorButtonText}>Minimize</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
-          activeOpacity={0.5}
-          onPress={onDismiss}
-          style={styles.inspectorButton}
-          underlayColor="transparent">
-          <Text style={styles.inspectorButtonText}>Dismiss</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
-          activeOpacity={0.5}
-          onPress={onDismissAll}
-          style={styles.inspectorButton}
-          underlayColor="transparent">
-          <Text style={styles.inspectorButtonText}>Dismiss All</Text>
-        </TouchableHighlight>
-      </View>
+          <TouchableHighlight
+            onPress={toggleStacktrace}
+            underlayColor="transparent">
+            <Text style={styles.inspectorButtonText}>
+              {stacktraceVisible ? '\u{25BC}' : '\u{25B6}'} Stacktrace
+            </Text>
+          </TouchableHighlight>
+        </View>
+        <ScrollView style={styles.inspectorWarning}>
+          {stacktraceList}
+          <Text style={styles.inspectorWarningText}>
+            {warning}
+          </Text>
+        </ScrollView>
+        <View style={styles.inspectorButtons}>
+          <TouchableHighlight
+            activeOpacity={0.5}
+            onPress={onMinimize}
+            style={styles.inspectorButton}
+            underlayColor="transparent">
+            <Text style={styles.inspectorButtonText}>Minimize</Text>
+          </TouchableHighlight>
+          <TouchableHighlight
+            activeOpacity={0.5}
+            onPress={onDismiss}
+            style={styles.inspectorButton}
+            underlayColor="transparent">
+            <Text style={styles.inspectorButtonText}>Dismiss</Text>
+          </TouchableHighlight>
+          <TouchableHighlight
+            activeOpacity={0.5}
+            onPress={onDismissAll}
+            style={styles.inspectorButton}
+            underlayColor="transparent">
+            <Text style={styles.inspectorButtonText}>Dismiss All</Text>
+          </TouchableHighlight>
+        </View>
+      </SafeAreaView>
     </View>
   );
 };
@@ -464,6 +467,9 @@ var styles = StyleSheet.create({
     paddingVertical: 22,
     backgroundColor: backgroundColor(1),
   },
+  safeArea: {
+    flex: 1,
+  },
   stacktraceList: {
     paddingBottom: 5,
   },