Added userInterfaceStyle to Alert to override user interface style fo…

…r iOS 13+ (#33553)

Summary:
Support to override Alert interface style to match your app. For example, You want to change the style on the alert.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/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

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];

Libraries/Alert/NativeAlertManager.js

@@ -20,6 +20,7 @@ export type Args = {|
   cancelButtonKey?: string,
   destructiveButtonKey?: string,
   keyboardType?: string,
+  userInterfaceStyle?: string,
 |};
 
 export interface Spec extends TurboModule {

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) {