From 47bd78f64f334b770edc7fabd4b9cceb07a7a503 Mon Sep 17 00:00:00 2001
From: luoxuhai <15186743693@163.com>
Date: Wed, 8 Jun 2022 18:28:16 -0700
Subject: [PATCH] Added userInterfaceStyle to Alert to override user interface
style for 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
[iOS] [Added] - Add userInterfaceStyle to Alert to override user interface style for iOS 13+
Pull Request resolved: https://github.com/facebook/react-native/pull/33553
Test Plan:
**`userInterfaceStyle: 'light'`:**
**`userInterfaceStyle: 'dark'`:**
Reviewed By: philIip
Differential Revision: D35371697
Pulled By: ryancat
fbshipit-source-id: 597c1a97ca94571abada2b5fb97cb2adcb5337f5
---
Libraries/Alert/Alert.js | 13 ++++++++++++-
Libraries/Alert/NativeAlertManager.js | 1 +
React/CoreModules/RCTAlertManager.mm | 23 +++++++++++++++++++++++
3 files changed, 36 insertions(+), 1 deletion(-)
diff --git a/Libraries/Alert/Alert.js b/Libraries/Alert/Alert.js
index e65e9e3de3a284..d05cf9d6be6bb9 100644
--- 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
index 899455bda94872..9597ef155a522d 100644
--- 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
index c4a1cde52dcbeb..7480580d9865d5 100644
--- 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 ()
@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) {