LogBox - Use Modal for full screen inspector

Summary:
This diff switches LogBox over to use a Modal component so that the log inspector is always full screen.

In order to do that, it needed to add an `internal_excludeLogBox` flag to AppContainer so that it's not recursively rendered  as: AppContainer -> LogBox -> Modal -> AppContainer. Not thrilled about the prop but it's necessary for now until this is rendered as it's own root (which we're working on next).

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D18461394

fbshipit-source-id: e1a80dfffbbe6c5467ac6f8d3c445a3280829020

Libraries/LogBox/UI/LogBoxContainer.js

@@ -108,14 +108,13 @@ function LogBoxContainer(props: Props): React.Node {
           />
         </View>
       )}
-      <SafeAreaView style={styles.safeArea} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   list: {
-    bottom: 10,
+    bottom: 20,
     left: 10,
     right: 10,
     position: 'absolute',
@@ -125,9 +124,6 @@ const styles = StyleSheet.create({
     marginBottom: 5,
     overflow: 'hidden',
   },
-  safeArea: {
-    flex: 1,
-  },
 });
 
 export default LogBoxContainer;

Libraries/LogBox/UI/LogBoxInspector.js

@@ -11,11 +11,10 @@
 'use strict';
 
 import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
-import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 import ScrollView from '../../Components/ScrollView/ScrollView';
 import StyleSheet from '../../StyleSheet/StyleSheet';
-import View from '../../Components/View/View';
+import Modal from '../../Modal/Modal';
 import * as LogBoxData from '../Data/LogBoxData';
 import Keyboard from '../../Components/Keyboard/Keyboard';
 import LogBoxInspectorFooter from './LogBoxInspectorFooter';
@@ -69,7 +68,12 @@ function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <Modal
+      animationType="none"
+      visible
+      statusBarTranslucent
+      supportedOrientations={['portrait']}
+      presentationStyle="overFullScreen">
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}
@@ -82,7 +86,7 @@ function LogBoxInspector(props: Props): React.Node {
         onMinimize={props.onMinimize}
         level={log.level}
       />
-    </View>
+    </Modal>
   );
 }
 
