From 737b04f1f919914236ff20f3e3b1618dd778396c Mon Sep 17 00:00:00 2001
From: Monte Thakkar <manthan.thakkar@gmail.com>
Date: Sun, 11 Nov 2018 17:36:57 -0800
Subject: [PATCH 1/5] updated ios red box - looks better

---
 RNTester/RNTester/Info.plist |  2 ++
 React/Modules/RCTRedBox.m    | 29 ++++++++++++++++-------------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/RNTester/RNTester/Info.plist b/RNTester/RNTester/Info.plist
index 828b7b591e8847..13573d49b86602 100644
--- a/RNTester/RNTester/Info.plist
+++ b/RNTester/RNTester/Info.plist
@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleBlackTranslucent</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleExecutable</key>
diff --git a/React/Modules/RCTRedBox.m b/React/Modules/RCTRedBox.m
index f44f4fd0245b63..ce023579b34b00 100644
--- a/React/Modules/RCTRedBox.m
+++ b/React/Modules/RCTRedBox.m
@@ -47,7 +47,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 #else
         self.windowLevel = UIWindowLevelStatusBar - 1;
 #endif
-        self.backgroundColor = [UIColor colorWithRed:0.8 green:0 blue:0 alpha:1];
+        self.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
         self.hidden = YES;
 
         UIViewController *rootController = [UIViewController new];
@@ -88,37 +88,40 @@ - (instancetype)initWithFrame:(CGRect)frame
         dismissButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin;
         dismissButton.accessibilityIdentifier = @"redbox-dismiss";
         dismissButton.titleLabel.font = [UIFont systemFontOfSize:13];
+        dismissButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
         [dismissButton setTitle:dismissText forState:UIControlStateNormal];
