Added userInterfaceStyle to Alert to override user interface style for iOS 13+ (#33553)

luoxuhai · facebook-github-bot · commit 47bd78f64f33 · 2022-06-08T18:28:16.000-07:00
Summary: Support to override Alert interface style to match your app. For example, You want to change the style on the alert. ## Changelog  [iOS] [Added] - Add userInterfaceStyle to Alert to override user interface style for iOS 13+ Pull Request resolved: #33553 Test Plan: **`userInterfaceStyle: 'light'`:** <img width="320" src="https://user-images.githubusercontent.com/37284154/161358408-50dbf0a5-ae46-458e-a075-8595cce1b046.png" /> **`userInterfaceStyle: 'dark'`:** <img width="320" src="https://user-images.githubusercontent.com/37284154/161358326-bc54effb-1635-43df-97e0-522328713259.PNG" /> Reviewed By: philIip Differential Revision: D35371697 Pulled By: ryancat fbshipit-source-id: 597c1a97ca94571abada2b5fb97cb2adcb5337f5
diff --git a/Libraries/Alert/Alert.js b/Libraries/Alert/Alert.js
@@ -28,6 +28,7 @@ export type Buttons = Array<{
 
 type Options = {
   cancelable?: ?boolean,
+  userInterfaceStyle?: 'unspecified' | 'light' | 'dark',
   onDismiss?: ?() => void,
   ...
 };
@@ -45,7 +46,15 @@ class Alert {
     options?: Options,
   ): void {
     if (Platform.OS === 'ios') {
-      Alert.prompt(title, message, buttons, 'default');
+      Alert.prompt(
+        title,
+        message,
+        buttons,
+        'default',
+        undefined,
+        undefined,
+        options,
+      );
     } else if (Platform.OS === 'android') {
       const NativeDialogManagerAndroid =
         require('../NativeModules/specs/NativeDialogManagerAndroid').default;
@@ -108,6 +117,7 @@ class Alert {
     type?: ?AlertType = 'plain-text',
     defaultValue?: string,
     keyboardType?: string,
+    options?: Options,
   ): void {
     if (Platform.OS === 'ios') {
       let callbacks = [];
@@ -142,6 +152,7 @@ class Alert {
           cancelButtonKey,
           destructiveButtonKey,
           keyboardType,
+          userInterfaceStyle: options?.userInterfaceStyle || undefined,
         },
         (id, value) => {
           const cb = callbacks[id];
diff --git a/Libraries/Alert/NativeAlertManager.js b/Libraries/Alert/NativeAlertManager.js
@@ -20,6 +20,7 @@ export type Args = {|
   cancelButtonKey?: string,
   destructiveButtonKey?: string,
   keyboardType?: string,
+  userInterfaceStyle?: string,
 |};
 
 export interface Spec extends TurboModule {
diff --git a/React/CoreModules/RCTAlertManager.mm b/React/CoreModules/RCTAlertManager.mm
@@ -32,6 +32,20 @@ @implementation RCTConvert (UIAlertViewStyle)
 
 @end
 
+@implementation RCTConvert (UIUserInterfaceStyle)
+
+RCT_ENUM_CONVERTER(
+    UIUserInterfaceStyle,
+    (@{
+      @"unspecified" : @(UIUserInterfaceStyleUnspecified),
+      @"light" : @(UIUserInterfaceStyleLight),
+      @"dark" : @(UIUserInterfaceStyleDark),
+    }),
+    UIUserInterfaceStyleUnspecified,
+    integerValue)
+
+@end
+
 @interface RCTAlertManager () <NativeAlertManagerSpec>
 
 @end
@@ -103,6 +117,15 @@ - (void)invalidate
   RCTAlertController *alertController = [RCTAlertController alertControllerWithTitle:title
                                                                              message:nil
                                                                       preferredStyle:UIAlertControllerStyleAlert];
+
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
+    __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0
+  if (@available(iOS 13.0, *)) {
+    UIUserInterfaceStyle userInterfaceStyle = [RCTConvert UIUserInterfaceStyle:args.userInterfaceStyle()];
+    alertController.overrideUserInterfaceStyle = userInterfaceStyle;
+  }
+#endif
+
   switch (type) {
     case RCTAlertViewStylePlainTextInput: {
       [alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {
