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');