diff --git a/Libraries/LogBox/UI/LogBoxContainer.js b/Libraries/LogBox/UI/LogBoxContainer.js index ccfd1730724..d0070f7fa5a 100644 --- a/Libraries/LogBox/UI/LogBoxContainer.js +++ b/Libraries/LogBox/UI/LogBoxContainer.js @@ -108,14 +108,13 @@ function LogBoxContainer(props: Props): React.Node { /> )} - ); } 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; diff --git a/Libraries/LogBox/UI/LogBoxInspector.js b/Libraries/LogBox/UI/LogBoxInspector.js index 8261584bc07..11b6150a38e 100644 --- a/Libraries/LogBox/UI/LogBoxInspector.js +++ b/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 ( - + - + ); } @@ -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, diff --git a/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/Libraries/LogBox/UI/LogBoxInspectorFooter.js index 6b9880a4c5a..0bdc2b0ddc3 100644 --- a/Libraries/LogBox/UI/LogBoxInspectorFooter.js +++ b/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 ( - - This error cannot be dismissed. - + + + This error cannot be dismissed. + + ); } @@ -58,18 +60,18 @@ function FooterButton(props: ButtonProps): React.Node { pressed: LogBoxStyle.getBackgroundDarkColor(), }} onPress={props.onPress} - style={buttonStyles.button}> + style={buttonStyles.safeArea}> {props.text} - ); } 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%', diff --git a/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/Libraries/LogBox/UI/LogBoxInspectorHeader.js index b9272a883d1..06d8147b388 100644 --- a/Libraries/LogBox/UI/LogBoxInspectorHeader.js +++ b/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 ( - + Failed to compile - + ); } @@ -49,7 +49,7 @@ function LogBoxInspectorHeader(props: Props): React.Node { const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`; return ( - + props.onSelectIndex(nextIndex)} /> - + ); } 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; diff --git a/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js b/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js index fff9e9c3b8e..991417e230f 100644 --- a/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js +++ b/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: { diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap index 96fc0325a68..037c49d67ca 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap +++ b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap @@ -4,7 +4,7 @@ exports[`LogBoxContainer should render both an error and warning notification 1` - `; @@ -198,7 +191,7 @@ exports[`LogBoxContainer should render the latest error notification 1`] = ` - `; @@ -255,7 +241,7 @@ exports[`LogBoxContainer should render the latest warning notification 1`] = ` - `; diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap index 88506088c21..b29f6dea534 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap +++ b/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`] = ` - - + `; exports[`LogBoxContainer should render null with no logs 1`] = `null`; exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = ` - - + `; diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap index dd9a1d72093..48e29aa5ae7 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap +++ b/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 } } > - - This error cannot be dismissed. - + + This error cannot be dismissed. + + `; @@ -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 { diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap index 007a1a2bf51..1fb99437170 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap +++ b/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`] = ` - - + `; exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = ` - - + `; exports[`LogBoxInspectorHeader should render syntax error header 1`] = ` - - + `; exports[`LogBoxInspectorHeader should render two buttons for three or more total 1`] = ` - - + `; diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap index ea3608170fa..f60e57ae2f5 100644 --- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorMesageHeader-test.js.snap +++ b/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 { diff --git a/Libraries/Modal/Modal.js b/Libraries/Modal/Modal.js index 8cc55ffe572..f803295228e 100644 --- a/Libraries/Modal/Modal.js +++ b/Libraries/Modal/Modal.js @@ -229,7 +229,7 @@ class Modal extends React.Component { } const innerChildren = __DEV__ ? ( - + {this.props.children} ) : ( diff --git a/Libraries/ReactNative/AppContainer.js b/Libraries/ReactNative/AppContainer.js index a5ae75d822a..5966f19b921 100644 --- a/Libraries/ReactNative/AppContainer.js +++ b/Libraries/ReactNative/AppContainer.js @@ -27,6 +27,7 @@ type Props = $ReadOnly<{| rootTag: number, showArchitectureIndicator?: boolean, WrapperComponent?: ?React.ComponentType, + internal_excludeLogBox?: ?boolean, |}>; type State = {| @@ -94,7 +95,7 @@ class AppContainer extends React.Component { 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');