Add dark mode to loading progress

Summary:
This diff updates the loading banner to respect the RCTAppearance dev mode setting.

Changelog: [General] [iOS] Add dark mode support to loading banner

Reviewed By: fkgozali

Differential Revision: D21429148

fbshipit-source-id: d7d9e778245112a19accf813dcff693f0d187a38

Author: rickhanlonii

Libraries/Utilities/LoadingView.ios.js

@@ -12,25 +12,38 @@
 
 import processColor from '../StyleSheet/processColor';
 import NativeDevLoadingView from './NativeDevLoadingView';
+import Appearance from './Appearance';
 
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
     if (NativeDevLoadingView) {
-      const loadColor = processColor('#404040');
-      const refreshColor = processColor('#2584e8');
-      const white = processColor('#ffffff');
+      if (type === 'refresh') {
+        const backgroundColor = processColor('#2584e8');
+        const textColor = processColor('#ffffff');
 
-      NativeDevLoadingView.showMessage(
-        message,
-        typeof white === 'number' ? white : null,
-        type && type === 'load'
-          ? typeof loadColor === 'number'
-            ? loadColor
-            : null
-          : typeof refreshColor === 'number'
-          ? refreshColor
-          : null,
-      );
+        NativeDevLoadingView.showMessage(
+          message,
+          typeof textColor === 'number' ? textColor : null,
+          typeof backgroundColor === 'number' ? backgroundColor : null,
+        );
+      } else if (type === 'load') {
+        let backgroundColor;
+        let textColor;
+
+        if (Appearance.getColorScheme() === 'dark') {
+          backgroundColor = processColor('#fafafa');
+          textColor = processColor('#242526');
+        } else {
+          backgroundColor = processColor('#404040');
+          textColor = processColor('#ffffff');
+        }
+
+        NativeDevLoadingView.showMessage(
+          message,
+          typeof textColor === 'number' ? textColor : null,
+          typeof backgroundColor === 'number' ? backgroundColor : null,
+        );
+      }
     }
   },
   hide() {

React/CoreModules/RCTAppearance.h

@@ -12,6 +12,7 @@
 
 RCT_EXTERN void RCTEnableAppearancePreference(BOOL enabled);
 RCT_EXTERN void RCTOverrideAppearancePreference(NSString *const);
+RCT_EXTERN NSString *RCTColorSchemePreference(UITraitCollection *traitCollection);
 
 @interface RCTAppearance : RCTEventEmitter <RCTBridgeModule>
 @end

React/CoreModules/RCTAppearance.mm

@@ -30,7 +30,7 @@ void RCTOverrideAppearancePreference(NSString *const colorSchemeOverride)
   sColorSchemeOverride = colorSchemeOverride;
 }
 
-static NSString *RCTColorSchemePreference(UITraitCollection *traitCollection)
+NSString *RCTColorSchemePreference(UITraitCollection *traitCollection)
 {
 #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
     __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0

React/CoreModules/RCTDevLoadingView.mm

@@ -10,6 +10,7 @@
 #import <QuartzCore/QuartzCore.h>
 
 #import <FBReactNativeSpec/FBReactNativeSpec.h>
+#import <React/RCTAppearance.h>
 #import <React/RCTBridge.h>
 #import <React/RCTConvert.h>
 #import <React/RCTDefines.h>
@@ -190,27 +191,61 @@ - (void)showMessage:(NSString *)message color:(UIColor *)color backgroundColor:(
   });
 }
 
+- (void)showProgressMessage:(NSString *)message
+{
+  if (self->_window != nil) {
+    // This is an optimization. Since the progress can come in quickly,
+    // we want to do the minimum amount of work to update the UI,
+    // which is to only update the label text.
+    self->_label.text = message;
+    return;
+  }
+
+  UIColor *color = [UIColor whiteColor];
+  UIColor *backgroundColor = [UIColor colorWithHue:105 saturation:0 brightness:.25 alpha:1];
+
+  if ([self isDarkModeEnabled]) {
+    color = [UIColor colorWithHue:208 saturation:0.03 brightness:.14 alpha:1];
+    backgroundColor = [UIColor colorWithHue:0 saturation:0 brightness:0.98 alpha:1];
+  }
+
+  [self showMessage:message color:color backgroundColor:backgroundColor];
+}
+
+- (void)showOfflineMessage
+{
+  UIColor *color = [UIColor whiteColor];
+  UIColor *backgroundColor = [UIColor blackColor];
+
+  if ([self isDarkModeEnabled]) {
+    color = [UIColor blackColor];
+    backgroundColor = [UIColor whiteColor];
+  }
+
+  NSString *message = [NSString stringWithFormat:@"Connect to %@ to develop JavaScript.", RCT_PACKAGER_NAME];
+  [self showMessage:message color:color backgroundColor:backgroundColor];
+}
+
+- (BOOL)isDarkModeEnabled
+{
+  // We pass nil here to match the behavior of the native module.
+  // If we were to pass a view, then it's possible that this native
+  // banner would have a different color than the JavaScript banner
+  // (which always passes nil). This would result in an inconsistent UI.
+  return [RCTColorSchemePreference(nil) isEqualToString:@"dark"];
+}
 - (void)showWithURL:(NSURL *)URL
 {
-  UIColor *color;
-  UIColor *backgroundColor;
-  NSString *message;
   if (URL.fileURL) {
     // If dev mode is not enabled, we don't want to show this kind of notification.
 #if !RCT_DEV
     return;
 #endif
-    color = [UIColor whiteColor];
-    backgroundColor = [UIColor blackColor];
-    message = [NSString stringWithFormat:@"Connect to %@ to develop JavaScript.", RCT_PACKAGER_NAME];
-    [self showMessage:message color:color backgroundColor:backgroundColor];
+    [self showOfflineMessage];
   } else {
-    color = [UIColor whiteColor];
-    backgroundColor = [UIColor colorWithHue:105 saturation:0 brightness:.25 alpha:1];
-    message = [NSString stringWithFormat:@"Loading from %@\u2026", RCT_PACKAGER_NAME];
-
     [self showInitialMessageDelayed:^{
-      [self showMessage:message color:color backgroundColor:backgroundColor];
+      NSString *message = [NSString stringWithFormat:@"Loading from %@\u2026", RCT_PACKAGER_NAME];
+      [self showProgressMessage:message];
     }];
   }
 }
@@ -225,18 +260,7 @@ - (void)updateProgress:(RCTLoadingProgress *)progress
   [self clearInitialMessageDelay];
 
   dispatch_async(dispatch_get_main_queue(), ^{
-    if (self->_window == nil) {
-      // If we didn't show the initial message, then there's no banner window.
-      // We need to create it here so that the progress is actually displayed.
-      UIColor *color = [UIColor whiteColor];
-      UIColor *backgroundColor = [UIColor colorWithHue:105 saturation:0 brightness:.25 alpha:1];
-      [self showMessage:[progress description] color:color backgroundColor:backgroundColor];
-    } else {
-      // This is an optimization. Since the progress can come in quickly,
-      // we want to do the minimum amount of work to update the UI,
-      // which is to only update the label text.
-      self->_label.text = [progress description];
-    }
+    [self showProgressMessage:[progress description]];
   });
 }