-        [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-        [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
+        [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+        [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
         [dismissButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
 
         UIButton *reloadButton = [UIButton buttonWithType:UIButtonTypeCustom];
         reloadButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         reloadButton.accessibilityIdentifier = @"redbox-reload";
         reloadButton.titleLabel.font = [UIFont systemFontOfSize:13];
-
+        reloadButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
         [reloadButton setTitle:reloadText forState:UIControlStateNormal];
-        [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-        [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
+        [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+        [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
         [reloadButton addTarget:self action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
 
         UIButton *copyButton = [UIButton buttonWithType:UIButtonTypeCustom];
         copyButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         copyButton.accessibilityIdentifier = @"redbox-copy";
         copyButton.titleLabel.font = [UIFont systemFontOfSize:13];
+        copyButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
         [copyButton setTitle:copyText forState:UIControlStateNormal];
-        [copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-        [copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
+        [copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+        [copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
         [copyButton addTarget:self action:@selector(copyStack) forControlEvents:UIControlEventTouchUpInside];
 
         UIButton *extraButton = [UIButton buttonWithType:UIButtonTypeCustom];
         extraButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         extraButton.accessibilityIdentifier = @"redbox-extra";
         extraButton.titleLabel.font = [UIFont systemFontOfSize:13];
+        extraButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
         [extraButton setTitle:extraText forState:UIControlStateNormal];
-        [extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateNormal];
-        [extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
+        [extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+        [extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
         [extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside];
 
         CGFloat buttonWidth = self.bounds.size.width / 4;
@@ -254,7 +257,7 @@ - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forErrorMessage:(NSString
         cell.textLabel.lineBreakMode = NSLineBreakByWordWrapping;
         cell.textLabel.numberOfLines = 0;
         cell.detailTextLabel.textColor = [UIColor whiteColor];
-        cell.backgroundColor = [UIColor clearColor];
+        cell.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
         cell.selectionStyle = UITableViewCellSelectionStyleNone;
     }
 
@@ -267,11 +270,11 @@ - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forStackFrame:(RCTJSStack
 {
     if (!cell) {
         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"cell"];
-        cell.textLabel.textColor = [UIColor colorWithWhite:1 alpha:0.9];
+        cell.textLabel.textColor = [UIColor whiteColor];
         cell.textLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:14];
         cell.textLabel.lineBreakMode = NSLineBreakByCharWrapping;
         cell.textLabel.numberOfLines = 2;
-        cell.detailTextLabel.textColor = [UIColor colorWithWhite:1 alpha:0.7];
+        cell.detailTextLabel.textColor = [UIColor colorWithRed:0.95 green:0.78 blue:0.78 alpha:1.0];
         cell.detailTextLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:11];
         cell.detailTextLabel.lineBreakMode = NSLineBreakByTruncatingMiddle;
         cell.backgroundColor = [UIColor clearColor];

From b203c9d374300e53e055f69b6704e1e7fe037406 Mon Sep 17 00:00:00 2001
From: Monte Thakkar <manthan.thakkar@gmail.com>
Date: Sun, 11 Nov 2018 17:56:16 -0800
Subject: [PATCH 2/5] updated android red box - much better

---
 .../src/main/res/devsupport/layout/redbox_item_title.xml       | 1 +
 ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml    | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml
index 8091fb4d32574e..97360378c4e36d 100644
--- a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml
+++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_title.xml
@@ -7,4 +7,5 @@
   android:textColor="@android:color/white"
   android:textSize="16sp"
   android:textStyle="bold"
+  android:background="#D01926"
   />
diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
index 832ac4fb877e63..da3b98373ea844 100644
--- a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
+++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
@@ -3,7 +3,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
-    android:background="#E80000"
+    android:background="#1A1A1A"
     >
     <ListView
         android:id="@+id/rn_redbox_stack"
@@ -53,6 +53,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
+        android:background="#D01926"
         >
         <Button
             android:id="@+id/rn_redbox_dismiss_button"

From 1e13f378c9b8a95d2d119ee93ae2e812552bbc1b Mon Sep 17 00:00:00 2001
From: Monte Thakkar <manthan.thakkar@gmail.com>
Date: Sat, 17 Nov 2018 11:54:06 -0800
Subject: [PATCH 3/5] address PR feedback - bottom bar made black; added
 bottomSafeArea for iPhoneX

---
 React/Modules/RCTRedBox.m                     | 73 +++++++++++++++----
 .../drawable/redbox_top_border_background.xml | 17 +++++
 .../devsupport/layout/redbox_item_frame.xml   |  2 +-
 .../res/devsupport/layout/redbox_view.xml     |  2 +-
 .../main/res/devsupport/values/strings.xml    |  2 +-
 5 files changed, 80 insertions(+), 16 deletions(-)
 create mode 100644 ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml

diff --git a/React/Modules/RCTRedBox.m b/React/Modules/RCTRedBox.m
index ce023579b34b00..b1fe1d088e1424 100644
--- a/React/Modules/RCTRedBox.m
+++ b/React/Modules/RCTRedBox.m
@@ -56,6 +56,7 @@ - (instancetype)initWithFrame:(CGRect)frame
         rootView.backgroundColor = [UIColor clearColor];
 
         const CGFloat buttonHeight = 60;
+        const CGFloat bottomSafeViewHeight = 27;
 
         CGRect detailsFrame = rootView.bounds;
         detailsFrame.size.height -= buttonHeight;
@@ -73,10 +74,10 @@ - (instancetype)initWithFrame:(CGRect)frame
         [rootView addSubview:_stackTraceTableView];
 
 #if TARGET_OS_SIMULATOR
-        NSString *reloadText = @"Reload JS (\u2318R)";
-        NSString *dismissText = @"Dismiss (ESC)";
-        NSString *copyText = @"Copy (\u2325\u2318C)";
-        NSString *extraText = @"Extra Info (\u2318E)";
+        NSString *reloadText = @"Reload\n(\u2318R)";
+        NSString *dismissText = @"Dismiss\n(ESC)";
+        NSString *copyText = @"Copy\n(\u2325\u2318C)";
+        NSString *extraText = @"Extra Info\n(\u2318E)";
 #else
         NSString *reloadText = @"Reload JS";
         NSString *dismissText = @"Dismiss";
@@ -88,7 +89,9 @@ - (instancetype)initWithFrame:(CGRect)frame
         dismissButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleRightMargin;
         dismissButton.accessibilityIdentifier = @"redbox-dismiss";
         dismissButton.titleLabel.font = [UIFont systemFontOfSize:13];
-        dismissButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
+        dismissButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
+        dismissButton.titleLabel.textAlignment = NSTextAlignmentCenter;
+        dismissButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
         [dismissButton setTitle:dismissText forState:UIControlStateNormal];
         [dismissButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
         [dismissButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
@@ -98,7 +101,9 @@ - (instancetype)initWithFrame:(CGRect)frame
         reloadButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         reloadButton.accessibilityIdentifier = @"redbox-reload";
         reloadButton.titleLabel.font = [UIFont systemFontOfSize:13];
-        reloadButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
+        reloadButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
+        reloadButton.titleLabel.textAlignment = NSTextAlignmentCenter;
+        reloadButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
         [reloadButton setTitle:reloadText forState:UIControlStateNormal];
         [reloadButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
         [reloadButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
@@ -108,7 +113,9 @@ - (instancetype)initWithFrame:(CGRect)frame
         copyButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         copyButton.accessibilityIdentifier = @"redbox-copy";
         copyButton.titleLabel.font = [UIFont systemFontOfSize:13];
-        copyButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
+        copyButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
+        copyButton.titleLabel.textAlignment = NSTextAlignmentCenter;
+        copyButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
         [copyButton setTitle:copyText forState:UIControlStateNormal];
         [copyButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
         [copyButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
@@ -118,26 +125,66 @@ - (instancetype)initWithFrame:(CGRect)frame
         extraButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
         extraButton.accessibilityIdentifier = @"redbox-extra";
         extraButton.titleLabel.font = [UIFont systemFontOfSize:13];
-        extraButton.backgroundColor = [UIColor colorWithRed:0.82 green:0.10 blue:0.15 alpha:1.0];
+        extraButton.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
+        extraButton.titleLabel.textAlignment = NSTextAlignmentCenter;
+        extraButton.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
         [extraButton setTitle:extraText forState:UIControlStateNormal];
         [extraButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
         [extraButton setTitleColor:[UIColor colorWithWhite:1 alpha:0.5] forState:UIControlStateHighlighted];
         [extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside];
 
         CGFloat buttonWidth = self.bounds.size.width / 4;
-        dismissButton.frame = CGRectMake(0, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight);
-        reloadButton.frame = CGRectMake(buttonWidth, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight);
-        copyButton.frame = CGRectMake(buttonWidth * 2, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight);
-        extraButton.frame = CGRectMake(buttonWidth * 3, self.bounds.size.height - buttonHeight, buttonWidth, buttonHeight);
+        CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - ([self isPhoneX] ? bottomSafeViewHeight : 0);
+
+        dismissButton.frame = CGRectMake(0, bottomButtonHeight, buttonWidth, buttonHeight);
+        reloadButton.frame = CGRectMake(buttonWidth, bottomButtonHeight, buttonWidth, buttonHeight);
+        copyButton.frame = CGRectMake(buttonWidth * 2, bottomButtonHeight, buttonWidth, buttonHeight);
+        extraButton.frame = CGRectMake(buttonWidth * 3, bottomButtonHeight, buttonWidth, buttonHeight);
+
+        UIView *topBorderDismissButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, dismissButton.frame.size.width, 1)];
+        topBorderDismissButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
+        [dismissButton addSubview:topBorderDismissButton];
+
+        UIView *topBorderReloadButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, reloadButton.frame.size.width, 1)];
+        topBorderReloadButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
+        [reloadButton addSubview:topBorderReloadButton];
+
+        UIView *topBorderCopyButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, copyButton.frame.size.width, 1)];
+        topBorderCopyButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
+        [copyButton addSubview:topBorderCopyButton];
+
+        UIView *topBorderExtraButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, extraButton.frame.size.width, 1)];
+        topBorderExtraButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
+        [extraButton addSubview:topBorderExtraButton];
+
+        UIView *bottomSafeView = [UIView new];
+        bottomSafeView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
+        bottomSafeView.frame = CGRectMake(0, self.bounds.size.height - bottomSafeViewHeight, self.bounds.size.width, bottomSafeViewHeight);
 
         [rootView addSubview:dismissButton];
         [rootView addSubview:reloadButton];
         [rootView addSubview:copyButton];
         [rootView addSubview:extraButton];
+
+        if ([self isPhoneX]) {
+            [rootView addSubview:bottomSafeView];
+        }
     }
     return self;
 }
 
+- (BOOL)isPhoneX
+{
+    CGSize screenSize = [UIScreen mainScreen].nativeBounds.size;
+    CGSize iPhoneXScreenSize = CGSizeMake(1125, 2436);
+    CGSize iPhoneXMaxScreenSize = CGSizeMake(1242, 2688);
+    CGSize iPhoneXRScreenSize = CGSizeMake(828, 1792);
+
+    return CGSizeEqualToSize(screenSize, iPhoneXScreenSize) ||
+        CGSizeEqualToSize(screenSize, iPhoneXMaxScreenSize) ||
+        CGSizeEqualToSize(screenSize, iPhoneXRScreenSize);
+}
+
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
 
 - (void)dealloc
@@ -274,7 +321,7 @@ - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forStackFrame:(RCTJSStack
         cell.textLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:14];
         cell.textLabel.lineBreakMode = NSLineBreakByCharWrapping;
         cell.textLabel.numberOfLines = 2;
-        cell.detailTextLabel.textColor = [UIColor colorWithRed:0.95 green:0.78 blue:0.78 alpha:1.0];
+        cell.detailTextLabel.textColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
         cell.detailTextLabel.font = [UIFont fontWithName:@"Menlo-Regular" size:11];
         cell.detailTextLabel.lineBreakMode = NSLineBreakByTruncatingMiddle;
         cell.backgroundColor = [UIColor clearColor];
diff --git a/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml b/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml
new file mode 100644
index 00000000000000..32e4bbd5644d77
--- /dev/null
+++ b/ReactAndroid/src/main/res/devsupport/drawable/redbox_top_border_background.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item>
+        <shape android:shape="rectangle" >
+            <solid android:color="#1A1A1A" />
+        </shape>
+    </item>
+
+    <item android:bottom="-2dp" android:right="-2dp" android:left="-2dp">
+        <shape>
+            <solid android:color="@android:color/transparent" />
+            <stroke
+                android:width="1dp"
+                android:color="#B3B3B3" />
+        </shape>
+    </item>
+</layer-list>
diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml
index ad23cbf4749827..98d808082e48c3 100644
--- a/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml
+++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_item_frame.xml
@@ -19,7 +19,7 @@
     android:id="@+id/rn_frame_file"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:textColor="#E6B8B8"
+    android:textColor="#B3B3B3"
     android:textSize="12sp"
     android:fontFamily="monospace"
     />
diff --git a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
index da3b98373ea844..6f23319ecba3b8 100644
--- a/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
+++ b/ReactAndroid/src/main/res/devsupport/layout/redbox_view.xml
@@ -53,7 +53,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
-        android:background="#D01926"
+        android:background="@drawable/redbox_top_border_background"
         >
         <Button
             android:id="@+id/rn_redbox_dismiss_button"
diff --git a/ReactAndroid/src/main/res/devsupport/values/strings.xml b/ReactAndroid/src/main/res/devsupport/values/strings.xml
index 594be948cb3f7a..29411de6e7aa8f 100644
--- a/ReactAndroid/src/main/res/devsupport/values/strings.xml
+++ b/ReactAndroid/src/main/res/devsupport/values/strings.xml
@@ -21,7 +21,7 @@
   <string name="catalyst_dismiss_button" project="catalyst" translatable="false">Dismiss\n(ESC)</string>
   <string name="catalyst_reload_button" project="catalyst" translatable="false">Reload\n(R,\u00A0R)</string>
   <string name="catalyst_poke_sampling_profiler" project="catalyst" translatable="false">Start/Stop Sampling Profiler</string>
-  <string name="catalyst_copy_button" project="catalyst" translatable="false">Copy</string>
+  <string name="catalyst_copy_button" project="catalyst" translatable="false">Copy\n</string>
   <string name="catalyst_report_button" project="catalyst" translatable="false">Report</string>
   <string name="catalyst_loading_from_url" project="catalyst" translatable="false">Loading from %1$s…</string>
 </resources>

From d8af4951cfb6adc1f3bd3d0375168bb567d79cfb Mon Sep 17 00:00:00 2001
From: Monte Thakkar <manthan.thakkar@gmail.com>
Date: Sat, 17 Nov 2018 12:38:45 -0800
Subject: [PATCH 4/5] fixed typo: isIPhoneX

---
 React/Modules/RCTRedBox.m | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/React/Modules/RCTRedBox.m b/React/Modules/RCTRedBox.m
index b1fe1d088e1424..4b362f0d628760 100644
--- a/React/Modules/RCTRedBox.m
+++ b/React/Modules/RCTRedBox.m
@@ -134,7 +134,7 @@ - (instancetype)initWithFrame:(CGRect)frame
         [extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside];
 
         CGFloat buttonWidth = self.bounds.size.width / 4;
-        CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - ([self isPhoneX] ? bottomSafeViewHeight : 0);
+        CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - ([self isIPhoneX] ? bottomSafeViewHeight : 0);
 
         dismissButton.frame = CGRectMake(0, bottomButtonHeight, buttonWidth, buttonHeight);
         reloadButton.frame = CGRectMake(buttonWidth, bottomButtonHeight, buttonWidth, buttonHeight);
@@ -166,14 +166,14 @@ - (instancetype)initWithFrame:(CGRect)frame
         [rootView addSubview:copyButton];
         [rootView addSubview:extraButton];
 
-        if ([self isPhoneX]) {
+        if ([self isIPhoneX]) {
             [rootView addSubview:bottomSafeView];
         }
     }
     return self;
 }
 
-- (BOOL)isPhoneX
+- (BOOL)isIPhoneX
 {
     CGSize screenSize = [UIScreen mainScreen].nativeBounds.size;
     CGSize iPhoneXScreenSize = CGSizeMake(1125, 2436);

From 5fa32b84d7daf665cbc13d90afd0fd9a9b4ccb87 Mon Sep 17 00:00:00 2001
From: Monte Thakkar <manthan.thakkar@gmail.com>
Date: Thu, 13 Dec 2018 15:05:10 -0600
Subject: [PATCH 5/5] addressed PR feedback

---
 React/Modules/RCTRedBox.m | 56 +++++++++++++--------------------------
 1 file changed, 19 insertions(+), 37 deletions(-)

diff --git a/React/Modules/RCTRedBox.m b/React/Modules/RCTRedBox.m
index 4b362f0d628760..b7a3433e46c956 100644
--- a/React/Modules/RCTRedBox.m
+++ b/React/Modules/RCTRedBox.m
@@ -56,10 +56,9 @@ - (instancetype)initWithFrame:(CGRect)frame
         rootView.backgroundColor = [UIColor clearColor];
 
         const CGFloat buttonHeight = 60;
-        const CGFloat bottomSafeViewHeight = 27;
 
         CGRect detailsFrame = rootView.bounds;
-        detailsFrame.size.height -= buttonHeight;
+        detailsFrame.size.height -= buttonHeight + [self bottomSafeViewHeight];
 
         _stackTraceTableView = [[UITableView alloc] initWithFrame:detailsFrame style:UITableViewStylePlain];
         _stackTraceTableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
@@ -134,55 +133,38 @@ - (instancetype)initWithFrame:(CGRect)frame
         [extraButton addTarget:self action:@selector(showExtraDataViewController) forControlEvents:UIControlEventTouchUpInside];
 
         CGFloat buttonWidth = self.bounds.size.width / 4;
-        CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - ([self isIPhoneX] ? bottomSafeViewHeight : 0);
-
+        CGFloat bottomButtonHeight = self.bounds.size.height - buttonHeight - [self bottomSafeViewHeight];
+    
         dismissButton.frame = CGRectMake(0, bottomButtonHeight, buttonWidth, buttonHeight);
         reloadButton.frame = CGRectMake(buttonWidth, bottomButtonHeight, buttonWidth, buttonHeight);
         copyButton.frame = CGRectMake(buttonWidth * 2, bottomButtonHeight, buttonWidth, buttonHeight);
         extraButton.frame = CGRectMake(buttonWidth * 3, bottomButtonHeight, buttonWidth, buttonHeight);
 
-        UIView *topBorderDismissButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, dismissButton.frame.size.width, 1)];
-        topBorderDismissButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
-        [dismissButton addSubview:topBorderDismissButton];
-
-        UIView *topBorderReloadButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, reloadButton.frame.size.width, 1)];
-        topBorderReloadButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
-        [reloadButton addSubview:topBorderReloadButton];
-
-        UIView *topBorderCopyButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, copyButton.frame.size.width, 1)];
-        topBorderCopyButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
-        [copyButton addSubview:topBorderCopyButton];
-
-        UIView *topBorderExtraButton = [[UIView alloc] initWithFrame:CGRectMake(0, 0, extraButton.frame.size.width, 1)];
-        topBorderExtraButton.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
-        [extraButton addSubview:topBorderExtraButton];
-
-        UIView *bottomSafeView = [UIView new];
-        bottomSafeView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
-        bottomSafeView.frame = CGRectMake(0, self.bounds.size.height - bottomSafeViewHeight, self.bounds.size.width, bottomSafeViewHeight);
+        UIView *topBorder = [[UIView alloc] initWithFrame:CGRectMake(0, bottomButtonHeight + 1, rootView.frame.size.width, 1)];
+        topBorder.backgroundColor = [UIColor colorWithRed:0.70 green:0.70 blue:0.70 alpha:1.0];
 
         [rootView addSubview:dismissButton];
         [rootView addSubview:reloadButton];
         [rootView addSubview:copyButton];
         [rootView addSubview:extraButton];
-
-        if ([self isIPhoneX]) {
-            [rootView addSubview:bottomSafeView];
-        }
+        [rootView addSubview:topBorder];
+        
+        UIView *bottomSafeView = [UIView new];
+        bottomSafeView.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1];
+        bottomSafeView.frame = CGRectMake(0, self.bounds.size.height - [self bottomSafeViewHeight], self.bounds.size.width, [self bottomSafeViewHeight]);
+        
+        [rootView addSubview:bottomSafeView];
     }
     return self;
 }
 
-- (BOOL)isIPhoneX
+- (NSInteger)bottomSafeViewHeight
 {
-    CGSize screenSize = [UIScreen mainScreen].nativeBounds.size;
-    CGSize iPhoneXScreenSize = CGSizeMake(1125, 2436);
-    CGSize iPhoneXMaxScreenSize = CGSizeMake(1242, 2688);
-    CGSize iPhoneXRScreenSize = CGSizeMake(828, 1792);
-
-    return CGSizeEqualToSize(screenSize, iPhoneXScreenSize) ||
-        CGSizeEqualToSize(screenSize, iPhoneXMaxScreenSize) ||
-        CGSizeEqualToSize(screenSize, iPhoneXRScreenSize);
+    if (@available(iOS 11.0, *)) {
+        return [UIApplication sharedApplication].delegate.window.safeAreaInsets.bottom;
+    } else {
+        return 0;
+    }
 }
 
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)aDecoder)
@@ -297,7 +279,7 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
 - (UITableViewCell *)reuseCell:(UITableViewCell *)cell forErrorMessage:(NSString *)message
 {
     if (!cell) {
-        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"msg-cell"];
+        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"msg-cell"];
         cell.textLabel.accessibilityIdentifier = @"redbox-error";
         cell.textLabel.textColor = [UIColor whiteColor];
         cell.textLabel.font = [UIFont boldSystemFontOfSize:16];