@@ -139,11 +143,6 @@ function LogBoxInspectorBody(props) {
 }
 
 const styles = StyleSheet.create({
-  root: {
-    backgroundColor: LogBoxStyle.getTextColor(1),
-    elevation: Platform.OS === 'android' ? Number.MAX_SAFE_INTEGER : undefined,
-    height: '100%',
-  },
   scrollBody: {
     backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
     flex: 1,

Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -13,7 +13,7 @@
 import type {LogLevel} from '../Data/LogBoxLog';
 
 import * as React from 'react';
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import DeviceInfo from '../../Utilities/DeviceInfo';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../../Components/View/View';
@@ -30,9 +30,11 @@ function LogBoxInspectorFooter(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={styles.root}>
-        <Text style={styles.syntaxErrorText}>
-          This error cannot be dismissed.
-        </Text>
+        <View style={styles.button}>
+          <Text style={styles.syntaxErrorText}>
+            This error cannot be dismissed.
+          </Text>
+        </View>
       </View>
     );
   }
@@ -58,18 +60,18 @@ function FooterButton(props: ButtonProps): React.Node {
         pressed: LogBoxStyle.getBackgroundDarkColor(),
       }}
       onPress={props.onPress}
-      style={buttonStyles.button}>
+      style={buttonStyles.safeArea}>
       <View style={buttonStyles.content}>
         <Text style={buttonStyles.label}>{props.text}</Text>
       </View>
-      <SafeAreaView />
     </LogBoxButton>
   );
 }
 
 const buttonStyles = StyleSheet.create({
-  button: {
+  safeArea: {
     flex: 1,
+    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
   },
   content: {
     alignItems: 'center',
@@ -91,9 +93,11 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 0, height: -2},
     shadowRadius: 2,
     shadowOpacity: 0.5,
-    elevation: 1,
     flexDirection: 'row',
   },
+  button: {
+    flex: 1,
+  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',

Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -13,10 +13,10 @@
 import Image from '../../Image/Image';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import View from '../../Components/View/View';
+import StatusBar from '../../Components/StatusBar/StatusBar';
 import LogBoxImageSource from './LogBoxImageSource';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
@@ -31,13 +31,13 @@ type Props = $ReadOnly<{|
 function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
-      <SafeAreaView style={styles[props.level]}>
+      <View style={[styles.safeArea, styles[props.level]]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </SafeAreaView>
+      </View>
     );
   }
 
@@ -49,7 +49,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <SafeAreaView style={styles[props.level]}>
+    <View style={[styles.safeArea, styles[props.level]]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
@@ -67,26 +67,26 @@ function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </SafeAreaView>
+    </View>
   );
 }
 
 const backgroundForLevel = (level: LogLevel) =>
   ({
     warn: {
-      default: LogBoxStyle.getWarningColor(),
+      default: 'transparent',
       pressed: LogBoxStyle.getWarningDarkColor(),
     },
     error: {
-      default: LogBoxStyle.getErrorColor(),
+      default: 'transparent',
       pressed: LogBoxStyle.getErrorDarkColor(),
     },
     fatal: {
-      default: LogBoxStyle.getFatalColor(),
+      default: 'transparent',
       pressed: LogBoxStyle.getFatalDarkColor(),
     },
     syntax: {
-      default: LogBoxStyle.getFatalColor(),
+      default: 'transparent',
       pressed: LogBoxStyle.getFatalDarkColor(),
     },
   }[level]);
@@ -126,7 +126,7 @@ const headerStyles = StyleSheet.create({
     borderRadius: 3,
   },
   buttonImage: {
-    tintColor: LogBoxStyle.getTextColor(1),
+    tintColor: LogBoxStyle.getBackgroundColor(1),
   },
 });
 
@@ -156,12 +156,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   titleText: {
-    color: LogBoxStyle.getTextColor(1),
+    color: LogBoxStyle.getBackgroundColor(1),
     fontSize: 16,
     fontWeight: '600',
     includeFontPadding: false,
     lineHeight: 20,
   },
+  safeArea: {
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
+  },
 });
 
 export default LogBoxInspectorHeader;

Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -70,7 +70,6 @@ const messageStyles = StyleSheet.create({
     shadowOffset: {width: 0, height: 2},
     shadowRadius: 2,
     shadowOpacity: 0.5,
-    elevation: 2,
     flex: 0,
   },
   bodyText: {

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap

@@ -4,7 +4,7 @@ exports[`LogBoxContainer should render both an error and warning notification 1`
 <View
   style={
     Object {
-      "bottom": 10,
+      "bottom": 20,
       "left": 10,
       "position": "absolute",
       "right": 10,
@@ -83,13 +83,6 @@ exports[`LogBoxContainer should render both an error and warning notification 1`
       totalLogCount={1}
     />
   </View>
-  <ForwardRef(SafeAreaView)
-    style={
-      Object {
-        "flex": 1,
-      }
-    }
-  />
 </View>
 `;
 
@@ -198,7 +191,7 @@ exports[`LogBoxContainer should render the latest error notification 1`] = `
 <View
   style={
     Object {
-      "bottom": 10,
+      "bottom": 20,
       "left": 10,
       "position": "absolute",
       "right": 10,
@@ -241,13 +234,6 @@ exports[`LogBoxContainer should render the latest error notification 1`] = `
       totalLogCount={2}
     />
   </View>
-  <ForwardRef(SafeAreaView)
-    style={
-      Object {
-        "flex": 1,
-      }
-    }
-  />
 </View>
 `;
 
@@ -255,7 +241,7 @@ exports[`LogBoxContainer should render the latest warning notification 1`] = `
 <View
   style={
     Object {
-      "bottom": 10,
+      "bottom": 20,
       "left": 10,
       "position": "absolute",
       "right": 10,
@@ -298,12 +284,5 @@ exports[`LogBoxContainer should render the latest warning notification 1`] = `
       totalLogCount={2}
     />
   </View>
-  <ForwardRef(SafeAreaView)
-    style={
-      Object {
-        "flex": 1,
-      }
-    }
-  />
 </View>
 `;

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap

@@ -1,14 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
-<View
-  style={
-    Object {
-      "backgroundColor": "rgba(255, 255, 255, 1)",
-      "elevation": undefined,
-      "height": "100%",
-    }
+<Component
+  animationType="none"
+  hardwareAccelerated={false}
+  presentationStyle="overFullScreen"
+  statusBarTranslucent={true}
+  supportedOrientations={
+    Array [
+      "portrait",
+    ]
   }
+  visible={true}
 >
   <LogBoxInspectorHeader
     level="fatal"
@@ -44,20 +47,23 @@ exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
     onDismiss={[Function]}
     onMinimize={[Function]}
   />
-</View>
+</Component>
 `;
 
 exports[`LogBoxContainer should render null with no logs 1`] = `null`;
 
 exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
-<View
-  style={
-    Object {
-      "backgroundColor": "rgba(255, 255, 255, 1)",
-      "elevation": undefined,
-      "height": "100%",
-    }
+<Component
+  animationType="none"
+  hardwareAccelerated={false}
+  presentationStyle="overFullScreen"
+  statusBarTranslucent={true}
+  supportedOrientations={
+    Array [
+      "portrait",
+    ]
   }
+  visible={true}
 >
   <LogBoxInspectorHeader
     level="warn"
@@ -93,5 +99,5 @@ exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
     onDismiss={[Function]}
     onMinimize={[Function]}
   />
-</View>
+</Component>
 `;

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap

@@ -5,7 +5,6 @@ exports[`LogBoxInspectorFooter should render no buttons and a message for syntax
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
       "flexDirection": "row",
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -17,21 +16,29 @@ exports[`LogBoxInspectorFooter should render no buttons and a message for syntax
     }
   }
 >
-  <Text
+  <View
     style={
       Object {
-        "color": "rgba(255, 255, 255, 0.6)",
-        "fontSize": 14,
-        "fontStyle": "italic",
-        "paddingBottom": 15,
-        "paddingTop": 15,
-        "textAlign": "center",
-        "width": "100%",
+        "flex": 1,
       }
     }
   >
-    This error cannot be dismissed.
-  </Text>
+    <Text
+      style={
+        Object {
+          "color": "rgba(255, 255, 255, 0.6)",
+          "fontSize": 14,
+          "fontStyle": "italic",
+          "paddingBottom": 15,
+          "paddingTop": 15,
+          "textAlign": "center",
+          "width": "100%",
+        }
+      }
+    >
+      This error cannot be dismissed.
+    </Text>
+  </View>
 </View>
 `;
 
@@ -40,7 +47,6 @@ exports[`LogBoxInspectorFooter should render two buttons for error 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
       "flexDirection": "row",
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -68,7 +74,6 @@ exports[`LogBoxInspectorFooter should render two buttons for fatal 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
       "flexDirection": "row",
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -96,7 +101,6 @@ exports[`LogBoxInspectorFooter should render two buttons for warning 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
       "flexDirection": "row",
       "shadowColor": "#000",
       "shadowOffset": Object {

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap

@@ -1,11 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
-<ForwardRef(SafeAreaView)
+<View
   style={
-    Object {
-      "backgroundColor": "rgba(250, 186, 48, 1)",
-    }
+    Array [
+      Object {
+        "paddingTop": 40,
+      },
+      Object {
+        "backgroundColor": "rgba(250, 186, 48, 1)",
+      },
+    ]
   }
 >
   <View
@@ -34,7 +39,7 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
       <Text
         style={
           Object {
-            "color": "rgba(255, 255, 255, 1)",
+            "color": "rgba(51, 51, 51, 1)",
             "fontSize": 16,
             "fontWeight": "600",
             "includeFontPadding": false,
@@ -52,15 +57,20 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
       onPress={[Function]}
     />
   </View>
-</ForwardRef(SafeAreaView)>
+</View>
 `;
 
 exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
-<ForwardRef(SafeAreaView)
+<View
   style={
-    Object {
-      "backgroundColor": "rgba(250, 186, 48, 1)",
-    }
+    Array [
+      Object {
+        "paddingTop": 40,
+      },
+      Object {
+        "backgroundColor": "rgba(250, 186, 48, 1)",
+      },
+    ]
   }
 >
   <View
@@ -89,7 +99,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
       <Text
         style={
           Object {
-            "color": "rgba(255, 255, 255, 1)",
+            "color": "rgba(51, 51, 51, 1)",
             "fontSize": 16,
             "fontWeight": "600",
             "includeFontPadding": false,
@@ -107,15 +117,20 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
       onPress={[Function]}
     />
   </View>
-</ForwardRef(SafeAreaView)>
+</View>
 `;
 
 exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
-<ForwardRef(SafeAreaView)
+<View
   style={
-    Object {
-      "backgroundColor": "rgba(243, 83, 105, 1)",
-    }
+    Array [
+      Object {
+        "paddingTop": 40,
+      },
+      Object {
+        "backgroundColor": "rgba(243, 83, 105, 1)",
+      },
+    ]
   }
 >
   <View
@@ -138,7 +153,7 @@ exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
       <Text
         style={
           Object {
-            "color": "rgba(255, 255, 255, 1)",
+            "color": "rgba(51, 51, 51, 1)",
             "fontSize": 16,
             "fontWeight": "600",
             "includeFontPadding": false,
@@ -150,15 +165,20 @@ exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
       </Text>
     </View>
   </View>
-</ForwardRef(SafeAreaView)>
+</View>
 `;
 
 exports[`LogBoxInspectorHeader should render two buttons for three or more total 1`] = `
-<ForwardRef(SafeAreaView)
+<View
   style={
-    Object {
-      "backgroundColor": "rgba(250, 186, 48, 1)",
-    }
+    Array [
+      Object {
+        "paddingTop": 40,
+      },
+      Object {
+        "backgroundColor": "rgba(250, 186, 48, 1)",
+      },
+    ]
   }
 >
   <View
@@ -187,7 +207,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
       <Text
         style={
           Object {
-            "color": "rgba(255, 255, 255, 1)",
+            "color": "rgba(51, 51, 51, 1)",
             "fontSize": 16,
             "fontWeight": "600",
             "includeFontPadding": false,
@@ -205,5 +225,5 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
       onPress={[Function]}
     />
   </View>
-</ForwardRef(SafeAreaView)>
+</View>
 `;

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap

@@ -5,7 +5,6 @@ exports[`LogBoxInspectorMessageHeader should not render "See More" if expanded 1
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -83,7 +82,6 @@ exports[`LogBoxInspectorMessageHeader should not render See More button for shor
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -161,7 +159,6 @@ exports[`LogBoxInspectorMessageHeader should render "See More" if collapsed 1`]
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -252,7 +249,6 @@ exports[`LogBoxInspectorMessageHeader should render error 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -330,7 +326,6 @@ exports[`LogBoxInspectorMessageHeader should render fatal 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {
@@ -408,7 +403,6 @@ exports[`LogBoxInspectorMessageHeader should render syntax error 1`] = `
   style={
     Object {
       "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 2,
       "flex": 0,
       "shadowColor": "#000",
       "shadowOffset": Object {

Libraries/Modal/Modal.js

@@ -229,7 +229,7 @@ class Modal extends React.Component<Props> {
     }
 
     const innerChildren = __DEV__ ? (
-      <AppContainer rootTag={this.context.rootTag}>
+      <AppContainer rootTag={this.context.rootTag} internal_excludeLogBox>
         {this.props.children}
       </AppContainer>
     ) : (

Libraries/ReactNative/AppContainer.js

@@ -27,6 +27,7 @@ type Props = $ReadOnly<{|
   rootTag: number,
   showArchitectureIndicator?: boolean,
   WrapperComponent?: ?React.ComponentType<any>,
+  internal_excludeLogBox?: ?boolean,
 |}>;
 
 type State = {|
@@ -94,7 +95,7 @@ class AppContainer extends React.Component<Props, State> {
 
   render(): React.Node {
     let logBox = null;
-    if (__DEV__) {
+    if (__DEV__ && !this.props.internal_excludeLogBox) {
       if (!global.__RCTProfileIsProfiling) {
         if (global.__reactExperimentalLogBox) {
           const LogBox = require('../LogBox/LogBox');